/* =========================================================
   FALLNRISE — V1.5
   Feuille de style de toutes les pages (style.css n'est plus utilisée).
   ========================================================= */

:root {
  --bg: #0b0b0d;
  --surface: rgba(19, 18, 20, 0.86);
  --surface-solid: #141316;
  --surface-2: #1d1c20;
  --surface-3: #26252a;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --faint: #71717a;
  /* Couleur d'accent : rouge par défaut, au choix pour les membres Premium (brand.js) */
  --red: #e51212;
  --red-rgb: 229 18 18;
  --red-hover: #ff2a2a;
  --red-soft: rgb(var(--red-rgb) / 0.14);
  --red-deep: #7a0b0b;
  /* Erreurs et suppressions : toujours en rouge */
  --danger: #e51212;
  --danger-hover: #ff2a2a;
  --yellow: #ffcc00;
  --yellow-soft: rgba(255, 204, 0, 0.12);
  --green: #4bd37b;
  --green-soft: rgba(75, 211, 123, 0.12);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Barlow Condensed", "Inter", system-ui, sans-serif;
  --header-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body.modal-open {
  overflow: hidden;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--muted);
  font-size: 0.88rem;
}

/* ---------- Fond ---------- */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Fond sobre et pro : noir légèrement grainé, lueur rouge en haut à droite (création maison).
     Une image pour l'ordinateur (paysage), une pour le téléphone (portrait). */
  background: #0b0b0d var(--bg-img, url("bg-pro.webp")) center / cover no-repeat;
}

@media (max-width: 720px) and (orientation: portrait) {
  .bg-scene {
    background: #0b0b0d var(--bg-img-m, url("bg-pro-mobile.webp")) center top / cover no-repeat;
  }
}

/* ---------- Barre de chargement ---------- */
.load-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1000;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease 0.1s;
  pointer-events: none;
}

.load-bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--red), var(--yellow));
  box-shadow: 0 0 12px rgb(var(--red-rgb) / 0.8);
  animation: loadSlide 1.1s ease-in-out infinite;
}

.load-bar.active {
  opacity: 1;
  transition-delay: 0s;
}

@keyframes loadSlide {
  from {
    left: -40%;
  }
  to {
    left: 100%;
  }
}

/* ---------- Écran de démarrage ---------- */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.9rem;
  transition: opacity 0.3s ease;
}

.boot-screen.fade {
  opacity: 0;
  pointer-events: none;
}

.boot-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: 1px;
  color: var(--text);
}

.boot-logo span,
.brand span {
  color: var(--red);
}

.boot-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--surface-3);
  border-top-color: var(--red);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Typo / marque ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: 0.5px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.brand-lg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: clamp(1.9rem, 9vw, 2.6rem);
  text-align: center;
  white-space: normal;
}

/* Nom de l'appli : FALLN (blanc) + RISE (rouge), collés */
.brand-text {
  font-weight: inherit;
  white-space: nowrap;
}

/* Logo (casque) devant le nom */
.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 6px rgb(var(--red-rgb) / 0.35));
}

.brand-lg .brand-mark {
  width: 64px;
  height: 64px;
}

.boot-mark {
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 4px 14px rgb(var(--red-rgb) / 0.4));
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--red-hover);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---------- Boutons ---------- */
button {
  font: inherit;
  color: inherit;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--surface-3);
  color: var(--text);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  min-width: 0;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn.primary {
  background: var(--red);
  color: #fff;
}

@media (hover: hover) {
  .btn.primary:hover:not(:disabled) {
    background: var(--red-hover);
  }
}

.btn.secondary {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

@media (hover: hover) {
  .btn.secondary:hover:not(:disabled) {
    background: #303036;
  }
}

.btn.ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

@media (hover: hover) {
  .btn.ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
  }
}

.btn.success {
  background: var(--green-soft);
  border-color: rgba(75, 211, 123, 0.45);
  color: var(--green);
}

.btn.danger {
  background: transparent;
  border-color: rgba(255, 82, 82, 0.45);
  color: #ff6b6b;
}

.btn.dashed {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--muted);
}

@media (hover: hover) {
  .btn.dashed:hover {
    color: var(--text);
    border-color: var(--text);
  }
}

.btn.sm {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 0.82rem;
  border-radius: 10px;
}

.btn.full {
  width: 100%;
}

.btn.is-on {
  border-color: rgba(255, 204, 0, 0.6);
  color: var(--yellow);
  background: var(--yellow-soft);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.15s ease;
}

@media (hover: hover) {
  .icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn svg circle[r="1.5"] {
  fill: currentColor;
}

.link-btn {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 0.86rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px;
  align-self: center;
}

@media (hover: hover) {
  .link-btn:hover {
    color: var(--text);
  }
}

/* ---------- Champs ---------- */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

input,
select,
textarea,
.input-like {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgba(10, 10, 12, 0.7);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* évite le zoom auto sur iPhone */
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder {
  color: var(--faint);
}

/* iPhone : les cases de recherche gardent notre style (pas l'allure ronde de Safari) */
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

/* iPhone : dates alignées à gauche et à la même hauteur que les autres cases (vides comprises) */
@supports (-webkit-touch-callout: none) {
  input[type="date"],
  input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    text-align: left;
  }

  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value {
    margin: 0;
    text-align: left;
  }
}

input:focus,
select:focus,
textarea:focus,
.input-like:focus-visible {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}

select {
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.hint {
  color: var(--faint);
  font-size: 0.76rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.check-row input {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  accent-color: var(--red);
}

/* ---------- Auth ---------- */
.auth-view {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.auth-card {
  width: 100%;
  min-width: 0;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 26px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.auth-tagline {
  text-align: center;
  color: var(--muted);
  margin-top: -8px;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
}

.segment {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.segment.active {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.auth-hint {
  text-align: center;
  color: var(--muted);
  font-size: 0.86rem;
}

.auth-foot {
  text-align: center;
  color: var(--faint);
  font-size: 0.78rem;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

/* ---------- En-tête de l'app ---------- */
#appView {
  position: relative;
  z-index: 1;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 13, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.app-header-inner {
  max-width: 960px;
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  max-width: 180px;
}

@media (hover: hover) {
  .profile-chip:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

.profile-chip-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  font-weight: 800;
  font-size: 0.85rem;
  overflow: hidden;
}

.profile-chip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Recherche */
.profile-search-wrap {
  position: relative;
  flex: 1 1 auto;
  max-width: 340px;
  margin-left: auto;
}

.profile-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--faint);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.profile-search-input {
  min-height: 40px;
  height: 40px;
  padding: 8px 12px 8px 38px;
  border-radius: 999px;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}

@media (max-width: 720px) {
  .profile-search-input {
    font-size: 16px;
  }
}

.profile-search-results {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.profile-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 10px;
  text-decoration: none;
}

@media (hover: hover) {
  .profile-search-result:hover {
    background: var(--red-soft);
  }
}

.profile-search-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

.profile-search-avatar-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  font-weight: 800;
}

.profile-search-result-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.profile-search-result-text strong,
.profile-search-result-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-search-result-text small,
.profile-search-state {
  color: var(--muted);
  font-size: 0.78rem;
}

.profile-search-state {
  padding: 12px;
  text-align: center;
}

/* ---------- Contenu ---------- */
.app-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 22px 16px calc(110px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.section-head-actions {
  display: flex;
  gap: 8px;
}

.panel,
.workout-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.panel {
  padding: 18px;
}

.empty-state {
  padding: 22px 16px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  color: var(--muted);
  text-align: center;
  font-size: 0.92rem;
}

/* Onglets des séances */
.tabs-container {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.tabs-container::-webkit-scrollbar {
  display: none;
}

.tabs-container .empty-state {
  flex: 1;
}

.tab-btn {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(19, 18, 20, 0.8);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.tab-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) {
  .tab-btn:hover {
    color: var(--text);
  }
}

.tab-btn.active {
  background: var(--text);
  border-color: var(--text);
  color: #111;
}

.tab-btn.today .tab-mark {
  color: var(--yellow);
}

.tab-btn.active.today .tab-mark {
  color: #b8860b;
}

.tab-btn.completed {
  opacity: 0.6;
}

.tab-btn.completed .tab-mark-done {
  color: var(--green);
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
}

.skeleton-tab {
  flex: 0 0 140px;
  height: 42px;
  border-radius: 999px;
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* Carte séance */
.workout-card {
  overflow: visible;
}

.workout-card.workout-completed {
  border-color: rgba(75, 211, 123, 0.3);
}

.workout-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 6px;
}

.workout-head-text {
  min-width: 0;
}

.workout-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.workout-badges:has(.badge:not(.hidden)) {
  margin-bottom: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.badge-yellow {
  background: var(--yellow-soft);
  color: var(--yellow);
}

.badge-green {
  background: var(--green-soft);
  color: var(--green);
}

.workout-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.1;
  text-transform: uppercase;
  border-left: 4px solid var(--red);
  padding-left: 10px;
  overflow-wrap: anywhere;
}

.workout-focus {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.88rem;
}

.workout-focus span {
  color: var(--text);
  font-weight: 600;
}

.workout-menu {
  position: relative;
}

.dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 180px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

@media (hover: hover) {
  .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.07);
  }
}

.dropdown-item.danger {
  color: #ff6b6b;
}

.progress-block {
  padding: 10px 18px 4px;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), var(--yellow));
  transition: width 0.4s ease;
}

.workout-completed .progress-fill {
  background: var(--green);
}

/* Liste d'exercices */
.exo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
}

.exo-card {
  position: relative;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.exo-card.done {
  border-color: rgba(75, 211, 123, 0.25);
  background: rgba(75, 211, 123, 0.04);
}

.exo-card.done .exo-name {
  color: var(--muted);
}

.exo-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.exo-num {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--muted);
  font-weight: 800;
  font-size: 0.82rem;
}

.exo-main {
  flex: 1;
  min-width: 0;
}

.exo-name {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.exo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.chip b {
  color: var(--text);
  font-weight: 800;
}

.chip[title] {
  cursor: help;
}

.exo-check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 2px solid var(--border-strong);
  background: transparent;
  color: transparent;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 900;
  transition: all 0.15s ease;
}

@media (hover: hover) {
  .exo-check:hover:not(:disabled) {
    border-color: var(--green);
    color: rgba(75, 211, 123, 0.5);
  }
}

.exo-check.on {
  background: var(--green);
  border-color: var(--green);
  color: #062b14;
}

.exo-check:disabled {
  cursor: default;
}

.exo-history {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.exo-history-line {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: baseline;
}

.exo-history-line strong {
  color: var(--text);
  font-weight: 700;
}

.exo-history-line .label {
  color: var(--faint);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.exo-history-line.today strong {
  color: var(--yellow);
}

.delta {
  font-weight: 800;
  font-size: 0.76rem;
  padding: 1px 6px;
  border-radius: 6px;
}

.delta.up {
  color: var(--green);
  background: var(--green-soft);
}

.delta.down {
  color: #ff8a8a;
  background: rgba(255, 82, 82, 0.12);
}

.delta.same {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
}

.exo-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 12px;
}

.exo-actions .btn {
  min-height: 42px;
}

.btn-log.has-log {
  border-color: rgba(255, 204, 0, 0.5);
  color: var(--yellow);
}

.exo-list.compact .exo-card {
  padding: 12px;
}

/* Pied de la carte séance */
.workout-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 6px 18px 18px;
}

/* Séances reçues */
.shared-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.shared-grid .empty-state {
  grid-column: 1 / -1;
}

.shared-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}

.shared-card strong {
  font-size: 1rem;
}

.shared-card p {
  color: var(--muted);
  font-size: 0.85rem;
}

.shared-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.shared-actions .btn:first-child {
  grid-column: 1 / -1;
}

/* Diète repliable */
.collapsible summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.collapsible summary::-webkit-details-marker {
  display: none;
}

.diet-summary {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: right;
}

.chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-top: -4px;
}

.collapsible[open] .chevron {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.collapsible[open] summary {
  margin-bottom: 16px;
}

/* ---------- Fenêtres (modales / bottom sheets) ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.18s ease;
}

.sheet {
  width: 100%;
  min-width: 0;
  max-width: 520px;
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  animation: sheetIn 0.22s ease;
}

.sheet-sm {
  max-width: 420px;
}

.sheet-lg {
  max-width: 760px;
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.sheet-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.sheet-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Le contenu défile : aucun bloc ne doit être écrasé (ex : filtres de la recherche d'aliments) */
.sheet-body > * {
  flex-shrink: 0;
}

.sheet-foot {
  display: flex;
  gap: 10px;
  padding: 12px 18px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--border);
}

.sheet-foot .btn {
  flex: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

@keyframes sheetIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ---------- Éditeur ---------- */
.editor-ex-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.editor-ex-head h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
}

.editor-ex-head small {
  color: var(--faint);
  font-size: 0.78rem;
}

.exo-edit-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.exo-edit {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.exo-edit.sortable-ghost {
  opacity: 0.35;
}

.exo-edit.sortable-chosen {
  border-color: var(--red);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.exo-edit-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drag-handle {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 36px;
  color: var(--faint);
  font-size: 1.3rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.exo-edit-num {
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.85rem;
  min-width: 18px;
}

.exo-edit-title {
  flex: 1;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.exo-edit .input-exo-name {
  margin-top: 8px;
  font-weight: 600;
}

.exo-edit-tools {
  display: flex;
  gap: 4px;
}

.exo-edit-tools .icon-btn {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  font-size: 0.9rem;
}

@media (hover: hover) {
  .exo-edit-tools .remove-exo-btn:hover {
    background: rgba(255, 82, 82, 0.16);
    color: #ff6b6b;
  }
}

.exo-edit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.exo-edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.exo-edit-grid input,
.exo-edit-grid .input-like {
  min-height: 42px;
  padding: 9px 11px;
}

.rest-pick {
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.rest-pick::after {
  content: "⏱";
  opacity: 0.6;
  font-size: 0.85rem;
}

.rest-pick.empty {
  color: var(--faint);
}

.tip {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  cursor: help;
  vertical-align: 1px;
}

/* ---------- Molette ---------- */
.wheel-picker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 0;
}

.wheel-col {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wheel {
  --item-h: 44px;
  position: relative;
  z-index: 1;
  width: 78px;
  height: calc(var(--item-h) * 5);
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  outline: none;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}

.wheel::-webkit-scrollbar {
  display: none;
}

.wheel-item {
  height: var(--item-h);
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--faint);
  cursor: pointer;
  user-select: none;
  transition: color 0.12s ease;
}

.wheel-item.selected {
  color: var(--text);
}

.wheel-spacer {
  height: calc(var(--item-h) * 2);
}

.wheel-unit {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
  width: 28px;
}

.wheel-sep {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--muted);
  z-index: 1;
}

.wheel-highlight {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-strong);
  pointer-events: none;
}

.preset-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.preset-row .btn.selected {
  border-color: var(--red);
  background: var(--red-soft);
}

/* ---------- Saisie des charges ---------- */
.log-previous {
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.86rem;
  color: var(--muted);
}

.log-previous strong {
  color: var(--text);
}

.log-previous .sets-line {
  margin-top: 4px;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
}

.log-sets-head,
.log-set {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 84px;
  gap: 8px;
  align-items: center;
}

.log-sets-head {
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0 2px;
}

.log-sets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.log-set-num {
  display: grid;
  place-items: center;
  height: 46px;
  border-radius: 10px;
  background: var(--surface-2);
  font-weight: 800;
  color: var(--muted);
}

.stepper {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(10, 10, 12, 0.7);
}

.stepper:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}

.stepper button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
}

.stepper button:active {
  background: rgba(255, 255, 255, 0.08);
}

.stepper input {
  border: 0;
  border-radius: 0;
  text-align: center;
  padding: 10px 2px;
  background: transparent;
  box-shadow: none !important;
  font-weight: 700;
  width: 100%;
  min-width: 0;
}

.log-set .input-reps {
  min-width: 0;
  text-align: center;
  font-weight: 700;
}

.log-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Chrono ---------- */
.timer-exercise {
  font-size: 1.25rem !important;
}

.timer-ring {
  position: relative;
  width: min(240px, 70vw);
  aspect-ratio: 1;
  margin: 4px auto;
}

.timer-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 8;
}

.ring-fill {
  fill: none;
  stroke: var(--red);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 339.29;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s linear, stroke 0.3s ease;
}

.rest-timer-display {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 15vw, 4.2rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

.timer-sheet.finished .ring-fill {
  stroke: var(--green);
}

.timer-sheet.finished .rest-timer-display {
  color: var(--green);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    transform: scale(1.06);
  }
}

.timer-adjust {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-timer {
  white-space: nowrap;
  position: fixed;
  z-index: 150;
  left: 50%;
  bottom: calc(18px + var(--safe-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgb(var(--red-rgb) / 0.5);
  background: rgba(20, 19, 22, 0.95);
  box-shadow: var(--shadow);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  animation: sheetIn 0.2s ease;
}

.mini-timer-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  animation: blink 1s ease-in-out infinite;
}

.mini-timer.paused .mini-timer-dot {
  animation: none;
  background: var(--muted);
}

.mini-timer.finished {
  border-color: var(--green);
  color: var(--green);
  font-size: 1.2rem;
}

.mini-timer.finished .mini-timer-dot {
  background: var(--green);
}

@keyframes blink {
  50% {
    opacity: 0.25;
  }
}

/* ---------- Toasts ---------- */
.toast-wrap {
  position: fixed;
  z-index: 1100;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 420px);
  pointer-events: none;
}

.toast {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--green);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  font-weight: 600;
  animation: sheetIn 0.2s ease;
}

.toast.error {
  border-left-color: var(--danger);
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 720px) {
  body {
    font-size: 15px;
  }

  .app-header-inner {
    flex-wrap: wrap;
    gap: 8px 6px;
    padding: 10px 14px;
  }

  .brand {
    font-size: 1.25rem;
    gap: 6px;
  }

  .brand .brand-mark {
    width: 26px;
    height: 26px;
  }

  .brand-lg .brand-mark {
    width: 56px;
    height: 56px;
  }

  .header-actions {
    gap: 6px;
  }

  .profile-search-wrap {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
    margin: 0;
  }

  .profile-chip {
    padding-right: 4px;
  }

  .profile-chip-name {
    display: none;
  }

  .app-main {
    padding: 18px 14px calc(110px + var(--safe-bottom));
    gap: 26px;
  }

  .tabs-container {
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .section-head .section-head-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-head .section-head-actions .btn {
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    white-space: normal;
    line-height: 1.15;
  }

  .workout-head,
  .progress-block,
  .exo-list,
  .workout-foot {
    padding-left: 12px;
    padding-right: 12px;
  }

  .muscle-box {
    margin-left: 12px;
    margin-right: 12px;
  }

  .workout-title {
    font-size: 1.5rem;
  }

  .exo-card {
    padding: 12px;
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  /* Les fenêtres deviennent des panneaux qui montent du bas */
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .sheet,
  .sheet-sm,
  .sheet-lg {
    max-width: none;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
  }

  #editorModal .sheet-lg {
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }

  .exo-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-card {
    padding: 26px 18px;
  }

}

@media (max-width: 380px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .log-sets-head,
  .log-set {
    grid-template-columns: 36px minmax(0, 1fr) 70px;
  }

  .workout-foot {
    grid-template-columns: 1fr;
  }
}

@media (hover: hover) {
  .exo-card:hover {
    border-color: var(--border-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* PC : boutons d'exercice à leur taille naturelle */
@media (min-width: 721px) {
  .exo-actions {
    grid-template-columns: auto auto;
    justify-content: start;
  }

  .exo-actions .btn-log {
    min-width: 220px;
  }
}

/* =========================================================
   SÉLECTEUR DE SÉANCE (téléphone)
   ========================================================= */
.session-switcher {
  display: none;
}

.session-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.session-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  text-align: left;
  cursor: pointer;
}

.session-item.active {
  border-color: var(--red);
  background: var(--red-soft);
}

.session-item-status {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--muted);
  font-weight: 800;
}

.session-item.active .session-item-status {
  background: var(--red);
  color: #fff;
}

.session-item.completed .session-item-status {
  background: var(--green-soft);
  color: var(--green);
}

.session-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-item-name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.session-item.completed .session-item-name {
  color: var(--muted);
}

.session-item-meta {
  color: var(--muted);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-item .badge {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .tabs-container {
    display: none;
  }

  /* Aucune séance : on affiche quand même le message (et le lien vers les programmes) */
  .tabs-container.is-empty {
    display: block;
  }

  .session-switcher:not(.hidden) {
    display: flex;
    align-items: stretch;
    gap: 8px;
  }

  .session-nav {
    width: 48px;
    height: auto;
    flex: 0 0 48px;
    font-size: 1.6rem;
    line-height: 1;
    border-radius: 14px;
  }

  .session-nav:disabled {
    opacity: 0.3;
  }

  .session-picker {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    text-align: left;
    cursor: pointer;
  }

  .session-picker:active {
    background: var(--surface-2);
  }

  .session-picker-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .session-picker-label {
    color: var(--faint);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .session-picker-name {
    font-weight: 800;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .session-picker-chevron {
    color: var(--muted);
  }
}

/* =========================================================
   LOT 3 — PAGES PROFIL / ADMIN / SUPPORT
   ========================================================= */
.page {
  position: relative;
  z-index: 1;
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .back-link:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

.header-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.req {
  color: var(--red-hover);
}

.up {
  color: var(--green);
}

.down {
  color: #ff8a8a;
}

/* Badges de rôle */
.badge-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  vertical-align: middle;
}

.badge-admin {
  background: var(--red-soft);
  color: #ff6b6b;
  border: 1px solid rgb(var(--red-rgb) / 0.4);
}

.badge-gold {
  background: rgba(255, 204, 0, 0.14);
  color: var(--yellow);
  border: 1px solid rgba(255, 204, 0, 0.35);
}

.badge-blue {
  background: rgba(96, 165, 250, 0.14);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.35);
}

.badge-red {
  background: rgba(248, 113, 113, 0.14);
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.35);
}

.badge-green {
  border: 1px solid rgba(75, 211, 123, 0.35);
}

.badge-yellow {
  border: 1px solid rgba(255, 204, 0, 0.35);
}

.profile-search-result-text .badge {
  font-size: 0.62rem;
  padding: 1px 6px;
  margin-left: 2px;
}

/* Onglets */
.segmented.tabs-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented .segment {
  min-width: 0;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* trop long pour la place : 2 lignes plutôt qu'un mot coupé (« Musculati… »),
     un mot très long (allemand…) se coupe avec un tiret */
  white-space: normal;
  line-height: 1.15;
  overflow-wrap: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media (max-width: 400px) {
  .segmented .segment {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.count-pill {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.72rem;
}

/* ---------- Profil ---------- */
.profile-hero {
  padding: 0;
  overflow: hidden;
}

.profile-banner {
  position: relative;
  height: clamp(130px, 28vw, 220px);
  background: center / cover no-repeat;
  background-color: var(--surface-2);
}

.profile-banner.empty {
  background-image: linear-gradient(135deg, rgb(var(--red-rgb) / 0.35), rgba(20, 19, 22, 0.9) 60%) !important;
}

.profile-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(19, 18, 20, 0.85));
  pointer-events: none;
}

.banner-edit {
  position: absolute;
  z-index: 1;
  right: 12px;
  top: 12px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.profile-identity {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 18px;
  position: relative;
  z-index: 1;
}

/* Seule la photo déborde sur la bannière : le nom reste en dessous, bien lisible */
.profile-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  margin-top: -48px;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--surface-solid);
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-edit {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--surface-solid);
  background: var(--red);
  cursor: pointer;
  font-size: 0.85rem;
}

.profile-id-text {
  flex: 1;
  min-width: 0;
  padding-top: 12px;
}

.profile-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.profile-id-text .badge-row {
  margin: 6px 0 2px;
}

.profile-identity #editProfileBtn {
  margin-top: 14px;
}

.profile-bio {
  padding: 14px 18px 0;
  color: var(--text);
  white-space: pre-line;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 18px 18px;
}

.info-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  min-width: 0;
}

.info-tile small {
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.info-tile strong {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stat-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  min-width: 0;
}

.stat-tile strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-tile span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.3;
}

.stat-grid.compact .stat-tile {
  padding: 12px;
  background: var(--surface-2);
}

.stat-grid.compact .stat-tile strong {
  font-size: 1.5rem;
}

.record-list,
.history-list {
  display: flex;
  flex-direction: column;
}

.record-row,
.history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.record-row:last-child,
.history-row:last-child {
  border-bottom: 0;
}

.record-row .muted {
  grid-column: 1 / -1;
  font-size: 0.76rem;
}

.record-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.record-value {
  color: var(--yellow);
  white-space: nowrap;
}

.history-title {
  margin: 18px 0 4px;
  font-size: 0.78rem;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.history-row {
  grid-template-columns: 70px minmax(0, 1fr);
}

.history-row strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.panel .section-head {
  margin-bottom: 6px;
}

.panel .field + .stat-grid {
  margin-top: 14px;
}

/* Graphique */
.chart-figure {
  margin: 16px 0 0;
}

.chart-caption {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.chart {
  position: relative;
}

.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}

.chart .grid {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}

.chart .axis {
  fill: var(--faint);
  font-size: 12px;
  font-family: var(--font);
}

.chart .line {
  fill: none;
  stroke: var(--red-hover);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart .dot {
  fill: var(--red-hover);
  stroke: var(--surface-solid);
  stroke-width: 2;
}

.chart .dot-active {
  fill: var(--text);
  stroke: var(--red-hover);
  stroke-width: 3;
  pointer-events: none;
}

.chart .crosshair {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.chart .direct-label {
  fill: var(--text);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
}

.chart-tooltip {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, calc(-100% - 14px));
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 120px;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  font-size: 0.8rem;
  pointer-events: none;
}

.chart-tooltip span,
.chart-tooltip small {
  color: var(--muted);
}

/* Diète */
.calc-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgb(var(--red-rgb) / 0.35);
  background: var(--red-soft);
}

.calc-rows > div,
.account-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.9rem;
}

.calc-rows span,
.account-rows span {
  color: var(--muted);
}

.calc-main {
  border-top: 1px solid var(--border-strong);
  margin-top: 4px;
  padding-top: 10px !important;
}

.calc-main strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
}

.calc-macros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.calc-macros > div {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
}

.calc-macros strong {
  font-size: 1.15rem;
}

.calc-macros span {
  color: var(--muted);
  font-size: 0.76rem;
}

.diet-targets-head {
  margin-top: 8px;
}

.macro-track {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
}

.m-prot {
  background: #f87171;
}

.m-gluc {
  background: #fbbf24;
}

.m-lip {
  background: #60a5fa;
}

.macro-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}

.macro-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 3px;
  vertical-align: -1px;
}

.macro-bar .hint {
  margin-top: 6px;
}

.account-rows {
  margin-top: 6px;
}

.account-rows strong {
  font-weight: 600;
  font-size: 0.85rem;
  text-align: right;
  overflow-wrap: anywhere;
}

textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

/* ---------- Admin ---------- */
.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.toolbar input {
  flex: 1 1 220px;
  min-height: 42px;
}

.toolbar .segmented {
  flex: 1 1 220px;
}

.user-list,
.message-list,
.log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.user-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  font-weight: 800;
  text-decoration: none;
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-card-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.user-card-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.user-card-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: var(--muted);
  font-size: 0.8rem;
}

.user-meta b {
  color: var(--text);
  font-weight: 600;
}

.user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.protected {
  font-size: 0.8rem;
}

.danger-zone {
  border-color: rgba(255, 82, 82, 0.3);
  margin-top: 10px;
}

.danger-zone .btn {
  margin-top: 12px;
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
}

.choice input {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  accent-color: var(--red);
}

.choice .badge {
  font-size: 0.85rem;
  padding: 4px 12px;
}

.message-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.message-card.done {
  opacity: 0.7;
}

.message-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.message-date {
  margin-left: auto;
}

.message-subject {
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.message-from {
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.message-body {
  white-space: pre-line;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.log-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.log-action {
  font-weight: 700;
}

.log-target {
  overflow-wrap: anywhere;
}

/* ---------- Support ---------- */
.support-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-title {
  font-size: 2.2rem;
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.faq-item summary {
  position: relative;
  padding: 14px 44px 14px 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1.3rem;
  font-weight: 400;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  padding: 0 16px 16px;
  color: var(--muted);
  font-size: 0.92rem;
}

.faq-item p b {
  color: var(--text);
}

.contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.contact-card .btn {
  white-space: normal;
  overflow-wrap: anywhere;
}

.privacy-box {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.84rem;
  color: var(--muted);
}

.privacy-box strong {
  color: var(--text);
}

.privacy-box ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.privacy-box b {
  color: var(--text);
}

.privacy-box a {
  color: var(--text);
}

.check-row.consent {
  align-items: flex-start;
  margin-top: 0;
}

.check-row.consent input {
  flex: 0 0 20px;
  margin-top: 2px;
}

[aria-invalid="true"] {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(229, 18, 18, 0.14);
}

.success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 20px;
  text-align: center;
}

.success-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-size: 1.6rem;
  font-weight: 900;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  #supportForm .grid-2 {
    grid-template-columns: 1fr;
  }

  .header-title {
    flex: 1;
    font-size: 1.05rem;
  }

  .profile-identity {
    flex-wrap: wrap;
    padding: 0 14px;
  }

  .profile-avatar-wrap {
    margin-top: -42px;
  }

  .profile-id-text {
    padding-top: 8px;
  }

  .profile-avatar {
    width: 84px;
    height: 84px;
    font-size: 2.2rem;
  }

  .profile-id-text {
    flex: 1 1 calc(100% - 110px);
  }

  .profile-name {
    font-size: 1.6rem;
  }

  .profile-identity #editProfileBtn {
    width: 100%;
    margin-top: 2px;
  }

  .profile-bio {
    padding: 12px 14px 0;
  }

  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
  }

  .stat-grid,
  .stat-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-grid > .stat-tile:nth-child(3):last-child {
    grid-column: 1 / -1;
  }

  .stat-tile strong {
    font-size: 1.7rem;
  }

  .stat-grid.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stat-grid.compact > .stat-tile:nth-child(3):last-child {
    grid-column: auto;
  }

  .stat-grid.compact .stat-tile strong {
    font-size: 1.2rem;
  }

  .message-date {
    margin-left: 0;
    width: 100%;
  }

  .user-actions .btn {
    flex: 1;
  }

  .hero-title {
    font-size: 1.9rem;
  }
}

/* =========================================================
   PARTAGE PAR PROFIL
   ========================================================= */
.share-search-wrap {
  position: relative;
}

.share-search-wrap input {
  padding-left: 40px;
}

.share-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 120px;
}

.share-result {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.share-result:focus-visible {
  border-color: var(--border-strong);
}

@media (hover: hover) {
  .share-result:hover {
    border-color: var(--border-strong);
  }
}

.share-hint {
  padding: 18px 8px;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}

.share-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--red);
  background: var(--red-soft);
}

.share-selected .profile-search-result-text {
  flex: 1;
}

#shareModeBtn {
  align-self: center;
}

/* ---------- Hors ligne / appli installable (V1.5 étape A) ---------- */
.net-banner {
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  color: #1a1400;
  background: var(--yellow);
}

.net-banner.syncing {
  color: var(--text);
  background: var(--surface-3);
  border-bottom: 1px solid var(--border-strong);
}

.timer-push {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}

.push-toggle {
  max-width: 100%;
  white-space: normal;
}

.push-toggle.on {
  color: var(--green);
  border-color: rgba(75, 211, 123, 0.45);
  background: var(--green-soft);
}

.push-hint {
  margin: 0;
  max-width: 320px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}

.install-help ol {
  margin: 4px 0 14px;
  padding-left: 20px;
  line-height: 1.55;
}

.install-help p {
  margin: 0 0 4px;
}

.app-version {
  margin: 28px 0 8px;
  font-size: 0.72rem;
  text-align: center;
  color: var(--faint);
}

/* ---------- V1.5 étape B : aides, supersets, saisie série par série ---------- */
.toast-wrap .toast {
  pointer-events: auto;
}

.toast.help {
  border-left-color: var(--yellow);
  font-weight: 500;
  line-height: 1.45;
}

button.chip {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.chip-q {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 800;
  align-self: center;
}

button.tip {
  border: 0;
  padding: 0;
  font-family: inherit;
}

.superset-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 204, 0, 0.35);
  background: rgba(255, 204, 0, 0.04);
  position: relative;
}

.superset-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 0 2px;
}

.superset-label span {
  color: var(--yellow);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.superset-label small {
  color: var(--faint);
  font-size: 0.74rem;
}

.exo-num small {
  font-size: 0.62rem;
  color: var(--yellow);
  margin-left: 1px;
}

.exo-card.in-group .exo-num {
  flex-basis: 34px;
}

.exo-note {
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.exo-history-line.suggest strong {
  color: var(--yellow);
}

/* Saisie : mode du chrono */
.rest-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.rest-mode-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rest-mode-text strong {
  font-size: 0.86rem;
}

.rest-mode-text small {
  color: var(--faint);
  font-size: 0.74rem;
  line-height: 1.3;
}

.seg {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
}

.seg button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
}

.seg button.on {
  background: var(--red);
  color: #fff;
}

.log-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.log-exo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.84rem;
  color: var(--muted);
}

.log-exo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.log-exo-head strong {
  color: var(--text);
  font-size: 0.92rem;
}

.log-prev b {
  color: var(--text);
}

.log-suggest {
  color: var(--text);
}

.log-suggest.up {
  color: var(--yellow);
  font-weight: 600;
}

.log-note {
  padding: 8px 10px !important;
  font-size: 0.84rem !important;
}

.log-tag {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.75rem;
  color: #111;
}

.tag-0 {
  background: var(--yellow) !important;
  color: #111 !important;
}

.tag-1 {
  background: #6fb7ff !important;
  color: #111 !important;
}

.tag-2 {
  background: var(--green) !important;
  color: #111 !important;
}

.tag-3 {
  background: #c99bff !important;
  color: #111 !important;
}

.log-sets-head,
.log-set {
  grid-template-columns: 40px minmax(0, 1fr) 64px 46px;
}

.log-sets-head .center {
  text-align: center;
}

.log-round {
  margin-top: 4px;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.set-check {
  height: 46px;
  border-radius: 12px;
  border: 2px solid var(--border-strong);
  background: transparent;
  color: var(--faint);
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
}

.set-check.on {
  border-color: var(--green);
  background: var(--green);
  color: #0b0b0d;
}

.log-set.done .stepper,
.log-set.done .input-reps {
  border-color: rgba(75, 211, 123, 0.45);
  background: rgba(75, 211, 123, 0.08);
}

.log-set.next .set-check {
  border-color: var(--red);
  color: var(--text);
}

#logRestBtn.pulse {
  border-color: var(--red);
  color: var(--text);
  animation: restPulse 1.2s ease-in-out infinite;
}

@keyframes restPulse {
  50% {
    box-shadow: 0 0 0 4px var(--red-soft);
  }
}

/* Éditeur */
.exo-edit .input-exo-note {
  margin-top: 8px;
}

.superset-toggle {
  margin-top: 8px;
  font-size: 0.84rem;
}

.exo-edit.linked {
  border-color: rgba(255, 204, 0, 0.45);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  position: relative;
}

.exo-edit.linked::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  background: var(--yellow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
  z-index: 1;
}

@media (max-width: 380px) {
  .log-sets-head,
  .log-set {
    grid-template-columns: 32px minmax(0, 1fr) 54px 42px;
  }

  .stepper {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
  }

  .seg button {
    padding: 6px 9px;
  }
}

.rest-mode {
  padding: 8px 10px;
}

.log-note-add {
  align-self: flex-start;
  border: 0;
  padding: 2px 0;
  background: none;
  color: var(--faint);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Éditeur par blocs : exercice simple / bi-set / tri-set / quad-set */
.exo-block {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.exo-block.is-set {
  border: 1px dashed rgba(255, 204, 0, 0.45);
  background: rgba(255, 204, 0, 0.04);
}

.exo-block.sortable-ghost {
  opacity: 0.35;
}

.exo-block.sortable-chosen {
  border-color: var(--red);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.exo-block.is-set .exo-block-kind {
  color: var(--yellow);
}

.exo-block .exo-edit {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.exo-block.is-set .exo-edit + .exo-edit {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.block-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.block-type-row select {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 0.86rem;
}

.slot-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slot-name .input-exo-name {
  flex: 1;
  min-width: 0;
}

.slot-tag {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}

.add-block-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.add-block-label {
  width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.add-block-bar .btn {
  flex: 1 1 calc(50% - 8px);
}

/* ---------- Bibliothèque d'exercices ---------- */
button.exo-name {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  button.exo-name:hover {
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
  }
}

.exo-thumb {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #14161b; /* e83 : vignettes sombres (animations), plus de carré blanc au chargement */
  cursor: pointer;
}

.exo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slot-name {
  position: relative;
}

.slot-lib {
  margin: 6px 0 0;
  font-size: 0.76rem;
  color: var(--green);
}

.lib-suggest {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.lib-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lib-suggest-item:focus {
  background: var(--surface-3);
}

@media (hover: hover) {
  .lib-suggest-item:hover {
    background: var(--surface-3);
  }
}

.lib-suggest-item img,
.lib-noimg {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #14161b; /* e83 : vignettes sombres (animations), plus de carré blanc au chargement */
  display: grid;
  place-items: center;
}

.lib-noimg {
  background: var(--surface-3);
}

.lib-suggest-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lib-suggest-text strong {
  font-size: 0.88rem;
}

.lib-suggest-text small {
  color: var(--faint);
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fiche exercice */
.exo-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exo-info-media {
  border-radius: 14px;
  overflow: hidden;
  background: #14161b; /* e83 : vignettes sombres (animations), plus de carré blanc au chargement */
  display: grid;
  place-items: center;
}

.exo-info-media img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  display: block;
}

.chip-main {
  color: var(--text);
  border-color: rgb(var(--red-rgb) / 0.45);
  background: var(--red-soft);
}

.exo-howto summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
}

.exo-howto ol {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.exo-videos h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.video-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.video-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.video-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  text-decoration: none;
}

.video-icon {
  font-size: 1.2rem;
}

.video-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.video-text strong {
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-text small {
  color: var(--faint);
  font-size: 0.74rem;
}

.video-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.muted.small,
.small {
  font-size: 0.82rem;
}

.credit {
  margin: 0;
  font-size: 0.7rem !important;
  color: var(--faint);
}

/* ---------- Barre d'onglets (style appli) ---------- */
.tabbar {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 560px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  padding: 6px 8px calc(8px + var(--safe-bottom));
  background: rgba(14, 14, 16, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
}

.tab-item,
.tab-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px 2px;
  border: 0;
  background: none;
  color: var(--faint);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tab-item svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab-item.active {
  color: var(--text);
}

.tab-item.active svg {
  stroke: var(--red);
}

.tab-start {
  color: var(--text);
}

.tab-start-circle {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-top: -30px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--red-hover), var(--red) 60%, #a30d0d);
  box-shadow: 0 8px 22px rgb(var(--red-rgb) / 0.45), 0 0 0 5px rgba(14, 14, 16, 0.94);
  transition: transform 0.15s ease;
}

.tab-start:active .tab-start-circle {
  transform: scale(0.94);
}

.tab-start-circle svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* place pour la barre */
.app-main {
  padding-bottom: calc(120px + var(--safe-bottom));
}

.mini-timer {
  bottom: calc(92px + var(--safe-bottom));
}

@media (min-width: 900px) {
  .tabbar {
    bottom: 14px;
    border-radius: 22px;
    border: 1px solid var(--border-strong);
  }
}

/* ---------- Historique ---------- */
.cal-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal-head strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--muted);
  font-size: 0.84rem;
}

.cal-stats b {
  color: var(--text);
}

.cal-weekdays,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.cal-weekdays span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--faint);
}

.cal-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.cal-cell.empty {
  background: none;
}

.cal-cell:disabled {
  opacity: 0.35;
  cursor: default;
}

.cal-cell.trained {
  background: var(--red);
  color: #fff;
}

.cal-cell.today {
  border-color: var(--yellow);
}

.cal-cell.selected {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

.cal-day {
  margin-top: 14px;
}

.cal-day-title {
  margin: 0 0 10px;
  font-size: 1rem;
  text-transform: capitalize;
}

.cal-day-group + .cal-day-group {
  margin-top: 12px;
}

.cal-day-workout {
  margin: 0 0 6px;
  color: var(--yellow);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cal-day .exo-history-line {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

/* ---------- Onglet Exercices ---------- */
.lib-search {
  width: 100%;
}

.lib-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 4px;
  scrollbar-width: none;
}

.lib-filter {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.lib-filter.on {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.lib-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.lib-row {
  border: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  padding: 8px !important;
  border-radius: 12px !important;
}

.lib-row img,
.lib-row .lib-noimg {
  flex-basis: 56px;
  width: 56px;
  height: 56px;
}

/* ---------- Calculateur de disques ---------- */
.plates-result {
  margin-top: 14px;
}

.plates-side {
  margin: 0 0 12px;
}

.plates-visual {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 110px;
  padding: 10px;
  border-radius: 12px;
  background: var(--surface-2);
  overflow-x: auto;
}

.plates-bar {
  flex: 0 0 46px;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(#bbb, #777);
}

.plate {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: var(--h);
  border-radius: 4px;
  background: var(--plate);
  color: #111;
  font-size: 0.6rem;
  font-weight: 900;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.plates-collar {
  flex: 0 0 10px;
  height: 22px;
  border-radius: 3px;
  background: #ccc;
}

body.has-tabbar {
  padding-bottom: calc(100px + var(--safe-bottom));
}

.segmented.tabs-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.history-row .weight-del {
  margin-left: 8px;
  width: 30px;
  height: 30px;
  font-size: 0.8rem;
}

/* ---------- Navigation : barre en bas sur téléphone, onglets dans l'en-tête sur ordinateur ---------- */
.desk-nav {
  display: none;
  border-top: 1px solid var(--border);
}

.desk-nav-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.desk-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
}

.desk-tab {
  padding: 8px 18px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .desk-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
  }
}

.desk-tab.active {
  color: #fff;
  background: var(--red);
}

.desk-start {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.desk-start svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

@media (min-width: 900px) {
  .desk-nav {
    display: block;
  }

  .tabbar {
    display: none;
  }

  .app-main {
    padding-bottom: calc(60px + var(--safe-bottom));
  }

  body.has-tabbar {
    padding-bottom: 0;
  }

  .mini-timer {
    bottom: calc(24px + var(--safe-bottom));
  }
}

/* ---------- Page confidentialité ---------- */
.legal-body h2 {
  margin: 22px 0 8px;
  font-size: 1.05rem;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body p,
.legal-body li {
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.92rem;
}

.legal-body b {
  color: var(--text);
}

.legal-body ul {
  padding-left: 20px;
  margin: 6px 0;
}

.legal-body a {
  color: var(--text);
}

.auth-consent {
  font-size: 0.84rem;
}

.auth-consent a,
.auth-legal a {
  color: var(--text);
}

.auth-legal a {
  white-space: nowrap;
}

.auth-legal {
  margin-top: 10px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--faint);
}

.confirm-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 204, 0, 0.35);
  background: var(--yellow-soft);
  font-size: 0.9rem;
}

.danger-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ---------- Icônes (Lucide) ---------- */
.i {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

.i.fill {
  fill: currentColor;
}

.i.spin {
  animation: iconSpin 1s linear infinite;
}

@keyframes iconSpin {
  to {
    transform: rotate(360deg);
  }
}

.btn,
.dropdown-item,
.badge {
  gap: 7px;
}

.btn .i,
.dropdown-item .i {
  width: 1.05em;
  height: 1.05em;
}

.icon-btn .i {
  width: 18px;
  height: 18px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.toast > .i {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--green);
}

.toast.error > .i {
  color: var(--danger);
}

.toast.help > .i {
  color: var(--yellow);
}

.exo-check .i,
.set-check .i {
  width: 20px;
  height: 20px;
  stroke-width: 3;
}

.tab-mark .i,
.tab-mark-done .i {
  width: 12px;
  height: 12px;
}

.video-icon .i {
  width: 22px;
  height: 22px;
}

.lib-noimg .i {
  width: 22px;
  height: 22px;
  color: var(--faint);
}

.drag-handle .i {
  width: 18px;
  height: 18px;
}

.session-picker-chevron .i {
  width: 16px;
  height: 16px;
}

.success-icon .i {
  width: 34px;
  height: 34px;
  stroke-width: 3;
}

.net-banner .i {
  margin-right: 4px;
}

.tab-item svg,
.tab-start-circle svg,
.desk-start svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab-start-circle svg {
  stroke: #fff;
}

.dropdown-item {
  display: flex;
  align-items: center;
}

.badge .i {
  width: 12px;
  height: 12px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Types de séance : musculation / powerlifting / hyrox ---------- */
.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.kind-picker {
  display: grid;
}

.grid-pl,
.grid-hyrox,
.hyrox-only {
  display: none !important;
}

#exercisesFormContainer[data-kind="pl"] .grid-pl,
#exercisesFormContainer[data-kind="hyrox"] .grid-hyrox {
  display: grid !important;
}

#exercisesFormContainer[data-kind="pl"] .label-int,
#exercisesFormContainer[data-kind="hyrox"] .grid-muscu,
#exercisesFormContainer[data-kind="hyrox"] .block-type-row {
  display: none !important;
}

#addBlockBar[data-kind="hyrox"] [data-size="2"],
#addBlockBar[data-kind="hyrox"] [data-size="3"],
#addBlockBar[data-kind="hyrox"] [data-size="4"] {
  display: none;
}

#addBlockBar[data-kind="hyrox"] .hyrox-only {
  display: inline-flex !important;
  flex-basis: 100%;
}

.grid-pl,
.grid-hyrox {
  margin-top: 10px;
}

.pl-out-label {
  grid-column: span 2;
}

.pl-out {
  display: flex;
  align-items: center;
  font-weight: 800;
  color: var(--yellow);
}

.exo-edit-grid select {
  width: 100%;
}

.kind-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--yellow);
  border: 1px solid rgba(255, 204, 0, 0.4);
}

.hyrox-run-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 204, 0, 0.35);
  background: var(--yellow-soft);
}

.hyrox-run-bar small {
  display: block;
  color: var(--muted);
}

.hyrox-total,
.hyrox-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hyrox-total strong {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hyrox-total span,
.hyrox-split span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hyrox-split {
  margin-top: 16px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface-2);
}

.hyrox-split strong {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}

.hyrox-split small {
  color: var(--faint);
}

.hyrox-splits {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.86rem;
}

.hyrox-splits li {
  display: flex;
  justify-content: space-between;
  padding: 6px 2px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}

.hyrox-splits li b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hyrox-splits li.faster b {
  color: var(--green);
}

.hyrox-splits li.slower b {
  color: #ff8a65;
}

/* ---------- Machines (marques) + photos des membres ---------- */
.slot-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.lib-brands {
  padding-top: 2px;
}

.lib-filter.small {
  padding: 5px 11px;
  font-size: 0.76rem;
}

.exo-photos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.exo-photos-head h3 {
  margin: 0;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.photo-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.photo-list > p {
  grid-column: 1 / -1;
  margin: 0;
}

.photo-item {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-item figcaption {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  font-size: 0.66rem;
  font-weight: 700;
}

.photo-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.65);
}

.photo-add {
  margin-top: 8px;
  cursor: pointer;
}

.photo-add.loading {
  opacity: 0.6;
  pointer-events: none;
}

.exo-info-media img {
  background: #fff;
}

/* =========================================================
   LOT 2 : DIÈTE (journal, scan, objectifs)
   ========================================================= */

/* Barre d'onglets à 6 entrées */
.tabbar.tabbar-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding-left: 3px;
  padding-right: 3px;
}

.tabbar-7 .tab-item,
.tabbar-7 .tab-start {
  font-size: 0.64rem;
  letter-spacing: -0.1px;
}

.tabbar-7 .tab-item span,
.tabbar-7 .tab-start > span:last-child {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tabbar-7 .tab-item svg {
  width: 22px;
  height: 22px;
}

.tabbar-7 .tab-start-circle {
  width: 52px;
  height: 52px;
  margin-top: -26px;
}

.tabbar-7 .tab-start-circle svg {
  width: 25px;
  height: 25px;
}

@media (max-width: 420px) {
  .tabbar-7 .tab-item,
  .tabbar-7 .tab-start {
    font-size: 0.58rem;
    letter-spacing: -0.25px;
  }

  .tabbar-7 .tab-item svg {
    width: 21px;
    height: 21px;
  }

  .tabbar-7 .tab-start-circle {
    width: 48px;
    height: 48px;
  }
}

.diet-main {
  gap: 18px;
}

.diet-main .section {
  gap: 16px;
}

#tabJournal.loading .day-summary,
#tabJournal.loading .meal-list {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Choix du jour */
.day-nav {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
}

.day-nav .icon-btn {
  width: 44px;
  height: 44px;
}

.day-nav .icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.day-label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 6px 10px;
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
}

.day-label strong {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  text-transform: uppercase;
}

.day-label small {
  font-size: 0.8rem;
  font-weight: 500;
  min-height: 1.1em;
}

/* Le vrai sélecteur de date reste invisible : un toucher sur le titre l'ouvre */
.day-label input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.day-label input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Résumé du jour */
.kcal-block {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}

.kcal-ring-wrap {
  position: relative;
  width: 150px;
  height: 150px;
}

.kcal-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.kcal-ring circle {
  fill: none;
  stroke-width: 11;
}

.ring-bg {
  stroke: var(--surface-3);
}

.ring-fg {
  stroke: var(--green);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.kcal-ring.over .ring-fg {
  stroke: var(--yellow);
}

.kcal-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.kcal-center strong {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
}

.kcal-center span {
  max-width: 72%;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25;
}

.kcal-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kcal-side .btn {
  align-self: flex-start;
}

.kcal-left {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.kcal-left b {
  color: var(--green);
  font-size: 1.1rem;
}

.kcal-left.over b {
  color: var(--yellow);
}

.macro-line-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}

.macro-line-top b {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.macro-line-top i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 3px;
}

.macro-line-track {
  height: 7px;
  margin-top: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
}

.macro-line-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.diet-setup {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.diet-setup > .i {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--yellow);
}

.diet-setup p {
  margin: 4px 0 0;
  font-size: 0.88rem;
}

/* Repas */
.meal-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meal-card {
  padding: 14px;
}

.meal-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.meal-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--red-soft);
  color: var(--red-hover);
}

.meal-icon .i {
  width: 20px;
  height: 20px;
}

.meal-title {
  flex: 1;
  min-width: 0;
}

.meal-title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.meal-title small {
  display: block;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meal-add {
  flex: 0 0 auto;
}

.meal-edit {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
}

/* Ajouter un repas (pré-training, post-training…) */
.meal-new {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: var(--radius);
}

.meal-new-btn {
  justify-self: start;
}

.meal-new-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meal-new-form.hidden {
  display: none;
}

.meal-new-form input {
  flex: 1 1 200px;
  min-width: 0;
}

.meal-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meal-suggest:empty {
  display: none;
}

.meal-suggest .chip {
  color: var(--text);
}

.segmented.meal-picker-wrap {
  display: flex;
  flex-wrap: wrap;
}

.segmented.meal-picker-wrap .segment {
  flex: 1 1 22%;
  min-width: 0;
}

.food-rows {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}

.food-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main kcal"
    "macros kcal";
  align-items: center;
  column-gap: 12px;
  width: 100%;
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  text-align: left;
  cursor: pointer;
}

.food-row:last-child {
  border-bottom: 0;
}

@media (hover: hover) {
  .food-row:hover {
    background: rgba(255, 255, 255, 0.03);
  }
}

.food-row-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.food-row-main strong,
.food-pick-main strong {
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.food-row-main small,
.food-pick-main small {
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.food-row-macros {
  grid-area: macros;
  color: var(--faint);
  font-size: 0.72rem;
}

.food-row-kcal,
.food-pick-kcal {
  grid-area: kcal;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}

.food-row-kcal strong {
  font-size: 1rem;
  font-weight: 800;
}

.food-row-kcal small,
.food-pick-kcal small {
  color: var(--faint);
  font-size: 0.7rem;
}

.copy-prev {
  margin-top: 10px;
  width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

/* Semaine */
.week-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  height: 150px;
  padding-top: 18px;
}

.week-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  padding: 0 0 20px;
  border: 0;
  background: none;
  cursor: pointer;
}

.week-fill {
  width: 100%;
  max-width: 34px;
  min-height: 3px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #5ee08e, #2f9e5a);
  opacity: 0.75;
}

.week-fill.over {
  background: linear-gradient(180deg, #ffd84d, #c99a00);
}

.week-bar.current .week-fill {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.week-val {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  white-space: nowrap;
}

.week-day {
  position: absolute;
  bottom: 0;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
}

.week-bar.current .week-day {
  color: var(--text);
}

.week-goal {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  margin-bottom: 20px;
  border-top: 1px dashed rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.week-goal span {
  position: absolute;
  right: 0;
  top: -16px;
  color: var(--faint);
  font-size: 0.62rem;
  font-weight: 700;
}

.diet-credit {
  text-align: center;
}

.diet-credit a {
  color: var(--muted);
}

/* Fenêtre d'ajout */
.food-sheet {
  max-width: 560px;
  height: min(760px, calc(100dvh - 40px));
}

.food-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.food-head-title h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.food-search-step {
  gap: 4px;
}

.food-search-bar {
  display: flex;
  gap: 8px;
}

.food-search-input {
  position: relative;
  flex: 1;
  min-width: 0;
}

.food-search-input > .i {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

.food-search-input input {
  padding-left: 40px;
}

.scan-btn {
  flex: 0 0 auto;
  min-height: 46px;
}

.food-results {
  display: flex;
  flex-direction: column;
}

.food-group {
  margin: 12px 0 4px;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.food-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 6px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}

@media (hover: hover) {
  .food-pick:hover {
    background: rgba(255, 255, 255, 0.04);
  }
}

.food-pick-thumb {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  color: var(--muted);
}

.food-pick-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.food-pick-thumb .i {
  width: 18px;
  height: 18px;
}

.food-pick-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.food-pick-kcal strong {
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}

.food-empty {
  margin: 18px 0 6px;
  text-align: center;
  font-size: 0.88rem;
}

.off-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  line-height: 1.4;
}

.off-status:empty {
  display: none;
}

.off-status .i {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* Étape quantité */
.food-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fd-img {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
}

.fd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fd-tags .chip {
  align-items: center;
}

.fd-tags .chip .i {
  width: 14px;
  height: 14px;
}

.fd-hint {
  display: flex;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--yellow);
  font-size: 0.82rem;
  line-height: 1.4;
}

.fd-hint .i {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.qty-row {
  display: flex;
  gap: 8px;
}

.qty-row input {
  flex: 1;
  min-width: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.qty-row select {
  flex: 0 0 86px;
  width: 86px;
}

.qty-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qty-quick .lib-filter {
  padding: 6px 11px;
  font-size: 0.78rem;
}

.meal-picker .segment {
  min-height: 38px;
  font-size: 0.82rem;
}

.per100 {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.per100 legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.per100-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.per100-grid .field {
  font-size: 0.72rem;
}

.per100-grid input {
  padding: 10px 8px;
  text-align: center;
}

.food-detail-step .check-row {
  margin-top: 0;
}

.fd-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--green-soft);
  border: 1px solid rgba(75, 211, 123, 0.25);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
}

.fd-total strong {
  color: var(--green);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
}

/* Toast avec bouton Annuler */
.toast-undo {
  align-items: center;
}

.toast-undo > span {
  flex: 1;
}

.toast-action {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

/* Scan */
.scan-view {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  aspect-ratio: 4 / 3;
}

.scan-view video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scan-frame {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 30%;
  bottom: 30%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
}

.scan-laser {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 2px;
  background: var(--red-hover);
  box-shadow: 0 0 10px var(--red);
  animation: scanLaser 1.6s ease-in-out infinite alternate;
}

@keyframes scanLaser {
  from {
    transform: translateY(-26px);
  }
  to {
    transform: translateY(26px);
  }
}

.scan-status {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

.scan-status.warn {
  color: var(--yellow);
}

.scan-view.no-camera {
  aspect-ratio: auto;
  min-height: 110px;
  background: var(--surface-2);
}

.scan-view.no-camera video,
.scan-view.no-camera .scan-frame {
  display: none;
}

.scan-view.no-camera .scan-status {
  position: static;
  margin: 14px;
  background: none;
}

.scan-alt .btn {
  width: 100%;
}

.scan-manual .field {
  gap: 8px;
}

@media (max-width: 720px) {
  .food-sheet {
    height: 92dvh;
  }
}

@media (max-width: 420px) {
  .kcal-block {
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 16px;
  }

  .kcal-ring-wrap {
    width: 124px;
    height: 124px;
  }

  .kcal-center strong {
    font-size: 1.9rem;
  }

  .meal-add span {
    display: none;
  }

  .meal-add {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
  }

  .per100-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scan-btn span {
    display: none;
  }

  .scan-btn {
    width: 46px;
    padding: 0;
    justify-content: center;
  }
}

/* Lien vers la page Diète depuis le profil */
.diet-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: var(--text);
  text-decoration: none;
}

.diet-link > .i:first-child {
  width: 22px;
  height: 22px;
  color: var(--red-hover);
}

.diet-link span {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.diet-link small {
  font-size: 0.8rem;
}

@media (hover: hover) {
  .diet-link:hover {
    border-color: var(--border-strong);
  }
}

.off-more {
  margin-top: 10px;
}

.fd-note {
  margin: 6px 0 0;
  font-size: 0.76rem;
}

.fd-unshare {
  margin-top: 8px;
}

/* Réglage : sonner par-dessus la musique */
.mix-music-row {
  margin-top: 6px;
  font-size: 0.84rem;
  text-align: left;
}

.mix-music-row small {
  display: block;
  font-size: 0.74rem;
}

/* Page Musique (vide pour l'instant) */
.music-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 20px;
  text-align: center;
}

.music-soon-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--red-soft);
  color: var(--red-hover);
}

.music-soon-icon .i {
  width: 30px;
  height: 30px;
}

.music-soon p {
  margin: 0;
}

/* Connexion avec Google */
.oauth-btn {
  gap: 10px;
}

/* Fichier officiel Google : le G est dans un rond sombre, on l'affiche un peu plus grand */
.oauth-logo {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  margin: -6px 0 -6px -8px;
  object-fit: contain;
}

/* Logo Google absent (fichier icons/google-g.svg pas encore ajouté) : icône neutre */
.oauth-btn .oauth-fallback,
.oauth-btn.no-logo .oauth-logo {
  display: none;
}

.oauth-btn.no-logo .oauth-fallback {
  display: inline-block;
}

.oauth-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.oauth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.oauth-sep::before,
.oauth-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}

.oauth-hint {
  margin: 0;
  text-align: center;
}

.oauth-hint a {
  color: var(--muted);
}

/* Téléphone : libellés courts (Histo., Exos, Lancer) pour que rien ne soit coupé */
@media (max-width: 440px) {
  .tabbar-7 .tab-label[data-short] {
    font-size: 0;
  }

  .tabbar-7 .tab-label[data-short]::after {
    content: attr(data-short);
    font-size: 0.58rem;
  }
}

/* =========================================================
   RANKED
   ========================================================= */
.rank-badge {
  --rank-a: #a1a1aa;
  --rank-b: #52525b;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rank-a), var(--rank-b));
  color: #111;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.rank-badge .i {
  width: 14px;
  height: 14px;
}

.rank-badge.rank-sm {
  padding: 2px 8px 2px 6px;
  font-size: 0.7rem;
}

.rank-badge.rank-lg {
  padding: 8px 18px 8px 14px;
  font-size: 1.2rem;
  gap: 8px;
}

.rank-badge.rank-lg .i {
  width: 22px;
  height: 22px;
}

.rank-none {
  --rank-a: #3f3f46;
  --rank-b: #27272a;
  color: var(--muted);
  box-shadow: none;
}

.rank-bronze { --rank-a: #e3a26b; --rank-b: #9c5b2e; }
.rank-argent { --rank-a: #eef1f5; --rank-b: #9aa3ad; }
.rank-or { --rank-a: #ffe27a; --rank-b: #d39b12; }
.rank-platine { --rank-a: #a7f3e7; --rank-b: #2aa595; }
.rank-diamant { --rank-a: #b9dcff; --rank-b: #3b7fe0; }
.rank-champion { --rank-a: #e5c2ff; --rank-b: #9b4fe0; }
.rank-legende {
  --rank-a: #ff8a5c;
  --rank-b: #e51212;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.rank-fill-bronze { background: #c47a3e; }
.rank-fill-argent { background: #c4cbd3; }
.rank-fill-or { background: #f2c230; }
.rank-fill-platine { background: #3fc9b6; }
.rank-fill-diamant { background: #5b9ef0; }
.rank-fill-champion { background: #b06cf0; }
.rank-fill-legende { background: var(--red); }

.ranked-notice {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ranked-notice:not(:has(.ranked-tip)) {
  flex-direction: row;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 204, 0, 0.3);
  background: var(--yellow-soft);
}

.ranked-tip {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 204, 0, 0.25);
  background: var(--yellow-soft);
}

.ranked-notice > .i,
.ranked-tip > .i {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--yellow);
}

.ranked-notice p,
.ranked-tip p {
  margin: 2px 0 0;
  font-size: 0.85rem;
}

.ranked-tip a {
  color: var(--text);
}

.ranked-hero {
  display: flex;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgb(var(--red-rgb) / 0.16), transparent 70%), var(--surface);
}

.ranked-hero-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ranked-hero-main p {
  margin: 0;
  font-size: 0.85rem;
}

.ranked-hero-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
}

.ranked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.ranked-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}

.ranked-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ranked-card-head h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
}

.ranked-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.86rem;
  color: var(--muted);
}

.ranked-figures b {
  color: var(--text);
  font-size: 1.05rem;
}

.ranked-from,
.ranked-empty {
  margin: 0;
  font-size: 0.76rem;
}

.ranked-next small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
}

.ranked-next-track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
}

.ranked-next-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.ranked-max {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--yellow);
  font-size: 0.82rem;
  font-weight: 700;
}

.ranked-max .i {
  width: 16px;
  height: 16px;
}

.ranked-optin {
  margin: 0 0 6px;
}

.ranked-optin small {
  display: block;
  font-size: 0.74rem;
}

.leader-list {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.leader-row {
  display: grid;
  grid-template-columns: 30px 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  border-radius: 10px;
}

@media (hover: hover) {
  .leader-row:hover {
    background: rgba(255, 255, 255, 0.03);
  }
}

.leader-row.me {
  background: var(--red-soft);
  border-bottom-color: transparent;
}

.leader-pos {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  color: var(--muted);
}

.leader-pos.top1 { color: #f2c230; }
.leader-pos.top2 { color: #c4cbd3; }
.leader-pos.top3 { color: #c47a3e; }

.leader-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-3);
  font-weight: 800;
}

.leader-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leader-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 0.9rem;
}

.leader-kg {
  font-weight: 800;
  font-size: 0.86rem;
  white-space: nowrap;
}

.leader-alone {
  margin: 10px 0 0;
}

.ranked-help p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.ranked-mini {
  display: flex;
  flex-direction: column;
}

.ranked-mini-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

.ranked-mini-row:last-child {
  border-bottom: 0;
}

@media (max-width: 420px) {
  .leader-row {
    grid-template-columns: 22px 30px minmax(0, 1fr) auto auto;
    gap: 7px;
  }

  .leader-kg {
    font-size: 0.78rem;
  }

  .leader-avatar {
    width: 30px;
    height: 30px;
  }
}

/* ---------- Ranked v2 : emblèmes, perfs, classement ---------- */
.rank-emblem {
  flex: 0 0 auto;
  display: block;
  overflow: visible;
}

.rank-text-fer { color: #b9b3aa; }
.rank-text-bronze { color: #e9a46b; }
.rank-text-argent { color: #e3e8ef; }
.rank-text-platine { color: #5fe0cf; }
.rank-text-diamant { color: #7fb6ff; }
.rank-text-emeraude { color: #43d686; }
.rank-text-ecarlate { color: #ff5a68; }
.rank-text-champion { color: #c48cff; }
.rank-text-superchampion { color: #ffcc33; }
.rank-text-legende {
  background: linear-gradient(90deg, #ffd34d, #ff5a2a, #e5121e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rank-fill-fer { background: #8a847b; }
.rank-fill-emeraude { background: #2ecc71; }
.rank-fill-ecarlate { background: #e5243b; }
.rank-fill-superchampion { background: #f5b301; }

.ranked-hero-main .rank-emblem {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

.ranked-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.ranked-actions .check-row {
  margin: 0;
  font-size: 0.86rem;
}

.ranked-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ranked-group .food-group {
  margin: 8px 0 8px;
}

.ranked-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.ranked-card-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.ranked-card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.ranked-card-head h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}

.ranked-card-rank {
  font-size: 0.8rem;
  font-weight: 800;
}

.ranked-figures {
  align-items: baseline;
}

.ranked-figures span {
  font-size: 0.74rem;
}

.ranked-edit {
  align-self: center;
}

.ranked-mini-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.ranked-mini-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-weight: 700;
}

.ranked-mini-name small {
  font-weight: 600;
  font-size: 0.74rem;
}

.ranked-public-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.ranked-public-hero div {
  display: flex;
  flex-direction: column;
}

.ranked-public-hero strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
}

/* Saisie du 1RM */
.pr-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.pr-preview div {
  display: flex;
  flex-direction: column;
}

.pr-preview strong {
  font-family: var(--font-display);
  font-size: 1.45rem;
  text-transform: uppercase;
  line-height: 1.1;
}

.pr-calc {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
}

.pr-calc summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.pr-calc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.pr-calc-x {
  padding-bottom: 12px;
  color: var(--muted);
  font-weight: 800;
}

.pr-calc-row .btn {
  min-height: 46px;
  white-space: nowrap;
}

/* Page Classement */
.board-main {
  gap: 16px;
}

.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.board-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

.board-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
}

.board-podium:empty {
  display: none;
}

.podium-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  min-width: 0;
}

.podium-card small {
  font-size: 0.72rem;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-1 {
  padding-top: 18px;
  border-color: rgba(242, 194, 48, 0.5);
  background: radial-gradient(circle at 50% 0%, rgba(242, 194, 48, 0.18), transparent 70%), var(--surface);
}

.podium-card.me {
  box-shadow: 0 0 0 2px var(--red);
}

.podium-pos {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--muted);
}

.podium-1 .podium-pos { color: #f2c230; }
.podium-2 .podium-pos { color: #c4cbd3; }
.podium-3 .podium-pos { color: #c47a3e; }

.podium-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-3);
  font-weight: 800;
}

.podium-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.podium-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
}

.board-list-panel {
  padding: 8px 10px;
}

.leader-row {
  grid-template-columns: 26px 34px minmax(0, 1fr) 30px auto;
}

.leader-name {
  display: flex;
  flex-direction: column;
}

.leader-rank {
  font-size: 0.72rem;
  font-weight: 800;
}

.board-empty {
  padding: 18px 8px;
  text-align: center;
}

.board-credit {
  text-align: center;
}

.icon-btn.is-active {
  border-color: var(--red);
  color: var(--red-hover);
}

@media (max-width: 420px) {
  .leader-row {
    grid-template-columns: 22px 30px minmax(0, 1fr) 28px auto;
  }

  .ranked-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .ranked-card .rank-emblem {
    width: 46px;
    height: 46px;
  }

  .ranked-edit {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .pr-calc-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .pr-calc-row .btn {
    grid-column: 1 / -1;
  }
}

/* Ranked : les 10 rangs, matériel, homme / femme */
.ranked-ladder-panel {
  padding: 14px 14px 10px;
}

.ranked-ladder-panel .section-head {
  flex-wrap: wrap;
  gap: 8px;
}

/* Les 10 rangs d'un coup d'œil : 2 lignes de 5 sur téléphone, 1 ligne sur ordinateur */
.rank-ladder {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px 2px;
  padding: 6px 0 4px;
}

@media (min-width: 760px) {
  .rank-ladder {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

.rank-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: 12px;
  text-align: center;
  min-width: 0;
}

.rank-step.current {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.rank-step-name {
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.15;
}

.rank-step small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  white-space: nowrap;
}

.rank-step .rank-emblem {
  width: 38px;
  height: 38px;
}

.ranked-sex {
  grid-template-columns: 1fr 1fr;
  min-width: 190px;
}

.ranked-sex .segment {
  min-height: 34px;
  font-size: 0.82rem;
}

.equip-chip {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  vertical-align: 2px;
  white-space: nowrap;
}

.equip-machine {
  border-color: rgba(96, 165, 250, 0.45);
  color: #93c5fd;
}

.equip-halteres {
  border-color: rgba(255, 204, 0, 0.35);
  color: #fcd34d;
}

.equip-corps {
  border-color: rgba(75, 211, 123, 0.4);
  color: #86efac;
}

.equip-poulie {
  border-color: rgba(192, 132, 252, 0.45);
  color: #d8b4fe;
}

.sex-chip {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 0.66rem;
  font-weight: 800;
  vertical-align: 1px;
}

.sex-h {
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}

.sex-f {
  background: rgba(244, 114, 182, 0.18);
  color: #f9a8d4;
}

.leader-name-line {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pr-ladder {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pr-ladder .rank-ladder {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ranked-public-hero .sex-chip {
  margin-right: 4px;
}

/* ---------- Types de série : échauffement / drop set ---------- */
button.log-set-num {
  position: relative;
  width: 100%;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

@media (hover: hover) {
  button.log-set-num:hover {
    border-color: var(--border-strong);
  }
}

.log-set-num small {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1;
}

.log-set.warmup .log-set-num:not([class*="tag-"]) {
  background: var(--yellow-soft);
  color: var(--yellow);
  border: 1px dashed rgba(255, 204, 0, 0.5);
}

.log-set.warmup .stepper,
.log-set.warmup .input-reps {
  border-style: dashed;
}

.log-set.warmup:not(.done) .input-weight,
.log-set.warmup:not(.done) .input-reps {
  color: var(--muted);
}

.log-set.drop .log-set-num:not([class*="tag-"]) {
  background: var(--red-soft);
  color: #ff6b6b;
  border: 1px solid rgb(var(--red-rgb) / 0.45);
}

.log-set.drop {
  position: relative;
}

/* Petit trait qui relie le drop set à la série d'avant */
.log-set.drop::before {
  content: "";
  position: absolute;
  left: 20px;
  top: -9px;
  width: 2px;
  height: 10px;
  background: rgb(var(--red-rgb) / 0.55);
}

.log-round.warmup {
  color: var(--yellow);
}

.log-round.drop {
  color: #ff6b6b;
}

.log-types-hint {
  margin: 0;
  font-size: 0.78rem;
}

/* ---------- Ranked : contrôle anti-troll ---------- */
.pr-limit {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.pr-limit.over {
  color: #ff6b6b;
  font-weight: 700;
}

.pr-review .i {
  color: var(--yellow);
}

.ranked-pending {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 2px 0 6px;
  color: var(--yellow);
  font-size: 0.8rem;
  font-weight: 600;
}

.ranked-pending .i {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

.ranked-card.is-pending {
  border-style: dashed;
  border-color: rgba(255, 204, 0, 0.45);
}

.pending-chip {
  color: var(--yellow);
}

.leader-row.pending {
  opacity: 0.75;
}

/* Admin : bouton « retirer » à droite de chaque ligne du classement */
.leader-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.leader-wrap .leader-row {
  flex: 1;
  min-width: 0;
}

.leader-remove {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: #ff6b6b;
}

.pending-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pending-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pending-main h3 {
  margin: 0 0 2px;
  font-size: 1rem;
}

.pending-main p {
  margin: 0 0 2px;
}

.ranked-admin-hint {
  flex: 1;
  margin: 0;
  font-size: 0.85rem;
}

/* Admin : 4 onglets lisibles sur téléphone */
@media (max-width: 520px) {
  #adminTabs .segment {
    padding: 0 3px;
    font-size: 0.8rem;
  }

  #adminTabs .count-pill {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 2px;
    font-size: 0.65rem;
  }
}

/* Marque de machine : liste + « Autre » à écrire */
.brand-other {
  margin-top: 6px;
}

.lib-brands {
  display: block;
  overflow: visible;
}

.lib-brand-pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.exo-info-media {
  position: relative;
}

.exo-media-note {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(11, 11, 13, 0.72);
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

/* ---------- Carte des muscles ---------- */
.muscle-map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}

.muscle-map.small {
  max-width: 230px;
}

.mm-view {
  margin: 0;
  text-align: center;
}

.mm-view svg {
  display: block;
  width: 100%;
  height: auto;
}

.mm-view figcaption {
  margin-top: 4px;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mm-body {
  fill: #1b1a1f;
  stroke: #3a3940;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.mz {
  fill: #2e2d34;
  stroke: #141317;
  stroke-width: 1.2;
  stroke-linejoin: round;
  transition: fill 0.25s ease;
}

.mz.on {
  fill: rgb(var(--red-rgb) / var(--mv, 1));
}

.mm-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.75rem;
}

.mm-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mm-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: rgb(var(--red-rgb) / var(--mv, 1));
}

/* Séance : muscles travaillés (repliable) */
.muscle-box {
  /* même retrait que le reste de la carte (titre, progression, exercices) */
  margin: 4px 18px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
}

.muscle-box > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 0.9rem;
}

.muscle-box > summary::-webkit-details-marker {
  display: none;
}

.muscle-box > summary .i {
  color: var(--red);
  flex: 0 0 auto;
}

.muscle-box > summary small {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.muscle-box > summary .chevron {
  margin-left: auto;
}

.muscle-box > div {
  padding: 0 12px 14px;
}

/* Historique : muscles de la semaine / du mois */
.muscle-week {
  margin-bottom: 14px;
}

.muscle-week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.muscle-week-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
}

.muscle-week-head h3 .i {
  color: var(--red);
}

.muscle-week-list {
  margin-top: 14px;
}

.mw-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mw-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
}

.mw-row b {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.mw-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
}

.mw-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--red);
}

.mw-missing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.mw-missing .i {
  color: var(--yellow);
}

.mw-missing.ok .i {
  color: var(--green);
}

.mw-missing .chip {
  font-size: 0.75rem;
}

/* ---------- Programmes tout faits ---------- */
.program-levels {
  padding-top: 0;
}

.program-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.program-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.program-card.enhanced {
  border-color: rgb(var(--red-rgb) / 0.35);
}

.program-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.program-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.program-by {
  margin: 2px 0 0;
  color: var(--red);
  font-size: 0.82rem;
  font-weight: 700;
}

.program-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.program-tags .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
}

.program-tags .chip .i {
  width: 13px;
  height: 13px;
}

.program-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.program-details > summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  font-size: 0.86rem;
  padding: 4px 0;
}

.program-details .muscle-map {
  margin: 10px auto;
}

.program-sessions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.program-session {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
}

.program-session h4 {
  margin: 0 0 6px;
  font-size: 0.92rem;
}

.program-session ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.program-session li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
}

.program-session li span {
  min-width: 0;
}

.program-session li b {
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 700;
  text-align: right;
}

.empty-state .link-btn {
  display: inline;
  padding: 0;
  font: inherit;
  color: var(--red);
  text-decoration: underline;
}

/* =========================================================
   SOCIAL : messages, amis, statut, coaching
   ========================================================= */

/* Avatar + point de présence */
.s-avatar {
  --s: 40px;
  position: relative;
  flex: 0 0 auto;
  width: var(--s);
  height: var(--s);
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-weight: 800;
  font-size: calc(var(--s) * 0.42);
}

.s-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.s-avatar .s-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: max(10px, calc(var(--s) * 0.28));
  height: max(10px, calc(var(--s) * 0.28));
  border: 2px solid var(--surface-solid);
}

.s-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--faint);
}

.s-dot.on {
  background: var(--green);
}

.s-dot.busy {
  background: var(--red);
}

.s-dot.away {
  background: var(--yellow);
}

.s-dot.off {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--faint);
}

.s-avatar .s-dot.off {
  background: var(--surface-solid);
}

/* Pastille sur l'icône Messages */
.icon-btn.has-badge {
  position: relative;
}

.msg-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  border: 2px solid var(--bg);
  pointer-events: none;
}

/* Page */
.chat-main {
  max-width: 1120px;
  gap: 14px;
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 60%;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.status-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) {
  .status-chip:hover {
    border-color: var(--muted);
  }
}

.chat-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.chat-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  min-width: 0;
}

.chat-tab {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.seg-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.chat-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
}

.chat-search .i {
  width: 18px;
  height: 18px;
  color: var(--faint);
}

.chat-search input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  outline: none;
}

.chat-search:focus-within {
  border-color: var(--border-strong);
}

/* Listes de membres */
.people-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#chatSearchResults,
#friendSearchResults {
  padding: 6px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.people-title {
  margin: 10px 4px 2px;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.person-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}

button.person-row {
  cursor: pointer;
}

@media (hover: hover) {
  button.person-row:hover,
  .person-row:hover {
    background: rgba(255, 255, 255, 0.04);
  }
}

.person-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.person-name strong {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-name > .badge-row,
.person-name strong + span {
  margin-top: 2px;
}

.person-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.person-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* Liste des discussions */
.conv-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  min-height: 0;
}

.conv-list .empty-state {
  margin: 4px;
}

.conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .conv-item:hover {
    background: rgba(255, 255, 255, 0.04);
  }
}

.conv-item.active {
  background: var(--surface-3);
}

.conv-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.conv-top,
.conv-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.conv-top strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-top .badge {
  flex: 0 0 auto;
}

.conv-top small {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 0.74rem;
}

.conv-preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.86rem;
}

.conv-item.unread .conv-preview {
  color: var(--text);
  font-weight: 600;
}

.conv-item.unread .conv-top small {
  color: var(--red-hover);
  font-weight: 700;
}

.conv-unread {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.72rem;
}

.conv-seen {
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 0.72rem;
}

/* Conversation */
.chat-view {
  display: none;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.chat-empty {
  height: 100%;
  min-height: 280px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 30px;
  color: var(--muted);
  text-align: center;
}

.chat-empty .i {
  width: 44px;
  height: 44px;
  color: var(--faint);
}

.chat-conv {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-conv.hidden {
  display: none;
}

.chat-conv-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
}

.chat-back {
  display: none;
}

.chat-peer {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.chat-peer > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chat-peer strong {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chat-peer small {
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chat-menu {
  position: absolute;
  top: calc(100% - 4px);
  right: 10px;
  z-index: 5;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.chat-menu.hidden {
  display: none;
}

.chat-menu a,
.chat-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  .chat-menu a:hover,
  .chat-menu button:hover {
    background: var(--surface-3);
  }
}

.chat-menu .danger {
  color: var(--danger-hover);
}

.chat-menu .i {
  width: 18px;
  height: 18px;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 14px 8px;
}

.chat-messages > :first-child {
  margin-top: auto;
}

.chat-loading,
.chat-start {
  margin: auto;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}

.chat-more {
  align-self: center;
  margin-bottom: 8px;
}

.chat-day {
  display: flex;
  justify-content: center;
  margin: 12px 0 8px;
}

.chat-day span {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.chat-day span::first-letter {
  text-transform: uppercase;
}

.bubble-row {
  display: flex;
  margin-bottom: 6px;
}

.bubble-row.grouped {
  margin-bottom: 0;
}

.bubble-row.mine {
  justify-content: flex-end;
}

.bubble {
  max-width: min(78%, 520px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px 10px;
  padding: 8px 12px;
  border-radius: 18px 18px 18px 6px;
  background: var(--surface-3);
  color: var(--text);
}

.bubble-row.grouped .bubble {
  border-bottom-left-radius: 18px;
}

.bubble-row.mine .bubble {
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(160deg, #ff2a2a, #c20d0d);
  color: #fff;
}

.bubble-row.mine.grouped .bubble {
  border-bottom-right-radius: 18px;
}

.bubble p {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.bubble small {
  margin-left: auto;
  font-size: 0.66rem;
  opacity: 0.65;
}

.bubble-row.pending .bubble {
  opacity: 0.6;
}

.bubble-status {
  align-self: flex-end;
  margin: 2px 4px 4px;
  color: var(--faint);
  font-size: 0.72rem;
}

.chat-typing {
  padding: 0 16px 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}

.chat-typing.hidden {
  display: none;
}

.chat-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
}

.chat-compose.hidden {
  display: none;
}

.chat-compose textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 140px;
  padding: 11px 14px;
  border-radius: 22px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* iPhone : pas de zoom quand on écrit */
  line-height: 1.4;
  resize: none;
  outline: none;
}

.chat-compose textarea:focus {
  border-color: var(--muted);
}

.chat-send {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
}

.chat-send .i {
  width: 20px;
  height: 20px;
}

.chat-blocked {
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
}

/* Fenêtre « Mon statut » */
.status-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-choices button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.status-choices button.active {
  border-color: var(--red);
  background: var(--red-soft);
}

.status-choices span {
  display: flex;
  flex-direction: column;
}

.status-choices small {
  color: var(--muted);
  font-size: 0.78rem;
}

.status-sub {
  margin-top: 6px;
  font-size: 0.95rem;
}

/* Téléphone : la conversation s'ouvre en plein écran */
@media (max-width: 899px) {
  .chat-layout.in-conv .chat-view {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 160;
    border: 0;
    border-radius: 0;
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: var(--safe-bottom);
  }

  .chat-layout.in-conv .chat-back {
    display: inline-grid;
  }

  body.chat-open .tabbar {
    display: none;
  }

  body.chat-open {
    overflow: hidden;
  }

  .chat-side {
    padding: 10px;
  }
}

/* Ordinateur : deux colonnes */
@media (min-width: 900px) {
  .chat-layout {
    grid-template-columns: 340px minmax(0, 1fr);
    height: calc(100dvh - 230px);
    min-height: 500px;
  }

  .chat-side {
    min-height: 0;
    overflow: hidden;
  }

  .chat-tab:not(.hidden) {
    flex: 1;
    overflow-y: auto;
  }

  .chat-view {
    display: block;
  }

  .chat-main {
    padding-bottom: 24px;
  }
}

/* Page coaching */
.coach-main {
  gap: 22px;
}

.coach-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coach-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.coach-card.pending {
  padding: 12px 14px;
  border-style: dashed;
}

.coach-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.coach-card-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.coach-card-name strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.02rem;
}

.coach-card-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  /* jusqu'à 2 lignes : l'état de la demande reste lisible sur téléphone */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.coach-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.coach-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--muted);
  font-size: 0.85rem;
}

.coach-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.coach-stats .i {
  width: 16px;
  height: 16px;
}

.danger-text {
  color: var(--danger-hover) !important;
}

.coach-hint {
  margin-top: 10px;
}

.coach-hint a {
  color: var(--text);
  font-weight: 700;
}

.coach-invite {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

.coach-invite-row {
  display: flex;
  gap: 8px;
}

.coach-invite-row input {
  flex: 1;
  min-width: 0;
}

button.back-link {
  align-self: flex-start;
  gap: 6px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}

button.back-link .i {
  width: 18px;
  height: 18px;
}

.client-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.client-tab {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coach-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.coach-kpis .panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
}

.coach-kpis strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.1;
}

.coach-kpis strong.up {
  color: var(--yellow);
}

.coach-kpis strong.down {
  color: var(--green);
}

.coach-kpis span {
  color: var(--muted);
  font-size: 0.8rem;
}

.coach-block {
  padding: 14px 16px;
}

.coach-block h3 {
  margin-bottom: 10px;
  font-size: 0.98rem;
}

.coach-top,
.coach-logs,
.coach-diet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.coach-top li,
.coach-logs li,
.coach-diet li {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.coach-top li:first-child,
.coach-logs li:first-child,
.coach-diet li:first-child {
  border-top: 0;
  padding-top: 0;
}

.coach-top li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
}

.coach-top li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-logs li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.coach-logs li span {
  font-weight: 600;
}

.coach-logs li small {
  color: var(--muted);
  font-size: 0.8rem;
}

.coach-diet li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coach-diet-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
}

.coach-diet .macro-line-track span {
  background: var(--green);
}

.coach-diet .macro-line-track span.over {
  background: var(--red);
}

.coach-spark {
  display: block;
  width: 100%;
  height: 90px;
  margin-bottom: 10px;
}

/* Mode coach sur la page des séances */
.coach-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgb(var(--red-rgb) / 0.45);
  background: var(--red-soft);
}

.coach-banner > div {
  flex: 1;
  min-width: 0;
}

.coach-banner strong {
  display: block;
}

.coach-banner small {
  color: var(--muted);
}

.coach-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red-hover);
  font-size: 0.7rem;
  font-weight: 700;
}

body.coach-mode .coach-hide {
  display: none !important;
}

.coach-banner > .i {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--red-hover);
}

#viewSeances > .coach-banner {
  margin-bottom: 18px;
}

/* Profil : statut, amis */
.profile-presence {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.84rem;
}

.profile-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
}

.profile-social:last-child {
  margin: 14px 0 0;
}

.friend-extras {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.friend-locked {
  display: flex;
  align-items: center;
  gap: 8px;
}

.friend-locked .i {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

body.coach-mode .exo-actions,
body.coach-mode .exo-check,
body.coach-mode .hyrox-start {
  display: none !important;
}

#coachHome {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#coachHome.is-coach #clientsSection {
  order: -1;
}

#invitesSection {
  order: -2;
}

.coach-invite-row input {
  font-weight: 500;
  font-size: 0.95rem;
}

#socialTabs {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.2fr);
}

#socialTabs .segment {
  padding: 0 6px;
}

/* En-tête téléphone : logo centré en haut, icônes centrées en dessous */
@media (max-width: 720px) {
  .app-header-inner:has(> .brand) {
    justify-content: center;
    gap: 10px 6px;
  }

  .app-header-inner:has(> .brand) > .brand {
    flex: 1 0 100%;
    justify-content: center;
    font-size: 1.35rem;
  }

  .app-header-inner:has(> .brand) > .header-actions {
    flex: 1 0 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 0;
  }
}

/* Admin : 5 ou 6 onglets (défilent sur téléphone) */
.segmented.tabs-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.segmented.tabs-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 640px) {
  #adminTabs.tabs-5,
  #adminTabs.tabs-6 {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #adminTabs.tabs-5::-webkit-scrollbar,
  #adminTabs.tabs-6::-webkit-scrollbar {
    display: none;
  }

  #adminTabs.tabs-5 .segment,
  #adminTabs.tabs-6 .segment {
    flex: 0 0 auto;
    padding: 0 12px;
    overflow: visible;
  }
}

/* Admin : coaching */
.coach-admin-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.coach-pair {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.coach-pair > span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.coach-pair > .i {
  width: 18px;
  height: 18px;
  color: var(--faint);
}

.admin-coach-pick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 12px 0;
}

.admin-coach-pick .share-results {
  min-height: 0;
  max-height: 260px;
  overflow-y: auto;
}

.admin-coach-pick .share-hint {
  padding: 8px;
}

@media (min-width: 760px) {
  .admin-coach-pick {
    grid-template-columns: 1fr 1fr;
  }
}

/* Admin : double authentification */
body.mfa-locked .app-main > :not(#mfaGate) {
  display: none !important;
}

.mfa-gate {
  max-width: 460px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.mfa-icon {
  width: 44px;
  height: 44px;
  color: var(--red-hover);
}

.mfa-enroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.mfa-enroll img {
  width: 200px;
  height: 200px;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
}

.mfa-enroll code {
  word-break: break-all;
  color: var(--text);
}

.mfa-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 300px;
}

.mfa-form input {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.3em;
}

/* Captcha et accord des conditions */
.captcha-box {
  display: flex;
  justify-content: center;
  min-height: 65px;
}

.terms-row {
  align-items: flex-start;
  line-height: 1.45;
}

.terms-row a {
  color: var(--text);
  font-weight: 700;
}

.terms-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Coaching : accord du coaché */
.coach-accord {
  border-color: rgb(var(--red-rgb) / 0.45);
}

.accord-text {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
}

.accord-text h3 {
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.accord-text ul {
  margin: 6px 0;
  padding-left: 20px;
}

.coach-accord .check-row {
  margin-top: 0;
  align-items: flex-start;
}

.coach-health {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.86rem;
}

.coach-health > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.coach-health .i,
.coach-stats .i {
  flex: 0 0 auto;
}

.empty-state > .i {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
}

/* Accord « données de santé » */
.health-gate {
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 204, 0, 0.4);
  background: var(--yellow-soft);
}

.health-gate-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

.health-gate-inner > .i {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--yellow);
}

.health-gate-inner > div {
  flex: 1 1 220px;
  min-width: 0;
}

.consent-box {
  margin-top: 14px;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 6px;
}

.legal-links {
  text-align: center;
}

.legal-links a {
  color: var(--text);
}

.check-row input {
  flex: 0 0 auto;
}

/* Séances reçues : un peu plus d'air sous la séance */
.shared-section {
  margin-top: 14px;
}

/* Bouton « Démarrer la séance » (ordinateur) : jamais coupé */
.desk-start {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-left: 16px;
  padding-right: 16px;
}

.desk-nav-inner {
  gap: 14px;
}

.desk-tabs {
  min-width: 0;
}

/* Mensurations */
.measure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.measure-grid input {
  text-align: center;
}

.measure-foot {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.measure-foot .field {
  flex: 1;
}

.measure-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.measure-table th {
  padding: 6px 4px;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.measure-table td {
  padding: 8px 4px;
  border-top: 1px solid var(--border);
}

.measure-caption select {
  width: auto;
  min-height: 34px;
  padding: 4px 10px;
  font-size: 0.85rem;
}

@media (max-width: 420px) {
  .measure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .measure-table th:last-child,
  .measure-table td:last-child {
    display: none;
  }
}

/* Note du coach */
.exo-coach-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 2px 0 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgb(var(--red-rgb) / 0.35);
  background: var(--red-soft);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.4;
}

.exo-coach-note.hidden {
  display: none;
}

.exo-coach-note .i {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--red-hover);
}

#logCoachNote {
  margin-top: 8px;
}

.input-coach-note {
  display: none;
  border-color: rgb(var(--red-rgb) / 0.45) !important;
}

body.coach-mode .input-coach-note {
  display: block;
}

.exo-edit .input-coach-note {
  margin-top: 8px;
  width: 100%;
}

/* =========================================================
   RADIO (onglet Musique de la page Séances)
   ========================================================= */
/* Hors de l'onglet, le lecteur reste chargé mais invisible (la musique continue) */
.radio-player.parked {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.radio-player:not(.parked) {
  margin-bottom: -14px;
}

.radio-intro {
  margin: -4px 0 14px;
}

.radio-player.is-empty .radio-deck {
  display: none;
}

.radio-deck {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.radio-now {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.radio-art,
.radio-mini-art {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--surface-3);
}

.radio-art-empty {
  display: grid;
  place-items: center;
  color: var(--accent, var(--red));
  background: color-mix(in srgb, var(--accent, var(--red)) 16%, transparent);
}

.radio-art-empty .i {
  width: 26px;
  height: 26px;
}

.radio-now-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.radio-now-text small {
  color: var(--red-hover);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.radio-now-text b,
.radio-now-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radio-now-text b {
  font-size: 1.05rem;
}

.radio-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.radio-play {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgb(var(--red-rgb) / 0.35);
}

@media (hover: hover) {
  .radio-play:hover {
    background: var(--red-hover);
  }
}

.radio-play .i {
  width: 26px;
  height: 26px;
}

.radio-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  width: 100%;
  justify-self: center;
}

.radio-volume input[type="range"] {
  --fill: 80%;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  outline-offset: 6px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right, var(--red) var(--fill), var(--surface-3) var(--fill)) !important;
  cursor: pointer;
}

.radio-volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--red);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.radio-volume input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--red);
}

.radio-vol-value {
  min-width: 44px;
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.radio-vol-ios {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
}

.radio-vol-ios .i {
  width: 16px;
  height: 16px;
}

.radio-hint {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--yellow-soft);
  color: var(--yellow);
  font-size: 0.86rem;
}

.radio-frame iframe {
  display: block;
  width: 100%;
  height: 166px;
  border: 0;
  border-radius: 12px;
  background: #fff;
}

.radio-player.parked .radio-frame iframe {
  width: 300px;
}

.radio-open {
  justify-self: start;
}

.radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.radio-card {
  --accent: var(--red);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}

@media (hover: hover) {
  .radio-card:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  }
}

.radio-card:active {
  transform: scale(0.985);
}

.radio-card.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.radio-card.soon {
  cursor: default;
  opacity: 0.6;
}

.radio-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.radio-card-icon .i {
  width: 22px;
  height: 22px;
}

.radio-card-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.radio-card-text b {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
}

.radio-card-text small {
  color: var(--muted);
  font-size: 0.82rem;
}

.radio-card-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.radio-card-state .i {
  width: 18px;
  height: 18px;
}

.radio-card.on .radio-card-state {
  color: var(--accent);
}

.radio-notes {
  margin-top: 14px;
}

.radio-privacy {
  margin: 10px 0 0;
}

/* --- Radio : lecteur et ambiances (e23) --- */
.radio-deck {
  --accent: var(--red);
  position: relative;
  overflow: hidden;
  gap: 14px;
  padding: 18px 16px 16px;
  background:
    radial-gradient(130% 90% at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%),
    radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--surface);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.radio-player {
  --accent: var(--red);
}

.radio-player .radio-deck {
  --accent: inherit;
}

.radio-art,
.radio-player .radio-art {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 35%, transparent);
}

.radio-player.is-playing .radio-art {
  animation: radio-breathe 3.2s ease-in-out infinite;
}

@keyframes radio-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

.radio-now-text small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
}

.radio-now-text b {
  font-size: 1.15rem;
}

.radio-play {
  width: 64px;
  height: 64px;
  background: var(--accent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: transform 0.15s ease;
}

@media (hover: hover) {
  .radio-play:hover {
    background: var(--accent);
    filter: brightness(1.1);
  }
}

.radio-play:active {
  transform: scale(0.94);
}

.radio-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.radio-progress.hidden {
  display: none;
}

.radio-progress-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  cursor: pointer;
  touch-action: manipulation;
}

.radio-progress-track::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}

#radioProgressFill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.9s linear;
}

.radio-volume input[type="range"] {
  background: linear-gradient(to right, var(--accent) var(--fill), var(--surface-3) var(--fill)) !important;
}

.radio-volume input[type="range"]::-webkit-slider-thumb {
  background: var(--accent);
}

.radio-frame-label {
  margin: 2px 0 -6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.radio-frame iframe {
  height: 120px;
}

/* Égaliseur animé */
.radio-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 14px;
  height: 12px;
}

.radio-eq i {
  flex: 1;
  height: 100%;
  border-radius: 1px;
  background: currentColor;
  transform-origin: bottom;
  animation: radio-eq 0.9s ease-in-out infinite;
}

.radio-eq i:nth-child(2) {
  animation-delay: -0.3s;
}

.radio-eq i:nth-child(3) {
  animation-delay: -0.6s;
}

.radio-eq i:nth-child(4) {
  animation-delay: -0.15s;
}

@keyframes radio-eq {
  0%,
  100% {
    transform: scaleY(0.25);
  }
  50% {
    transform: scaleY(1);
  }
}

/* Ambiances : tuiles façon pochette */
.radio-grid-title {
  margin: 4px 0 10px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.radio-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.radio-card {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-height: 0;
  padding: 10px 10px 12px;
  overflow: hidden;
}

.radio-card-cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--accent) 85%, #fff 0%), transparent 70%),
    linear-gradient(140deg, color-mix(in srgb, var(--accent) 70%, #000), color-mix(in srgb, var(--accent) 25%, #050505));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.radio-card-cover .radio-card-icon {
  position: relative;
  z-index: 1;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.radio-card-glyph {
  position: absolute;
  right: -14px;
  bottom: -18px;
  color: rgba(255, 255, 255, 0.16);
}

.radio-card-glyph .i {
  width: 96px;
  height: 96px;
}

.radio-card-text b {
  font-size: 1.1rem;
}

.radio-card-text small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.78rem;
}

.radio-card-state {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text);
}

.radio-card-state .i {
  width: 14px;
  height: 14px;
}

.radio-card.on .radio-card-state {
  background: var(--accent);
  color: #fff;
}

.radio-card.playing .radio-card-cover {
  animation: radio-glow 2.4s ease-in-out infinite;
}

@keyframes radio-glow {
  0%,
  100% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 26px 0 color-mix(in srgb, var(--accent) 45%, transparent);
  }
}

.radio-card.soon .radio-card-state {
  background: var(--surface-3);
  color: var(--muted);
}

@media (max-width: 420px) {
  .radio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .radio-card-text b {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radio-eq i,
  .radio-player.is-playing .radio-art,
  .radio-card.playing .radio-card-cover {
    animation: none;
  }
}

/* Mini-lecteur : au-dessus de la barre d'onglets (téléphone), en bas à droite (ordinateur) */
.radio-mini {
  position: fixed;
  z-index: 125;
  left: 50%;
  bottom: calc(84px + var(--safe-bottom));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 16px));
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: rgba(20, 19, 22, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.radio-mini-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.radio-mini .radio-mini-art {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.radio-mini-art-wrap {
  display: contents;
}

.radio-mini-text {
  display: grid;
  min-width: 0;
}

.radio-mini-text b,
.radio-mini-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radio-mini-text b {
  font-size: 0.92rem;
}

.radio-mini-text small {
  color: var(--muted);
  font-size: 0.76rem;
}

body.radio-mini-on .app-main {
  padding-bottom: calc(190px + var(--safe-bottom));
}

body.radio-mini-on .mini-timer {
  bottom: calc(150px + var(--safe-bottom));
}

@media (min-width: 900px) {
  .radio-mini {
    left: auto;
    right: 18px;
    bottom: 18px;
    transform: none;
    width: 340px;
  }

  body.radio-mini-on .app-main {
    padding-bottom: 96px;
  }

  body.radio-mini-on .mini-timer {
    bottom: 18px;
  }
}

/* Admin : radio */
.radio-admin-card {
  --accent: var(--red);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.radio-admin-card.off {
  opacity: 0.6;
}

.radio-admin-main {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 180px;
}

.radio-admin-main a {
  color: var(--muted);
  font-size: 0.8rem;
  word-break: break-all;
}

.radio-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radio-pick button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
}

.radio-pick button[aria-checked="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red) inset;
}

.radio-pick .swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
}

.radio-form {
  display: grid;
  gap: 14px;
}

/* =========================================================
   Téléphone : jamais de zoom automatique quand on touche une case
   (l'iPhone zoome si le texte fait moins de 16 px) ni de zoom
   par double appui dans le chat
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }
}

.chat-compose,
.chat-messages,
.chat-panel {
  touch-action: manipulation;
}

/* Exercice remplacé aujourd'hui (imprévu) */
.exo-swap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--yellow-soft);
  color: var(--yellow);
  font-size: 0.84rem;
}

.exo-swap b {
  color: var(--text);
}

.exo-swap .i {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.log-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.log-swap-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--faint);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

@media (hover: hover) {
  .log-swap-btn:hover {
    color: var(--text);
  }
}

.log-swap-btn .i {
  width: 15px;
  height: 15px;
}

.log-swap,
.log-swap-on {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--yellow) 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--yellow) 7%, var(--surface-2));
}

.log-swap {
  display: grid;
  gap: 10px;
}

.log-swap-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 800;
}

.log-swap-title .i {
  width: 16px;
  height: 16px;
  color: var(--yellow);
}

.log-swap-reasons,
.log-swap-alts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.log-swap-reasons .chip,
.log-swap-alts .chip {
  color: var(--text);
}

.log-swap-reasons .chip.on {
  border-color: var(--yellow);
  background: var(--yellow-soft);
  color: var(--yellow);
}

.log-swap .slot-name {
  position: relative;
}

.log-swap .slot-lib {
  margin: -4px 0 0;
}

.log-swap-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.log-swap-on {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
}

.log-swap-on .i {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--yellow);
}

.log-swap-on span {
  flex: 1;
  min-width: 0;
}

.log-swap-undo {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--yellow);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.timer-sheet .sheet-foot .btn {
  padding-inline: 8px;
  font-size: 0.88rem;
}

/* Téléphone : « Recommencer » et « Remettre à 0 » côte à côte, « Démarrer / Pause » en grand dessous */
@media (max-width: 520px) {
  .timer-sheet .sheet-foot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timer-sheet .sheet-foot .btn.primary {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   Transitions de page (surtout sur téléphone)
   - entre les onglets de la page Séances : glissé + fondu
   - d'une page à l'autre (Diète, Profil…) : fondu enchaîné natif
     du navigateur, la barre d'onglets et l'en-tête restent en place
   ========================================================= */
@keyframes view-in-fwd {
  from {
    opacity: 0;
    transform: translate3d(22px, 0, 0);
  }
}

@keyframes view-in-back {
  from {
    opacity: 0;
    transform: translate3d(-22px, 0, 0);
  }
}

.view-enter-fwd {
  animation: view-in-fwd 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.view-enter-back {
  animation: view-in-back 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

/* Onglet touché : petit rebond de l'icône */
@keyframes tab-pop {
  0% {
    transform: scale(0.82);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

.tabbar .tab-item.active svg {
  animation: tab-pop 0.32s ease-out;
}

/* Cartes qui apparaissent en cascade à l'ouverture d'un onglet */
@keyframes card-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}

.view-enter-fwd .radio-card,
.view-enter-back .radio-card,
.view-enter-fwd .lib-row,
.view-enter-back .lib-row {
  animation: card-rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.view-enter-fwd .radio-card:nth-child(2),
.view-enter-back .radio-card:nth-child(2),
.view-enter-fwd .lib-row:nth-child(2),
.view-enter-back .lib-row:nth-child(2) {
  animation-delay: 0.04s;
}

.view-enter-fwd .radio-card:nth-child(3),
.view-enter-back .radio-card:nth-child(3),
.view-enter-fwd .lib-row:nth-child(3),
.view-enter-back .lib-row:nth-child(3) {
  animation-delay: 0.08s;
}

.view-enter-fwd .radio-card:nth-child(n + 4),
.view-enter-back .radio-card:nth-child(n + 4),
.view-enter-fwd .lib-row:nth-child(n + 4),
.view-enter-back .lib-row:nth-child(n + 4) {
  animation-delay: 0.12s;
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .tabbar {
    view-transition-name: fr-tabbar;
  }

  .app-header {
    view-transition-name: fr-header;
  }

  ::view-transition-old(root) {
    animation: fr-page-out 0.18s ease-in both;
  }

  ::view-transition-new(root) {
    animation: fr-page-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  ::view-transition-group(fr-tabbar),
  ::view-transition-group(fr-header) {
    animation-duration: 0s;
  }
}

@keyframes fr-page-out {
  to {
    opacity: 0;
    transform: translate3d(0, -6px, 0) scale(0.99);
  }
}

@keyframes fr-page-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-enter-fwd,
  .view-enter-back,
  .view-enter-fwd *,
  .view-enter-back *,
  .tabbar .tab-item.active svg {
    animation: none !important;
  }
}

/* e25 : image choisie pour un thème de la radio */
.radio-card-cover.has-img {
  background: color-mix(in srgb, var(--accent) 30%, #050505);
}

.radio-card-cover.has-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.radio-card-cover.has-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

@media (hover: hover) {
  .radio-card:not(.soon):hover .radio-card-cover.has-img img {
    transform: scale(1.04);
  }
}

.radio-admin-thumb {
  flex: none;
  width: 72px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-3);
}

.radio-img-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.radio-img-preview {
  --accent: var(--red);
  display: grid;
  place-items: center;
  flex: none;
  width: 160px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 70%, #000), color-mix(in srgb, var(--accent) 25%, #050505));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.radio-img-preview .i {
  width: 30px;
  height: 30px;
}

.radio-img-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.radio-img-actions {
  display: grid;
  gap: 8px;
  justify-items: start;
}

@media (prefers-reduced-motion: reduce) {
  .radio-card-cover.has-img img {
    transition: none;
  }
}

/* e26 : recadrer une image avant l'envoi */
.crop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.18s ease;
}

body.crop-open {
  overflow: hidden;
}

.crop-sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 32px);
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  overflow: auto;
}

.crop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.crop-head b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.crop-stage {
  position: relative;
  height: min(58vh, 440px);
  min-height: 220px;
  overflow: hidden;
  border-radius: 14px;
  background: #050505;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.crop-stage:active {
  cursor: grabbing;
}

.crop-stage:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.22);
  outline-offset: 2px;
}

.crop-img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
}

.crop-frame {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  outline: 2px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.crop-frame.round {
  border-radius: 50%;
}

/* repères des tiers */
.crop-frame i {
  position: absolute;
  inset: 0 33.333%;
  border: solid rgba(255, 255, 255, 0.28);
  border-width: 0 1px;
}

.crop-frame i + i {
  inset: 33.333% 0;
  border-width: 1px 0;
}

.crop-frame.round i {
  display: none;
}

.crop-ratios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.crop-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crop-zoom {
  flex: 1;
  min-width: 0;
  accent-color: var(--red);
}

.crop-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.crop-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 520px) {
  .crop-backdrop {
    padding: 0;
  }

  .crop-sheet {
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: 0;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }

  .crop-stage {
    flex: 1;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crop-backdrop {
    animation: none;
  }
}

/* e27 : logos officiels FNR */
.brand-logo {
  display: block;
  width: auto;
  height: 30px;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 8px rgb(var(--red-rgb) / 0.25));
}

h1.brand {
  margin: 0;
}

.auth-logo {
  display: block;
  width: auto;
  height: clamp(170px, 30vh, 250px);
  margin: 0 auto;
  filter: drop-shadow(0 8px 30px rgb(var(--red-rgb) / 0.22));
}

.boot-art {
  display: block;
  width: auto;
  height: clamp(150px, 26vh, 210px);
  animation: boot-focus 1.6s ease-in-out infinite alternate;
}

@keyframes boot-focus {
  from {
    opacity: 0.72;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 520px) {
  .brand-logo {
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-art {
    animation: none;
  }
}

/* le fond sombre de l'illustration se fond dans la page */
.auth-logo,
.boot-art {
  mix-blend-mode: screen;
}

/* =========================================================
   e28 : en-tête compact sur téléphone
   ========================================================= */
.header-more-wrap {
  position: relative;
  display: none;
}

.header-search-btn,
.header-search-close {
  display: none;
}

.header-menu {
  min-width: 210px;
}

.header-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-menu .dropdown-item .i,
.header-menu .dropdown-item svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 720px) {
  .app-header-inner.hdr-compact,
  .app-header-inner.hdr-compact:has(> .brand) {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
    min-height: 56px;
    padding: 8px 14px;
  }

  .app-header-inner.hdr-compact > .brand,
  .app-header-inner.hdr-compact:has(> .brand) > .brand {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .app-header-inner.hdr-compact > .header-actions,
  .app-header-inner.hdr-compact:has(> .brand) > .header-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
  }

  .hdr-compact .hm-hide {
    display: none !important;
  }

  .hdr-compact .header-more-wrap {
    display: block;
  }

  .hdr-compact .header-search-btn {
    display: grid;
  }

  .hdr-compact .icon-btn,
  .hdr-compact .profile-chip {
    width: 40px;
    height: 40px;
  }

  .hdr-compact .profile-chip {
    padding: 0;
    justify-content: center;
  }

  /* Recherche : cachée tant qu'on ne touche pas la loupe */
  .hdr-compact .profile-search-wrap {
    display: none;
  }

  /* la recherche passe sur sa propre ligne, en pleine largeur (même règle que « :has(> .brand) »
     plus haut, sinon elle restait coincée à droite et la page débordait sur le côté) */
  .app-header-inner.hdr-compact.search-open,
  .app-header-inner.hdr-compact.search-open:has(> .brand) {
    flex-wrap: wrap;
  }

  .hdr-compact.search-open .profile-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    order: 3;
    flex: 1 1 100%;
    max-width: none;
    margin: 0;
    animation: hdr-search-in 0.2s ease;
  }

  .hdr-compact.search-open .profile-search-input {
    flex: 1;
  }

  .hdr-compact.search-open .header-search-close {
    display: grid;
    flex: none;
  }

  .hdr-compact.search-open .header-search-btn {
    color: var(--red);
  }
}

@keyframes hdr-search-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* =========================================================
   e28 : couleur de chaque séance (--wk)
   ========================================================= */
.workout-card {
  --wk: var(--red);
}

.workout-title {
  border-left-color: var(--wk, var(--red));
}

.workout-card .progress-fill {
  background: var(--wk, var(--red));
}

.tab-btn {
  --wk: var(--red);
  position: relative;
}

.tab-btn::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wk);
  box-shadow: 0 0 8px color-mix(in srgb, var(--wk) 60%, transparent);
}

.tab-btn.active {
  background: color-mix(in srgb, var(--wk) 18%, var(--surface-solid));
  border-color: var(--wk);
  color: var(--text);
}

.tab-btn.active.today .tab-mark {
  color: var(--yellow);
}

.session-item {
  --wk: var(--red);
}

.session-item.active {
  border-color: var(--wk);
  background: color-mix(in srgb, var(--wk) 14%, var(--surface-2));
}

.session-item.active .session-item-status {
  background: var(--wk);
}

.session-item:not(.completed) .session-item-status {
  box-shadow: inset 3px 0 0 var(--wk);
}

@media (max-width: 720px) {
  .session-picker {
    border-left: 4px solid var(--wk, var(--red));
  }
}

/* Choix de la couleur dans l'éditeur */
.color-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-pick button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  cursor: pointer;
}

.color-pick button span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c);
}

.color-pick .color-auto {
  width: auto;
  padding: 0 12px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
}

.color-pick button[aria-checked="true"] {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--text) inset;
  color: var(--text);
}

/* =========================================================
   e28 : bloc « Aujourd'hui »
   ========================================================= */
.today-card {
  --wk: var(--red);
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--wk) 35%, var(--border));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--wk) 22%, transparent), transparent 60%),
    var(--surface);
  overflow: hidden;
}

.today-title {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  text-transform: uppercase;
}

.today-card .eyebrow {
  color: var(--muted);
}

.today-session {
  display: grid;
  gap: 10px;
}

.today-workout {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--wk);
  background: rgba(0, 0, 0, 0.25);
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.today-workout-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.today-workout-text small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.today-workout-text small .i {
  width: 13px;
  height: 13px;
  color: var(--yellow);
}

.today-workout-text b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.today-workout-text .muted {
  font-size: 0.85rem;
}

.today-ring {
  --p: 0;
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: conic-gradient(var(--wk) calc(var(--p) * 1%), rgba(255, 255, 255, 0.1) 0);
}

.today-ring span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface-solid);
  font-weight: 800;
  font-size: 0.85rem;
}

.today-start {
  width: 100%;
  min-height: 52px;
  font-size: 1rem;
  background: var(--wk);
  border-color: var(--wk);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--wk) 35%, transparent);
}

@media (hover: hover) {
  .today-start:hover {
    filter: brightness(1.1);
    background: var(--wk);
  }
}

.today-empty {
  display: grid;
  gap: 6px;
  padding: 4px 0;
}

.today-empty b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
}

.today-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.today-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.today-stat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.today-stat > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.today-stat b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.today-stat small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.today-stat-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--wk);
}

.today-stat-ico .i {
  width: 16px;
  height: 16px;
}

.today-stat-rec .today-stat-ico {
  color: var(--yellow);
}

@media (max-width: 420px) {
  .today-stats {
    grid-template-columns: 1fr 1fr;
  }

  .today-stat-rec {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   e28 : mode séance plein écran
   ========================================================= */
.focus-bar {
  display: grid;
  gap: 6px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--wk, var(--red)) 18%, transparent), transparent);
}

.focus-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.focus-name {
  flex: 1;
  min-width: 0;
  display: grid;
  line-height: 1.15;
}

.focus-name b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.focus-name span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.focus-elapsed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.focus-elapsed b {
  color: var(--text);
}

.focus-elapsed .i {
  width: 15px;
  height: 15px;
}

.focus-dots {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.focus-dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.focus-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: all 0.2s ease;
}

.focus-dot.done::before {
  background: var(--green);
}

.focus-dot.on::before {
  width: 14px;
  height: 14px;
  background: var(--wk, var(--red));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wk, var(--red)) 30%, transparent);
}

.focus-rest {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--wk, var(--red)) 50%, transparent);
  background: color-mix(in srgb, var(--wk, var(--red)) 16%, transparent);
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.focus-rest.finished {
  border-color: var(--green);
  background: var(--green-soft);
}

.focus-rest .i {
  width: 16px;
  height: 16px;
}

.log-thumb {
  flex: none;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}

.log-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.log-thumb + div {
  flex: 1;
  min-width: 0;
}

#logModal.focus-mode {
  padding: 0;
}

#logModal.focus-mode .sheet {
  --wk: inherit;
  width: 100%;
  max-width: 640px;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  border: 0;
  padding-top: env(safe-area-inset-top, 0px);
}

@media (min-width: 721px) {
  #logModal.focus-mode .sheet {
    height: calc(100dvh - 40px);
    max-height: calc(100dvh - 40px);
    border-radius: 20px;
    border: 1px solid var(--border-strong);
  }

  #logModal.focus-mode {
    padding: 20px;
  }
}

#logModal.focus-mode #closeLogBtn {
  display: none;
}

#logModal.focus-mode .sheet-head h2 {
  font-size: 1.8rem;
}

#logModal.focus-mode .sheet-foot {
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}

#logModal.focus-mode #logSaveBtn {
  background: var(--wk, var(--red));
  border-color: var(--wk, var(--red));
}

#logModal.focus-mode .log-set.next {
  border-color: color-mix(in srgb, var(--wk, var(--red)) 60%, transparent);
}

.focus-in-next {
  animation: focus-in-next 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.focus-in-prev {
  animation: focus-in-prev 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes focus-in-next {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}

@keyframes focus-in-prev {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
}

/* =========================================================
   e28 : gestes rapides
   ========================================================= */
.log-set {
  position: relative;
  touch-action: pan-y;
  transition: transform 0.18s ease;
}

.log-set.swiping {
  transition: none;
  -webkit-user-select: none;
  user-select: none;
}

.log-set.swiping::after {
  content: "Valider";
  position: absolute;
  top: 50%;
  left: -78px;
  transform: translateY(-50%);
  color: var(--green);
  font-weight: 800;
  font-size: 0.85rem;
  opacity: 0.5;
}

.log-set.swiping[data-swipe="undo"]::after {
  content: "Annuler";
  left: auto;
  right: -82px;
  color: var(--muted);
}

.log-set.swipe-ready::after {
  opacity: 1;
}

#logSets {
  overflow-x: clip;
}

.exo-card {
  -webkit-touch-callout: none;
}

.exo-card.pressing {
  transform: scale(0.985);
  transition: transform 0.45s ease;
  border-color: var(--border-strong);
}

.exo-actions-list {
  display: grid;
  gap: 6px;
}

.exo-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .exo-action:hover {
    background: var(--surface-3);
  }
}

.exo-action .i {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

/* =========================================================
   e28 : record battu
   ========================================================= */
.record-fx {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: grid;
  place-items: center;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.35);
  animation: fadeIn 0.15s ease;
}

.record-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 4px;
  max-width: min(86vw, 360px);
  padding: 22px 26px;
  border-radius: 22px;
  border: 1px solid rgba(255, 204, 0, 0.5);
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 204, 0, 0.18), transparent 60%), var(--surface-solid);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 204, 0, 0.15);
  text-align: center;
  animation: record-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.record-medal {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--yellow);
  color: #1a1400;
  margin-bottom: 6px;
}

.record-medal .i {
  width: 32px;
  height: 32px;
}

.record-card small {
  color: var(--yellow);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.record-card b {
  font-family: var(--font-display);
  font-size: 1.7rem;
  text-transform: uppercase;
  line-height: 1.05;
}

.record-card > span:last-child {
  color: var(--text);
  font-weight: 700;
}

.record-bit {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: record-bit var(--d) cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}

@keyframes record-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes record-bit {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 340px)) rotate(var(--r));
  }
}

/* =========================================================
   e28 : bilan de fin de séance
   ========================================================= */
.summary-sheet {
  max-width: 480px;
}

.summary-preview {
  display: grid;
  place-items: center;
  min-height: 180px;
  border-radius: 16px;
  background: #050505;
  overflow: hidden;
}

.summary-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.summary-stat {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 12px;
  background: var(--surface-2);
  text-align: center;
}

.summary-stat .i {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.summary-stat b {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
}

.summary-stat small {
  color: var(--muted);
  font-size: 0.72rem;
}

.summary-records {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.summary-rec-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--yellow);
  font-weight: 800;
  font-size: 0.85rem;
}

.summary-rec-title .i {
  width: 16px;
  height: 16px;
}

.summary-rec {
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--yellow-soft);
  font-weight: 700;
  font-size: 0.9rem;
}

.summary-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.summary-foot .btn.hidden + .btn,
.summary-foot:has(.hidden) {
  grid-template-columns: 1fr;
}

/* =========================================================
   e28 : courbes de progression
   ========================================================= */
.progress-panel {
  display: grid;
  gap: 12px;
}

.progress-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.progress-panel-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.05rem;
}

.progress-panel-head h3 .i {
  width: 18px;
  height: 18px;
  color: var(--red);
}

.progress-panel-head select {
  flex: 1 1 180px;
  max-width: 260px;
  min-height: 40px;
}

.prog-metric,
.prog-range {
  justify-self: start;
}

.prog-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.prog-summary > div {
  display: grid;
  gap: 2px;
}

.prog-summary small {
  color: var(--muted);
  font-size: 0.75rem;
}

.prog-summary b {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
}

.prog-delta {
  justify-items: end;
  text-align: right;
  font-weight: 800;
  color: var(--text);
}

.prog-delta .i {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

.prog-delta.up .i {
  color: var(--green);
}

.prog-delta.down .i {
  color: #ff6b6b;
}

.prog-chart {
  position: relative;
  padding-top: 50px;
}

.prog-chart:has(.empty-state) {
  padding-top: 0;
}

.prog-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}

.prog-grid {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}

.prog-tick {
  fill: var(--faint);
  font-size: 11px;
  font-family: var(--font);
}

.prog-line {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.prog-area {
  fill: var(--red);
  opacity: 0.1;
}

.prog-dot {
  fill: var(--red);
  stroke: var(--surface-solid);
  stroke-width: 2;
}

.prog-dot-on {
  fill: var(--text);
}

.prog-cross {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
}

.prog-cross.hidden,
.prog-dot-on.hidden {
  display: none;
}

.prog-tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  pointer-events: none;
  white-space: nowrap;
}

.prog-tip b {
  font-size: 0.95rem;
}

.prog-tip small {
  color: var(--muted);
  font-size: 0.72rem;
}

.prog-table summary {
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
}

.prog-table ul {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  max-height: 200px;
  overflow: auto;
}

.prog-table li {
  display: flex;
  justify-content: space-between;
  padding: 6px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .record-card,
  .record-fx,
  .focus-in-next,
  .focus-in-prev {
    animation: none;
  }
}

/* =========================================================
   e28 : harmonisation (téléphone)
   ========================================================= */
@media (max-width: 720px) {
  #viewSeances > .section:first-of-type .section-head,
  #viewSeances .section-head:has(#toggleFormBtn) {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #viewSeances .section-head-actions:has(#toggleFormBtn) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  #viewSeances .section-head-actions:has(#toggleFormBtn) .btn {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 62px;
    padding: 8px 6px;
    border-radius: 14px;
    font-size: 0.78rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  #viewSeances .section-head-actions:has(#toggleFormBtn) .btn .i {
    width: 18px;
    height: 18px;
  }

  #viewSeances .section-head-actions:has(#toggleFormBtn) #toggleFormBtn {
    order: -1;
  }
}

#viewSeances > .today-card {
  margin-bottom: 26px;
}

/* =========================================================
   e28 : vidéo de démo
   ========================================================= */
.welcome-video {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  margin-bottom: 18px;
}

.welcome-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.welcome-title {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.welcome-video video {
  display: block;
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: min(62vh, 560px);
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  background: #000;
}

.welcome-video .hint {
  margin: 0;
  text-align: center;
}

/* pas encore lancée : toute l'image sert de bouton lecture */
.welcome-video video:not([controls]) {
  cursor: pointer;
}

.demo-video-support {
  margin-bottom: 0;
}

/* =========================================================
   e29 : vidéo de bienvenue (première connexion)
   ========================================================= */
.intro-backdrop {
  padding: 0;
  background: rgba(0, 0, 0, 0.94);
}

.intro-frame {
  position: relative;
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 16 / 9));
  overflow: hidden;
  background: #000;
  animation: sheetIn 0.3s ease;
}

.intro-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.intro-top {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.intro-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 10, 12, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font: 600 0.92rem/1 var(--font);
  cursor: pointer;
}

.intro-pill .i {
  width: 18px;
  height: 18px;
}

/* e86 : volume et « Passer » pendant la vidéo de présentation */
.intro-vol {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px 0 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 10, 12, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.intro-vol.hidden {
  display: none;
}

.intro-vol-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.intro-vol-btn .i {
  width: 18px;
  height: 18px;
}

.intro-vol-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

#introVolume {
  --p: 80%;
  width: 92px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#introVolume::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #fff var(--p), rgba(255, 255, 255, 0.28) var(--p));
}

#introVolume::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.28);
}

#introVolume::-moz-range-progress {
  height: 4px;
  border-radius: 4px;
  background: #fff;
}

#introVolume::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgb(var(--red-rgb) / 0.55);
  -webkit-appearance: none;
  appearance: none;
}

#introVolume::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgb(var(--red-rgb) / 0.55);
}

#introVolume:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
}

.intro-skip {
  margin-inline-start: auto;
  padding: 0 14px 0 18px;
}

.intro-play {
  position: absolute;
  left: 50%;
  top: 84%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 0 12px rgb(var(--red-rgb) / 0.22);
  cursor: pointer;
}

.intro-play .i {
  width: 38px;
  height: 38px;
  margin-left: 5px;
}

.intro-play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.intro-pill:focus-visible,
.intro-start:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.intro-start {
  position: absolute;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  min-width: 220px;
  min-height: 52px;
  font-size: 1.05rem;
  animation: fadeIn 0.3s ease;
}

@media (min-width: 700px) {
  .intro-frame {
    height: min(92dvh, calc(100vw * 16 / 9));
    width: min(100vw, calc(92dvh * 9 / 16));
    border-radius: 22px;
  }
}

.intro-notice {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.8));
}

.intro-notice-card {
  width: min(100%, 360px);
  display: grid;
  gap: 10px;
  padding: 22px 20px 20px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: rgba(16, 16, 19, 0.94);
  box-shadow: var(--shadow);
  text-align: center;
  animation: sheetIn 0.25s ease;
}

.intro-notice-card p {
  margin: 0;
  line-height: 1.45;
}

.intro-notice-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.intro-notice-card .btn {
  margin-top: 6px;
  min-height: 50px;
}

/* =========================================================
   e32 : jours d'entraînement
   ========================================================= */
.day-pick {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  max-width: 380px;
}

.day-pick button {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--muted);
  font: 800 0.95rem/1 var(--font);
  cursor: pointer;
}

.day-pick button[aria-pressed="true"] {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.day-pick button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* =========================================================
   e32 : photo de l'assiette
   ========================================================= */
.food-search-bar .scan-btn + .scan-btn {
  margin-left: 0;
}

.photo-warn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 204, 0, 0.35);
  background: rgba(255, 204, 0, 0.08);
  font-size: 0.88rem;
  line-height: 1.45;
}

.photo-warn .i {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--yellow);
}

.photo-warn p {
  margin: 0;
}

.photo-preview {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--surface-2);
}

.photo-status {
  font-weight: 600;
  line-height: 1.45;
}

.photo-status:empty {
  display: none;
}

.photo-status.warn {
  color: var(--yellow);
}

.photo-status .spinner {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--red);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.plate-items {
  display: grid;
  align-content: start;
  gap: 8px;
}

.plate-items label {
  display: flex;
  margin: 0;
}

.plate-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 86px 70px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.plate-item.off {
  opacity: 0.5;
}

.plate-check input {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  accent-color: var(--red);
}

.plate-name,
.plate-grams input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  color: var(--text);
  font: inherit;
}

.plate-grams {
  display: flex;
  align-items: center;
  gap: 4px;
}

.plate-grams input {
  text-align: right;
}

.plate-kcal {
  text-align: right;
  font-weight: 800;
  font-size: 0.88rem;
  white-space: nowrap;
}

.photo-total {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgb(var(--red-rgb) / 0.1);
  border: 1px solid rgb(var(--red-rgb) / 0.3);
}

.photo-total b {
  font-size: 1.15rem;
}

@media (max-width: 480px) {
  .plate-item {
    grid-template-columns: 26px minmax(0, 1fr) 78px;
  }

  .plate-kcal {
    grid-column: 2 / -1;
    text-align: left;
    font-size: 0.8rem;
    color: var(--muted);
  }
}

/* =========================================================
   e32 : santé (pas du jour)
   ========================================================= */
.steps-today {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.steps-ring {
  --p: 0;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: conic-gradient(#3d8bff calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0);
}

.steps-ring.done {
  background: conic-gradient(var(--green) calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0);
}

.steps-ring > div {
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--surface-solid);
  text-align: center;
}

.steps-ring b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
}

.steps-ring small {
  color: var(--muted);
  font-size: 0.78rem;
}

.steps-side {
  flex: 1 1 240px;
  display: grid;
  gap: 6px;
}

.steps-side p {
  margin: 0;
}

.steps-form,
.steps-goal {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.steps-form .field,
.steps-goal .field {
  flex: 1 1 130px;
  margin: 0;
}

.steps-form select {
  min-height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.steps-goal {
  margin-top: 14px;
}

.week-fill.steps-fill {
  background: linear-gradient(180deg, #6aa8ff, #2d6fd6);
}

.week-fill.steps-fill.reached {
  background: linear-gradient(180deg, #5ee08e, #2f9e5a);
}

#stepsChart .week-bar {
  cursor: default;
}

.steps-sync p {
  margin: 0 0 10px;
  line-height: 1.5;
}

.sync-key {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.sync-new {
  color: var(--green);
}

.sync-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.sync-row small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-weight: 700;
}

.sync-row code {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  color: var(--text);
}

.sync-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sync-steps {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding-left: 20px;
  line-height: 1.5;
}

/* =========================================================
   e32 : playlists perso (premium)
   ========================================================= */
.my-playlists {
  margin-top: 26px;
  display: grid;
  gap: 12px;
}

.my-playlists .section-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.premium-lock {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.premium-lock p {
  margin: 6px 0 0;
  line-height: 1.5;
}

.premium-lock-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 204, 0, 0.12);
  color: var(--yellow);
}

.my-pl-list {
  display: grid;
  gap: 8px;
}

.my-pl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.my-pl.on {
  border-color: var(--red);
}

.my-pl-play {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  cursor: pointer;
}

.my-pl-text {
  flex: 1;
  min-width: 0;
  display: grid;
}

.my-pl-text b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-pl-form {
  display: grid;
  gap: 10px;
}

.my-pl-form .field {
  margin: 0;
}

.my-player {
  display: grid;
  gap: 10px;
}

.my-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.my-player-head span {
  display: grid;
}

.my-player-frame {
  overflow: hidden;
  border-radius: 14px;
  background: #000;
}

.my-player-frame.video {
  aspect-ratio: 16 / 9;
}

.my-player-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   e33 : playlists perso en cartes (comme les ambiances)
   ========================================================= */
.my-pl-card {
  position: relative;
  display: flex;
  min-width: 0;
}

.my-pl-card > .radio-card {
  flex: 1;
  width: 100%;
}

.my-pl-edit {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 10, 12, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.radio-card-text .my-pl-src {
  margin-top: 2px;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.my-pl-add {
  justify-content: center;
  border-style: dashed;
  border-color: var(--border-strong);
  background: transparent;
  min-height: 150px;
}

.my-pl-add-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgb(var(--red-rgb) / 0.14);
  color: var(--red);
}

.my-pl-add .radio-card-text {
  text-align: center;
}

.my-player-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.my-player-note .i {
  flex: 0 0 auto;
  margin-top: 2px;
}

#myPlaylistsBody {
  display: grid;
  gap: 12px;
}

/* Page introuvable (404) */
.notfound {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: 12vh;
  text-align: center;
}

.notfound-logo {
  height: 70px;
  width: auto;
}

/* Profil : raccourcis Messages / Mes amis / Coaching */
.profile-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 18px 18px;
}

.profile-links .btn {
  justify-content: center;
  min-height: 46px;
  width: 100%;
}

@media (max-width: 480px) {
  .profile-links {
    padding: 0 14px 14px;
    gap: 8px;
  }

  .profile-links .btn {
    flex-direction: column;
    gap: 4px;
    min-height: 62px;
    padding: 8px 4px;
    font-size: 0.8rem;
  }
}

/* Chrono de séance : pause / reprise / remise à zéro */
.focus-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

button.focus-elapsed {
  border: 0;
  cursor: pointer;
  font: inherit;
  min-height: 34px;
}

button.focus-elapsed.paused {
  background: rgba(255, 204, 0, 0.16);
  color: var(--yellow);
  animation: focus-blink 1.4s ease-in-out infinite;
}

button.focus-elapsed.paused b {
  color: var(--yellow);
}

@keyframes focus-blink {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  button.focus-elapsed.paused {
    animation: none;
  }
}

.focus-reset {
  width: 34px;
  height: 34px;
}

/* =========================================================
   e36 : photos et vidéos dans les messages
   ========================================================= */
.chat-attach-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.chat-attach {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
}

.chat-attach.hidden {
  display: none;
}

.chat-attach-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.chat-attach-thumb img,
.chat-attach-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-attach-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.bubble-row.has-media .bubble {
  padding: 4px 4px 8px;
  flex-direction: column;
  align-items: stretch;
}

.bubble-row.has-media .bubble p {
  padding: 4px 8px 0;
}

.bubble-row.has-media .bubble small {
  padding: 0 8px;
}

.bubble-media {
  overflow: hidden;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  min-width: 160px;
  min-height: 120px;
}

.bubble-img {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.bubble-media img,
.bubble-media video {
  display: block;
  width: 100%;
  max-width: 320px;
  max-height: 360px;
  object-fit: cover;
}

.bubble-media video {
  object-fit: contain;
  background: #000;
}

.bubble-media-wait {
  display: block;
  width: 220px;
  height: 160px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  background-size: 200% 100%;
  animation: media-shine 1.2s linear infinite;
}

@keyframes media-shine {
  to {
    background-position: -200% 0;
  }
}

.bubble-media-missing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--muted);
  font-size: 0.85rem;
}

.media-viewer {
  padding: 0;
  background: rgba(0, 0, 0, 0.94);
}

.media-viewer img {
  max-width: 100vw;
  max-height: 100dvh;
  object-fit: contain;
}

.media-viewer-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 2;
  background: rgba(20, 20, 24, 0.8);
}

/* =========================================================
   e36 : menus déroulants maison (ui-select.js)
   ========================================================= */
.ui-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.ui-select-native {
  position: absolute !important;
  inset: 0;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.ui-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px 10px 13px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgba(10, 10, 12, 0.7);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ui-select-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-select-btn .i {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform 0.18s ease;
}

.ui-select.is-open .ui-select-btn,
.ui-select-btn:focus-visible {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
  outline: none;
}

.ui-select.is-open .ui-select-btn .i {
  transform: rotate(180deg);
}

.ui-select.is-disabled .ui-select-btn {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Tailles reprises des anciens menus */
.block-type-row .ui-select {
  flex: 1;
}

.block-type-row .ui-select-btn,
.measure-caption .ui-select-btn {
  min-height: 34px;
  padding: 4px 10px;
  font-size: 0.86rem;
}

.measure-caption .ui-select {
  width: auto;
  display: inline-block;
}

.qty-row .ui-select {
  flex: 0 0 86px;
  width: 86px;
}

.progress-panel-head .ui-select {
  flex: 1 1 180px;
  max-width: 260px;
}

.progress-panel-head .ui-select-btn,
.steps-form .ui-select-btn {
  min-height: 42px;
}

.steps-form .ui-select {
  width: auto;
  flex: 1 1 150px;
}

/* Panneau des choix */
.ui-select-pop {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.ui-select-panel {
  position: fixed;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.ui-select-pop.is-in .ui-select-panel {
  opacity: 1;
  transform: none;
}

.ui-select-head {
  display: none;
}

.ui-select-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.ui-select-search .i {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.ui-select-search input {
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 16px;
}

.ui-select-list {
  flex: 1;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  outline: none;
}

.ui-select-group {
  padding: 10px 10px 4px;
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ui-select-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.ui-select-opt span {
  min-width: 0;
}

.ui-select-opt .i {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--red);
  visibility: hidden;
}

.ui-select-opt[aria-selected="true"] {
  font-weight: 700;
}

.ui-select-opt[aria-selected="true"] .i {
  visibility: visible;
}

.ui-select-opt.is-active {
  background: rgba(255, 255, 255, 0.07);
}

@media (hover: hover) {
  .ui-select-opt:hover {
    background: rgba(255, 255, 255, 0.07);
  }
}

.ui-select-opt.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ui-select-empty {
  padding: 14px 10px;
  color: var(--muted);
  text-align: center;
}

/* Téléphone : panneau qui monte du bas */
.ui-select-pop.is-sheet {
  background: rgba(0, 0, 0, 0.55);
}

.ui-select-pop.is-sheet .ui-select-panel {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 75dvh;
  border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(24px);
}

.ui-select-pop.is-sheet.is-in .ui-select-panel {
  transform: none;
}

.ui-select-pop.is-sheet .ui-select-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
}

.ui-select-pop.is-sheet .ui-select-opt {
  min-height: 48px;
}

@media (prefers-reduced-motion: reduce) {
  .ui-select-panel {
    transition: none;
  }
}

/* e36 — Perfs : filtres muscle / matériel */
.ranked-filters {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  margin: 4px 0 2px;
}

.ranked-filters .ranked-mine {
  min-height: 46px;
  align-items: center;
}

.ranked-group .food-group small {
  font-size: 0.72rem;
  font-weight: 600;
  margin-left: 6px;
}

.ranked-none {
  padding: 18px 4px;
  text-align: center;
}

@media (max-width: 600px) {
  .ranked-filters {
    grid-template-columns: 1fr 1fr;
  }
  .ranked-filters .ranked-mine {
    grid-column: 1 / -1;
    min-height: 0;
  }
}

/* e36 — Outil « Quoi charger ? » (barre, haltères, machine, poulie, kettlebell) */
.plates-modes {
  margin-bottom: 14px;
}

.plates-modes .segment {
  min-width: 0;
  padding: 0 2px;
  font-size: 0.76rem;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plates-extra {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.plates-extra:not(:has(> :not(.hidden))) {
  display: none;
}

.plates-extra > .hidden {
  display: none;
}

.plates-have {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plate-chip {
  min-width: 46px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--faint);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: line-through;
}

.plate-chip.on {
  border-color: var(--plate);
  background: color-mix(in srgb, var(--plate) 22%, transparent);
  color: var(--text);
  text-decoration: none;
}

.plates-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.plates-pick.is-exact {
  border-color: rgba(75, 211, 123, 0.45);
}

.plates-pick.is-exact > .i {
  color: #4bd37b;
  flex: 0 0 auto;
}

.plates-near {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.plates-near li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.plates-near small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.plates-near em {
  font-style: normal;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.plates-result .hint {
  margin-top: 10px;
}

/* e36 — Profil : discipline, niveau, ancienneté, salle, Instagram */
.profile-more {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

.pm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-chip .i {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--muted);
}

a.pm-link {
  text-decoration: none;
  border-color: rgb(var(--red-rgb) / 0.35);
}

@media (hover: hover) {
  a.pm-link:hover {
    border-color: var(--accent, var(--red));
  }
}

.edit-private {
  margin-top: 4px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed var(--border-strong);
}

/* e36 — Coach IA */
.ai-sheet {
  max-width: 560px;
  height: min(680px, calc(100dvh - 40px));
}

.ai-body {
  flex: 1;
  overflow-y: auto;
}

.ai-warn {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
}

.ai-warn .i {
  flex: 0 0 auto;
  margin-top: 2px;
}

.ai-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-msg {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 0.93rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ai-msg p {
  margin: 0;
}

.ai-msg p + p,
.ai-msg p + ul,
.ai-msg ul + p {
  margin-top: 8px;
}

.ai-msg ul {
  margin: 0;
  padding-left: 18px;
}

.ai-user {
  align-self: flex-end;
  background: linear-gradient(135deg, #ff2a2a, #c91010);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.ai-assistant {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 6px;
}

.ai-assistant.ai-error {
  border-color: rgba(229, 18, 18, 0.45);
  color: var(--muted);
}

.ai-wait {
  display: flex;
  gap: 5px;
  padding: 14px 16px;
}

.ai-wait span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: aiDot 1s infinite ease-in-out;
}

.ai-wait span:nth-child(2) {
  animation-delay: 0.15s;
}

.ai-wait span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes aiDot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.ai-ideas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-ideas .chip {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 0.84rem;
  text-align: left;
}

.ai-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px 10px;
}

.ai-form textarea {
  min-height: 46px;
  max-height: 140px;
  resize: none;
  font-size: 16px;
}

.ai-form textarea::placeholder {
  font-size: 0.86em;
}

/* Exemple trop long dans une case (« Exercice en français ou en anglais (pull-up… ») : « … » au lieu d'un mot coupé */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) {
  text-overflow: ellipsis;
}

.ai-form .btn {
  flex: none;
  width: 52px;
  height: 46px;
  padding: 0;
}

.ai-left {
  grid-column: 1 / -1;
  min-height: 1em;
  font-size: 0.74rem;
}

.log-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  padding: 4px 0;
  color: #f0a5a5;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.log-ai-btn:disabled {
  opacity: 0.6;
}

.log-ai {
  display: grid;
  gap: 8px;
  margin: 8px 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgb(var(--red-rgb) / 0.3);
  background: rgb(var(--red-rgb) / 0.06);
  font-size: 0.86rem;
}

.log-ai.hidden {
  display: none;
}

.log-ai p {
  margin: 0;
}

.log-ai-head .i,
.log-ai .i {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}

.log-ai .btn {
  justify-self: start;
}

/* e37 — Page Premium */
.premium-page {
  max-width: 760px;
  margin: 0 auto;
}

.prem-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 204, 0, 0.16), transparent 55%), var(--surface);
}

.prem-crown {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: rgba(255, 204, 0, 0.14);
  color: var(--yellow, #ffcc00);
}

.prem-crown .i {
  width: 26px;
  height: 26px;
}

.prem-perks {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.prem-perks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.prem-perks .i {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #4bd37b;
}

.prem-return {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
}

.prem-return.ok {
  border-color: rgba(75, 211, 123, 0.5);
}

.prem-return.ok > .i {
  color: #4bd37b;
}

.prem-return.wait > .i {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.prem-status {
  border-color: rgba(255, 204, 0, 0.35);
}

.prem-status-head {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--yellow, #ffcc00);
}

.prem-status p {
  margin: 8px 0 12px;
  line-height: 1.5;
}

.prem-form {
  display: grid;
  gap: 14px;
}

.prem-offers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.prem-offer {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.prem-offer strong {
  font-size: 1.25rem;
}

.prem-offer small {
  font-size: 0.76rem;
}

.prem-offer.on {
  border-color: var(--yellow, #ffcc00);
  box-shadow: 0 0 0 1px var(--yellow, #ffcc00) inset;
  background: rgba(255, 204, 0, 0.08);
}

.prem-save {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(75, 211, 123, 0.16);
  color: #86efac;
  font-size: 0.72rem;
  font-weight: 800;
}

.prem-renew,
.prem-consent {
  align-items: flex-start;
}

.prem-consent span {
  font-size: 0.84rem;
  line-height: 1.45;
}

.prem-consent a {
  color: var(--text);
}

.prem-secure {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.prem-payments {
  display: grid;
  gap: 8px;
}

.prem-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
}

.prem-pay-row span {
  display: grid;
}

/* Bandeau Premium du profil */
.profile-premium {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 18px 18px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 204, 0, 0.3);
  background: rgba(255, 204, 0, 0.06);
  color: var(--text);
  text-decoration: none;
}

.profile-premium > .i {
  flex: 0 0 auto;
  color: var(--yellow, #ffcc00);
}

.profile-premium span {
  flex: 1;
  display: grid;
  font-size: 0.86rem;
}

/* e37 — Publicités (membres sans Premium) */
.ad-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.ad-card.no-img {
  grid-template-columns: 1fr;
}

.ad-card img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
}

.ad-label {
  display: block;
  margin-bottom: 2px;
  color: var(--faint);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ad-card strong {
  display: block;
  padding-right: 28px;
}

.ad-card p {
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.ad-card .btn {
  justify-self: start;
}

.ad-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  min-height: 0;
}

.ad-card.house {
  border-color: rgba(255, 204, 0, 0.28);
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 204, 0, 0.1), transparent 60%), var(--surface);
}

.ad-slot:empty {
  display: none;
}

/* Place gardée pendant que l'annonce se charge (pas de saut de page) */
.ad-slot.reserved:empty {
  display: block;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}

.premium-lock-btn {
  margin-top: 10px;
}

.profile-premium:empty {
  display: none;
}

/* e37 — Admin : 8 onglets, Premium, Pubs */
.segmented.tabs-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

@media (max-width: 900px) {
  #adminTabs.tabs-8 {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #adminTabs.tabs-8::-webkit-scrollbar {
    display: none;
  }

  #adminTabs.tabs-8 .segment {
    flex: 0 0 auto;
    padding: 0 12px;
    overflow: visible;
  }
}

.admin-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 600px) {
  .admin-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.offers-admin {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.offer-admin-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
}

.offer-admin-row.off {
  opacity: 0.6;
}

.offer-price {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

.offer-price input {
  width: 92px;
  min-height: 38px;
  padding: 6px 10px;
  text-align: right;
}

.prem-admin-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.prem-admin-row.off {
  opacity: 0.6;
}

.admin-steps {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 20px;
  line-height: 1.5;
}

.admin-steps code {
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .offer-admin-row {
    grid-template-columns: 1fr auto;
  }
}

.legal-todo {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 204, 0, 0.5);
  background: rgba(255, 204, 0, 0.06);
}
.legal-fill {
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(255, 204, 0, 0.16);
  color: #ffe58a;
}

/* e38 — Profil d'un membre : boutons alignés avec le reste (marges de la carte) */
.profile-hero .profile-social {
  margin: 14px 0 6px;
  padding: 0 18px;
}

.profile-hero .profile-more {
  padding: 0 18px;
}

@media (max-width: 480px) {
  .profile-hero .profile-social {
    padding: 0 14px;
  }
}

.badge-premium {
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.22), rgba(255, 122, 26, 0.18));
  color: #ffd84d;
  border: 1px solid rgba(255, 204, 0, 0.5);
}

.prem-admin-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
}

.prem-from-roles {
  width: 100%;
  border: 1px dashed rgba(255, 204, 0, 0.4);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

/* e38 — Photo de l'assiette : Premium */
.scan-btn {
  position: relative;
}

.scan-prem {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffcc00;
  color: #1a1400;
}

.scan-prem .i {
  width: 12px;
  height: 12px;
}

/* Choix de la langue (e39) */
.auth-lang {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.lang-switch button {
  min-height: 32px;
}
.legal-lang-note {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 204, 0, 0.08);
  color: var(--text);
  font-size: 0.85rem;
}

/* Bouton de langue dans l'en-tête (e39b) */
.lang-btn span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Logo choisi dans l'administration (e40) : jamais déformé */
img.brand-custom {
  object-fit: contain;
}

/* e40 — Admin : onglet Logo */
.segmented.tabs-8.tabs-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.brand-admin-list {
  display: grid;
  gap: 12px;
}

.brand-admin-card {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.brand-admin-preview {
  flex: 0 0 auto;
  width: 120px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0 25%, transparent 0 50%) 0 0 / 16px 16px, #0b0b0d;
}

.brand-admin-preview.is-icon {
  width: 72px;
}

.brand-admin-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.brand-admin-card .radio-admin-main {
  flex: 1 1 180px;
  min-width: 0;
}

/* e40 — Pied de page commun (liens légaux, paiements, support) */
.site-footer {
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 18px 16px 4px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--faint);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 16px;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: none;
}

.site-footer a:focus-visible,
.site-footer a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .site-footer a:hover {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.site-footer small {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
}

/* =========================================================
   e41 (phase 5) — Barre d'onglets du téléphone : 5 entrées + « Plus »
   ========================================================= */
.tab-more-btn {
  display: none;
}

/* Toujours une seule rangée : une entrée en trop prend une colonne, jamais une 2e ligne */
.tabbar {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: auto;
}

@media (max-width: 720px) {
  .tabbar.tabbar-v2 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 4px 6px calc(6px + var(--safe-bottom));
    border-radius: 24px 24px 0 0;
  }

  .tabbar-v2 .tb-more {
    display: none !important;
  }

  .tabbar-v2 .tab-more-btn {
    display: flex;
  }

  .tabbar-v2 .tab-item,
  .tabbar-v2 .tab-start {
    min-height: 56px;
    justify-content: flex-end;
    gap: 4px;
    padding: 6px 2px 4px;
    font-size: 0.7rem;
    letter-spacing: 0;
  }

  .tabbar-v2 .tab-item span,
  .tabbar-v2 .tab-start > span:last-child {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Libellés complets : la place ne manque plus */
  .tabbar-v2 .tab-label[data-short] {
    font-size: inherit;
  }

  .tabbar-v2 .tab-label[data-short]::after {
    content: none;
  }

  .tabbar-v2 .tab-item svg {
    box-sizing: content-box;
    width: 22px;
    height: 22px;
    padding: 4px 16px;
    border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .tabbar-v2 .tab-item.active {
    color: var(--text);
  }

  .tabbar-v2 .tab-item.active svg {
    background: rgb(var(--red-rgb) / 0.16);
    stroke: var(--red2, #ff4a4a);
  }

  .tabbar-v2 .tab-start-circle {
    width: 56px;
    height: 56px;
    margin-top: -24px;
  }

  .tabbar-v2 .tab-start-circle svg {
    width: 26px;
    height: 26px;
  }

  .tabbar-v2 .tab-item:focus-visible,
  .tabbar-v2 .tab-start:focus-visible {
    outline: 2px solid var(--red2, #ff4a4a);
    outline-offset: -2px;
    border-radius: 14px;
  }
}

/* Panneau « Plus » */
.more-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.more-sheet-backdrop.hidden {
  display: none;
}

.more-sheet {
  width: 100%;
  max-width: 560px;
  padding: 10px 14px calc(18px + var(--safe-bottom));
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--border-strong, var(--border));
  background: #141417;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.more-sheet:focus {
  outline: none;
}

.more-sheet-backdrop.open .more-sheet {
  transform: none;
  opacity: 1;
}

.more-sheet-grip {
  width: 40px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
}

.more-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.more-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 76px;
  padding: 10px 4px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.more-tile svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.more-tile span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  /* libellé long (certaines langues) : 2 lignes plutôt que coupé */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  line-height: 1.15;
  text-align: center;
}

@media (max-width: 380px) {
  .more-sheet {
    padding-left: 10px;
    padding-right: 10px;
  }

  .more-sheet-grid {
    gap: 6px;
  }

  .more-tile {
    padding: 10px 2px;
    font-size: 0.7rem;
  }
}

.more-tile.active {
  border-color: rgb(var(--red-rgb) / 0.5);
  background: rgb(var(--red-rgb) / 0.12);
}

.more-tile.active svg {
  stroke: var(--red2, #ff4a4a);
}

.more-tile:active {
  transform: scale(0.97);
}

.more-tile:focus-visible {
  outline: 2px solid var(--red2, #ff4a4a);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .more-sheet {
    transition: none;
  }
}

/* e86 : panneau « Plus » plus soigné — pages en grille de 3 (icône dans une pastille),
   Premium en carte dorée, Aide et langue en lignes */
.more-sheet-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.more-sheet .more-tile {
  min-height: 92px;
  gap: 8px;
  padding: 12px 6px;
  border-color: rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  font-size: 0.8rem;
  font-weight: 650;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.more-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: rgb(var(--red-rgb) / 0.13);
  color: var(--red2, #ff4a4a);
  font-style: normal;
}

.more-sheet .more-ico svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.more-sheet .more-tile.active {
  border-color: rgb(var(--red-rgb) / 0.55);
  background: linear-gradient(180deg, rgb(var(--red-rgb) / 0.2), rgb(var(--red-rgb) / 0.08));
}

.more-sheet .more-tile.active .more-ico {
  background: var(--red, #e51212);
  color: #fff;
}

.more-sheet-extra {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.more-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 9px 12px 9px 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.more-row > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-inline-start: auto;
  fill: none;
  stroke: var(--muted, #9aa0aa);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[dir="rtl"] .more-row > svg {
  transform: scaleX(-1);
}

.more-row-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.more-row-txt b {
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.more-row-txt small {
  overflow: hidden;
  color: var(--muted, #9aa0aa);
  font-size: 0.72rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.more-row:active,
.more-sheet .more-tile:active {
  transform: scale(0.97);
}

.more-row:focus-visible {
  outline: 2px solid var(--red2, #ff4a4a);
  outline-offset: 2px;
}

.more-row.active {
  border-color: rgb(var(--red-rgb) / 0.5);
}

/* Premium : carte dorée */
.more-premium {
  min-height: 64px;
  border-color: rgba(255, 204, 0, 0.35);
  background: linear-gradient(110deg, rgba(255, 204, 0, 0.16), rgba(255, 140, 0, 0.06) 55%, rgba(255, 255, 255, 0.02));
}

.more-premium .more-ico {
  background: linear-gradient(140deg, #ffd84a, #ff9f1a);
  color: #1a1306;
}

.more-premium .more-row-txt b {
  color: #ffd84a;
}

.more-premium > svg {
  stroke: #ffd84a;
}

.more-premium.active {
  border-color: rgba(255, 204, 0, 0.7);
}

/* Aide + langue : deux lignes côte à côte */
.more-util {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.more-util .more-row {
  min-height: 54px;
}

.more-util .more-ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.more-util .more-ico svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 380px) {
  .more-sheet-grid,
  .more-util {
    gap: 8px;
  }

  .more-sheet .more-tile {
    min-height: 84px;
    font-size: 0.74rem;
  }

  .more-row {
    gap: 9px;
    padding-inline-end: 9px;
  }
}

/* Très petits écrans : libellés courts (Histo., Lancer). À 360 px, « Historique » tient en entier */
@media (max-width: 330px) {
  .tabbar-v2 .tab-label[data-short] {
    font-size: 0;
  }

  .tabbar-v2 .tab-label[data-short]::after {
    content: attr(data-short);
    font-size: 0.68rem;
  }
}

/* Diète, très petit écran : le bouton « Fixer mon objectif » ne déborde plus */
.kcal-side .btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

/* =========================================================
   e44 : carte « Aujourd'hui » cohérente, saisie seulement en séance
   ========================================================= */
.today-done {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(47, 168, 79, 0.45);
  background: rgba(47, 168, 79, 0.12);
}
.today-done > .i {
  flex: none;
  width: 22px;
  height: 22px;
  color: #3ecf6a;
}
.today-done span {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.today-done b {
  font-size: 0.95rem;
}
.today-done small {
  color: var(--muted);
  font-size: 0.8rem;
  overflow-wrap: break-word;
}
.today-workout.is-later {
  border-left-color: color-mix(in srgb, var(--wk) 55%, var(--border));
  background: rgba(0, 0, 0, 0.18);
}
.today-workout.is-later .today-workout-text b {
  font-size: 1.25rem;
}
.today-start.today-start-soft {
  min-height: 46px;
  background: rgba(255, 255, 255, 0.06);
  border-color: color-mix(in srgb, var(--wk) 45%, var(--border));
  box-shadow: none;
  color: var(--text);
}
@media (hover: hover) {
  .today-start.today-start-soft:hover {
    background: rgba(255, 255, 255, 0.1);
    filter: none;
  }
}
.workout-title,
.session-item-name {
  overflow-wrap: break-word;
}
.exo-done-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--green);
  color: #062b14;
}
.exo-done-mark .i {
  width: 18px;
  height: 18px;
  stroke-width: 3;
}
.exo-actions:empty {
  display: none;
}
.exo-actions:has(> :only-child) {
  grid-template-columns: auto;
  justify-content: start;
}
.session-bar {
  display: grid;
  gap: 6px;
  margin: 2px 0 4px;
}
.session-bar .btn {
  min-height: 50px;
  font-size: 1rem;
}
.session-bar-start {
  background: var(--wk, var(--red));
  border-color: var(--wk, var(--red));
}
.session-bar small {
  text-align: center;
  font-size: 0.78rem;
}

/* =========================================================
   e45 : powerlifting, mes 1RM et tableau RPE
   ========================================================= */
.log-rpe-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  padding: 4px 0;
  color: var(--faint);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
@media (hover: hover) {
  .log-rpe-btn:hover {
    color: var(--text);
  }
}
.log-rpe-btn .i {
  width: 15px;
  height: 15px;
}
.pl-rpe-btn {
  grid-column: 1 / -1;
  justify-self: start;
}
.rpe-sheet {
  max-width: 720px;
}
.rpe-body {
  display: grid;
  gap: 12px;
}
.rpe-lifts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rpe-lifts .chip {
  cursor: pointer;
  padding: 7px 11px;
  font-size: 0.85rem;
  color: var(--text);
}
.rpe-lifts .chip.on {
  border-color: var(--red);
  background: rgb(var(--red-rgb) / 0.16);
}
.rpe-lifts .chip-add {
  border-style: dashed;
  color: var(--muted);
  align-items: center;
}
.rpe-lifts .chip-add .i {
  width: 14px;
  height: 14px;
}
.rpe-rm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.rpe-rm-row .field {
  flex: 1 1 140px;
  margin: 0;
}
.rpe-rm-row .btn {
  min-height: 44px;
}
.rpe-table-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rpe-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.rpe-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.rpe-table th,
.rpe-table td {
  padding: 6px 4px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.rpe-table thead th {
  position: sticky;
  top: 0;
  background: #2a2a2e;
  color: var(--muted);
  font-weight: 800;
}
.rpe-table th[scope="row"],
.rpe-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #2a2a2e;
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
}
.rpe-table thead th:first-child {
  z-index: 2;
  font-size: 0.7rem;
}
.rpe-table td {
  cursor: pointer;
  line-height: 1.1;
}
.rpe-table td b {
  display: block;
  font-weight: 800;
}
.rpe-table td small {
  display: block;
  color: var(--faint);
  font-size: 0.66rem;
}
@media (hover: hover) {
  .rpe-table td:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}
.rpe-table td.on {
  background: var(--red);
  color: #fff;
}
.rpe-table td.on small {
  color: rgba(255, 255, 255, 0.85);
}
.rpe-table tbody tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.025);
}
.rpe-table tbody tr:nth-child(even) td.on {
  background: var(--red);
}
.rpe-pick {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgb(var(--red-rgb) / 0.45);
  background: rgb(var(--red-rgb) / 0.1);
}
.rpe-pick p {
  margin: 0;
}
.rpe-pick strong {
  font-size: 1.1rem;
}
.rpe-pick .btn {
  justify-self: start;
}
.rpe-help summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
}
.rpe-help p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}
.rpe-pick-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.rpe-pick-line span::before {
  content: "= ";
}
.rpe-pick-line strong::before {
  content: "→ ";
  font-weight: 400;
  color: var(--muted);
}
.rpe-help ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* =========================================================
   e46 : programme créé par l'IA (Premium)
   ========================================================= */
.lib-filter-ia {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: rgba(245, 179, 1, 0.55);
  color: #f5c542;
}
.lib-filter-ia .i {
  width: 14px;
  height: 14px;
}
.lib-filter-ia.on {
  background: linear-gradient(135deg, var(--red), #b97c00);
  border-color: transparent;
  color: #fff;
}
.ia-prog {
  display: grid;
  gap: 14px;
  padding: 16px;
}
.ia-prog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ia-prog-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}
.ia-prog-head h3 .i {
  color: #f5c542;
}
.ia-prog-head .badge {
  flex: none;
}
.ia-prog-form {
  display: grid;
  gap: 12px;
}
.ia-prog-form .field {
  margin: 0;
}
.ia-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ia-seg .chip {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--text);
}
.ia-seg .chip.on {
  border-color: var(--red);
  background: rgb(var(--red-rgb) / 0.18);
}
.ia-days {
  margin-top: 6px;
}
.ia-prog-form .hint.warn {
  color: #f0a5a5;
}
.ia-prog-left {
  text-align: center;
}
.ia-prog-lock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(245, 179, 1, 0.45);
  background: rgba(245, 179, 1, 0.1);
}
.ia-prog-lock > .i {
  color: #f5c542;
}
.ia-prog-lock span {
  flex: 1 1 200px;
}
.ia-prog-wait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
}
.ia-prog-wait .i {
  animation: spin 1s linear infinite;
}
.ia-prog-result {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.ia-prog-last {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.ia-program-card {
  border-color: rgba(245, 179, 1, 0.45);
}

/* =========================================================
   e47 : 12 langues, choix de la langue, arabe de droite à gauche
   ========================================================= */
.lang-switch-v2 .lang-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.lang-switch-v2 .lang-current .i {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
@media (hover: hover) {
  .lang-switch-v2 .lang-current:hover {
    border-color: var(--red);
  }
}
.lang-picker {
  z-index: 3000;
}
.lang-picker h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lang-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.lang-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}
@media (hover: hover) {
  .lang-opt:hover {
    border-color: var(--border-strong);
  }
}
.lang-opt.on {
  border-color: var(--red);
  background: rgb(var(--red-rgb) / 0.14);
}
.lang-opt .i {
  width: 18px;
  height: 18px;
  color: var(--red2, #ff4a4a);
}
.lang-btn span {
  font-size: 0.74rem;
}

/* Arabe : sens de lecture de droite à gauche. Les chiffres, charges et
   graphiques restent de gauche à droite. */
[dir="rtl"] body {
  text-align: right;
}
[dir="rtl"] input[inputmode="decimal"],
[dir="rtl"] input[inputmode="numeric"],
[dir="rtl"] .stepper,
[dir="rtl"] .rpe-table,
[dir="rtl"] .muscle-map,
[dir="rtl"] canvas,
[dir="rtl"] .today-ring,
[dir="rtl"] .progress-track {
  direction: ltr;
}
[dir="rtl"] .today-workout,
[dir="rtl"] .program-card,
[dir="rtl"] .exo-card {
  text-align: right;
}
[dir="rtl"] .today-workout {
  border-left: 1px solid var(--border);
  border-right: 4px solid var(--wk);
}
[dir="rtl"] .workout-title {
  border-left: 0;
  border-right: 4px solid var(--wk, var(--red));
  padding-left: 0;
  padding-right: 10px;
}
[dir="rtl"] .chevron,
[dir="rtl"] .i-flip {
  transform: scaleX(-1);
}
/* Menus ⋮ et … : en arabe le bouton est à gauche, le menu s'ouvre donc vers l'intérieur
   (sinon il sortait de l'écran et toute la page glissait sur le côté) */
[dir="rtl"] .dropdown {
  right: auto;
  left: 0;
}
/* Lecteur de la radio : barre de progression et boutons ⏮ ⏯ ⏭ dans le sens habituel
   (comme sur tous les lecteurs de musique, même en arabe) */
[dir="rtl"] .radio-progress,
[dir="rtl"] .radio-controls {
  direction: ltr;
}
/* Langues aux mots plus longs : un bouton passe à la ligne plutôt que de déborder */
.workout-foot > * {
  min-width: 0;
}
html:not([lang="fr"]) .btn {
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}
/* En-tête des séries : poids et reps centrés au-dessus de leur case
   (un mot long dans la 1re colonne ne touche plus le suivant) */
.log-sets-head span:nth-child(2),
.log-sets-head span:nth-child(3) {
  text-align: center;
}
.log-sets-head span:first-child {
  white-space: nowrap;
}
/* Très petits écrans, autres langues : libellés de la barre un peu plus petits */
@media (max-width: 360px) {
  html:not([lang="fr"]) .tabbar-v2 .tab-item,
  html:not([lang="fr"]) .tabbar-v2 .tab-start {
    font-size: 0.62rem;
  }
}

/* =========================================================
   e48 : pages ouvertes par-dessus la radio (radio-host.js / frame-bridge.js)
   ========================================================= */
.page-layer {
  position: fixed;
  inset: 0;
  z-index: 122; /* au-dessus de la page Séances, sous le mini-lecteur (125) et le mini-chrono */
  display: none;
  background: var(--bg, #0b0b0d);
}
.page-layer-open .page-layer {
  display: block;
}
.page-layer-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg, #0b0b0d);
}
html.page-layer-open,
html.page-layer-open body {
  overflow: hidden;
}
/* Dans le cadre : de la place pour le mini-lecteur de la page du dessous */
.in-page-layer .app-main {
  padding-bottom: calc(190px + var(--safe-bottom, 0px));
}
@media (min-width: 900px) {
  .in-page-layer .app-main {
    padding-bottom: 96px;
  }
}

/* =========================================================
   e48 : nouvelle radio (lecteur en grand, ambiances en pochettes)
   ========================================================= */
.radio-v2 .radio-head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}
.radio-v2 .radio-head .eyebrow {
  margin: 0;
}
.radio-v2 .radio-intro {
  margin: 0;
}
.radio-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 18px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgb(var(--red-rgb) / 0.22), transparent 60%),
    var(--surface);
}
.radio-player:not(.is-empty) .radio-empty {
  display: none;
}
.radio-empty-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(140deg, var(--red), var(--red-deep));
  box-shadow: 0 10px 24px rgb(var(--red-rgb) / 0.35);
}
.radio-empty-icon .i {
  width: 26px;
  height: 26px;
}
.radio-empty-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.radio-empty-text small {
  color: var(--muted);
}
#radioResume span {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radio-v2 .radio-deck {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 16px;
  padding: 22px 18px 16px;
  margin-bottom: 22px;
  border-radius: 24px;
  overflow: hidden;
  /* « clip » : coupe pareil, mais le lecteur ne peut plus défiler à l'intérieur
     (iPhone : un défilement automatique décalait tout et coupait la pochette en haut) */
  overflow: clip;
  background:
    radial-gradient(140% 90% at 50% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, #141316), #0e0d10);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow: 0 24px 60px color-mix(in srgb, var(--accent) 18%, transparent);
}
.radio-backdrop {
  position: absolute;
  inset: -40px;
  z-index: -1;
  background-size: cover;
  background-position: center;
  filter: blur(42px) saturate(1.5);
  opacity: 0.42;
  transform: scale(1.15);
  transition: background-image 0.4s ease;
}
.radio-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.15), rgba(10, 10, 12, 0.85));
}
.radio-v2 .radio-now {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.radio-v2 .radio-now .radio-art {
  width: min(200px, 56vw);
  height: min(200px, 56vw);
  border-radius: 20px;
  object-fit: cover;
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.radio-v2 .radio-now .radio-art-empty .i {
  width: 64px;
  height: 64px;
}
.radio-v2.is-playing .radio-now .radio-art {
  animation: radio-breathe 3.2s ease-in-out infinite;
}
.radio-v2 .radio-now-text {
  justify-items: center;
  gap: 4px;
  max-width: 100%;
}
.radio-v2 .radio-now-text small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, rgba(0, 0, 0, 0.35));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.radio-v2 .radio-now-text b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-display, inherit);
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.radio-v2 .radio-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  color: var(--muted);
}
.radio-v2 .radio-progress.hidden {
  display: none;
}
.radio-v2 .radio-progress-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
}
.radio-v2 .radio-progress-track::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}
.radio-v2 #radioProgressFill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
}
.radio-v2 #radioProgressFill::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.radio-v2 .radio-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.radio-ctl {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
@media (hover: hover) {
  .radio-ctl:hover {
    background: rgba(255, 255, 255, 0.16);
  }
}
.radio-ctl:active {
  transform: scale(0.94);
}
.radio-ctl .i {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.radio-v2 .radio-play {
  width: 78px;
  height: 78px;
  background: #fff;
  color: #0b0b0d;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 45%, transparent);
}
.radio-v2 .radio-play .i {
  width: 30px;
  height: 30px;
  fill: currentColor;
}
.radio-v2 .radio-volume {
  max-width: 420px;
  width: 100%;
  justify-self: center;
}
.radio-deck-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.radio-frame-toggle .i {
  transition: transform 0.2s ease;
}
.radio-frame-toggle[aria-expanded="true"] .i {
  transform: rotate(180deg);
}
/* Lecteur SoundCloud replié : toujours chargé (il joue), juste caché */
.radio-v2 .radio-frame {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.25s ease, opacity 0.2s ease;
}
.radio-v2 .radio-frame.open {
  height: 166px;
  opacity: 1;
}
/* Lecteur SoundCloud à sa hauteur normale : pas de bande vide sous lui une fois ouvert */
.radio-v2 .radio-frame iframe {
  height: 166px;
}
.radio-v2 .radio-frame-label {
  display: none;
}

/* Le son démarre : roue à la place de « lecture » */
.radio-play.is-starting .i,
#radioMiniToggle.is-starting .i,
.radio-card-play.is-starting .i {
  fill: none;
  animation: spin 0.9s linear infinite;
}
.radio-v2.is-starting .radio-now-text b {
  opacity: 0.75;
}

/* Le téléphone attend un toucher dans le lecteur SoundCloud */
.radio-v2 .radio-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 102, 26, 0.55);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 102, 26, 0.2), rgba(255, 102, 26, 0.1)), rgba(10, 10, 12, 0.55);
  color: #fff;
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: left;
}
.radio-v2 .radio-hint.hidden {
  display: none;
}
.radio-v2 .radio-hint b {
  color: #ffb07a;
}
.radio-v2 .radio-hint > .i {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #ff7a33;
  animation: radio-hint-bob 1.4s ease-in-out infinite;
}
.radio-v2 .radio-hint.flash {
  animation: radio-hint-flash 0.45s ease 3;
}
.radio-v2.is-blocked .radio-frame.open {
  border-radius: 14px;
  box-shadow: 0 0 0 2px #ff661a, 0 0 22px rgba(255, 102, 26, 0.45);
}
@keyframes radio-hint-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}
@keyframes radio-hint-flash {
  50% {
    border-color: #ff8a4d;
    box-shadow: 0 0 0 3px rgba(255, 102, 26, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .radio-v2 .radio-hint > .i,
  .radio-v2 .radio-hint.flash {
    animation: none;
  }
}

/* Ambiances : pochettes carrées */
.radio-v2 .radio-grid-title {
  margin: 4px 0 12px;
}
.radio-v2 .radio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 640px) {
  .radio-v2 .radio-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}
.radio-v2 .radio-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.radio-v2 .radio-card.on {
  background: none;
  border: 0;
  box-shadow: none;
}

@media (hover: hover) {
  .radio-v2 .radio-card:hover {
    background: none;
    border: 0;
    box-shadow: none;
  }
}
.radio-v2 .radio-card-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.radio-v2 .radio-card-cover.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.radio-v2 .radio-card-cover .radio-card-icon {
  width: 58px;
  height: 58px;
}
.radio-v2 .radio-card-cover .radio-card-icon .i {
  width: 28px;
  height: 28px;
}
.radio-v2 .radio-card-glyph .i {
  width: 120px;
  height: 120px;
}
@media (hover: hover) {
  .radio-v2 .radio-card:hover .radio-card-cover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
}
.radio-v2 .radio-card.on .radio-card-cover {
  box-shadow: 0 0 0 3px var(--accent), 0 18px 40px color-mix(in srgb, var(--accent) 45%, transparent);
}
.radio-card-play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #0b0b0d;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}
.radio-card-play .i {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
@media (hover: hover) {
  .radio-v2 .radio-card:hover .radio-card-play {
    transform: scale(1.08);
  }
}
.radio-v2 .radio-card.on .radio-card-play {
  background: var(--accent);
  color: #fff;
}
.radio-card-live {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.radio-v2 .radio-card-text {
  display: grid;
  gap: 2px;
  padding: 0 2px;
}
.radio-v2 .radio-card-text b {
  font-size: 0.98rem;
}
.radio-v2 .radio-card-text small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
}
.radio-v2 .radio-card-state {
  align-self: flex-start;
  margin: 0 2px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}
.radio-v2 .radio-card.on .radio-card-state {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: #fff;
}
.radio-v2 .radio-card.soon {
  opacity: 0.55;
  cursor: default;
}
.radio-v2 .radio-card.soon .radio-card-cover {
  filter: grayscale(0.6);
}

/* Ordinateur : pochette à gauche, titre à droite, commandes dessous */
@media (min-width: 900px) {
  .radio-v2 .radio-deck {
    padding: 26px 28px 20px;
  }
  .radio-v2 .radio-now {
    grid-template-columns: 200px 1fr;
    column-gap: 28px;
    justify-items: start;
    align-items: end;
    text-align: left;
  }
  .radio-v2 .radio-now .radio-art {
    width: 200px;
    height: 200px;
  }
  .radio-v2 .radio-now-text {
    justify-items: start;
    padding-bottom: 6px;
  }
  .radio-v2 .radio-now-text b {
    font-size: 2.1rem;
  }
  .radio-v2 .radio-deck > .radio-progress,
  .radio-v2 .radio-deck > .radio-controls,
  .radio-v2 .radio-deck > .radio-volume,
  .radio-v2 .radio-deck > .radio-deck-foot,
  .radio-v2 .radio-deck > .radio-vol-ios {
    margin-left: 228px;
  }
  .radio-v2 .radio-controls,
  .radio-deck-foot {
    justify-content: flex-start;
  }
  .radio-v2 .radio-volume {
    justify-self: start;
    max-width: 360px;
  }
}

/* Mini-lecteur : barre de progression et pochette vivante */
.radio-mini {
  --accent: var(--red);
  overflow: hidden;
}
.radio-mini::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) var(--progress, 0%), rgba(255, 255, 255, 0.1) 0);
}
.radio-mini.is-playing .radio-mini-art {
  box-shadow: 0 0 0 2px var(--accent);
}
#radioMiniToggle {
  background: #fff;
  color: #0b0b0d;
  border-radius: 50%;
}
#radioMiniToggle .i {
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .radio-v2 .radio-card-cover,
  .radio-v2 .radio-frame {
    transition: none;
  }
}

/* =========================================================
   e48 — Administration : barre latérale, tableau de bord, fiche membre, annonce
   ========================================================= */
.admin-main {
  max-width: 1240px;
}

.admin-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.admin-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.admin-content > .section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-content > .section.hidden {
  display: none;
}

.admin-nav {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-nav-item > span:first-of-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-nav-item .i {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

@media (hover: hover) {
  .admin-nav-item:hover {
    background: var(--surface-2);
    color: var(--text);
  }
}

.admin-nav-item.active {
  background: var(--red-soft);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--red);
}

.admin-nav-item.active .i {
  color: var(--red);
}

.admin-nav-item:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.admin-nav .count-pill {
  margin-left: 0;
}

.nav-count {
  color: var(--faint);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.nav-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.nav-dot.hidden {
  display: none;
}

@media (max-width: 899px) {
  .admin-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .admin-nav {
    top: var(--header-h);
    z-index: 20;
    flex-direction: row;
    gap: 6px;
    margin: 0 -16px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: rgba(11, 11, 13, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-padding: 0 16px;
  }

  .admin-nav::-webkit-scrollbar {
    display: none;
  }

  .admin-nav-item {
    flex: 0 0 auto;
    width: auto;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 0.86rem;
  }

  .admin-nav-item > span:first-of-type {
    overflow: visible;
  }

  .admin-nav-item.active {
    border-color: rgb(var(--red-rgb) / 0.5);
    box-shadow: none;
  }

  .nav-count {
    display: none;
  }
}

/* Téléphone : la page a 14 px de marge, la barre des onglets aussi (sinon la page glisse de côté) */
@media (max-width: 720px) {
  .admin-nav {
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
    scroll-padding: 0 14px;
  }
}

/* Tableau de bord */
.admin-hello {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.admin-hello .eyebrow::first-letter {
  text-transform: uppercase;
}

.admin-hello .section-title {
  margin: 2px 0 0;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 1480px) {
  .kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.kpi {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-solid));
}

.kpi-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-label .i {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--faint);
}

.kpi-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-sub {
  min-height: 1.1em;
  color: var(--faint);
  font-size: 0.78rem;
}

.kpi-sub.good {
  color: var(--green);
}

.kpi.is-live .kpi-label .i {
  color: var(--green);
  animation: kpiPulse 1.6s ease-in-out infinite;
}

@keyframes kpiPulse {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kpi.is-live .kpi-label .i {
    animation: none;
  }
}

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "chart chart"
    "todo top";
  gap: 14px;
}

.dash-chart {
  grid-area: chart;
}

.dash-todo {
  grid-area: todo;
}

.dash-top {
  grid-area: top;
}

@media (max-width: 760px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "todo" "chart" "top";
  }
}

.dash-grid > .panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-grid .section-title {
  margin: 0;
  font-size: 1.15rem;
}

.dash-grid .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dash-totals .stat-tile strong {
  font-size: 1.35rem;
}

.chart-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
}

@media (max-width: 760px) {
  .chart-box {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mini-chart {
  min-width: 0;
}

.mc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.mc-label {
  font-weight: 700;
  font-size: 0.92rem;
}

.mc-sum {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.mc-readout {
  min-height: 1.3em;
  margin: 2px 0 6px;
  font-variant-numeric: tabular-nums;
}

.mc-plot {
  position: relative;
  height: 120px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding-top: 14px;
  border-bottom: 1px solid var(--border-strong);
}

.mc-gridline {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  border-top: 1px solid var(--border);
  pointer-events: none;
}

.mc-max {
  position: absolute;
  top: -2px;
  right: 0;
  color: var(--faint);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.mc-bar {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  cursor: default;
  outline: none;
}

.mc-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: rgb(var(--red-rgb) / 0.55);
  transition: background 0.12s ease;
}

.mini-chart[data-key="signups"] .mc-bar::after {
  background: rgba(244, 244, 245, 0.42);
}

.mc-bar.today::after,
.mc-bar:focus-visible::after {
  background: var(--red);
}

@media (hover: hover) {
  .mc-bar:hover::after {
    background: var(--red);
  }
}

.mini-chart[data-key="signups"] .mc-bar.today::after,
.mini-chart[data-key="signups"] .mc-bar:focus-visible::after {
  background: var(--text);
}

@media (hover: hover) {
  .mini-chart[data-key="signups"] .mc-bar:hover::after {
    background: var(--text);
  }
}

.mc-bar.zero::after {
  height: 2px;
  background: var(--border-strong);
}

.mc-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--faint);
  font-size: 0.7rem;
}

.chart-legend {
  display: none;
}

.todo-list,
.top-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.todo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.todo-row > span {
  flex: 1;
  min-width: 0;
}

.todo-row > .i:first-child {
  color: var(--red);
}

.todo-row > .i:last-child {
  color: var(--faint);
}

@media (hover: hover) {
  .todo-row:hover {
    border-color: var(--border-strong);
  }
}

.todo-done {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--green-soft);
  color: var(--green);
  font-weight: 600;
}

.top-row {
  display: grid;
  grid-template-columns: 18px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .top-row:hover {
    background: var(--surface-2);
  }
}

.top-rank {
  color: var(--faint);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.top-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  font-size: 0.85rem;
}

.top-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.top-main b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-meter {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}

.top-meter i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--red);
}

.top-days {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.top-days b {
  color: var(--text);
}

/* Membres */
.members-toolbar select {
  flex: 0 1 200px;
  min-height: 42px;
}

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.chip-btn.hidden {
  display: none;
}

.chip-btn.active {
  border-color: rgb(var(--red-rgb) / 0.55);
  background: var(--red-soft);
  color: var(--text);
}

.chip-count {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.chip-btn.active .chip-count {
  color: var(--text);
}

.users-shown {
  margin: -6px 0 0;
}

@media (max-width: 560px) {
  /* d'un bord à l'autre : même marge que la page (14 px), sinon toute la page glisse de côté */
  .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 0 14px;
  }

  .chip-row::-webkit-scrollbar {
    display: none;
  }

  .chip-btn {
    flex: 0 0 auto;
  }

  .members-toolbar select {
    flex: 1 1 140px;
  }
}

button.user-avatar {
  width: 46px;
  padding: 0;
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

button.user-avatar:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Fiche membre */
.member-sheet {
  max-width: 600px;
}

.member-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.member-head > div {
  min-width: 0;
}

.member-head h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-head p {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.member-avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  font-size: 1.3rem;
}

.member-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.member-badges:empty {
  display: none;
}

.member-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.member-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.member-stats strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.member-stats span {
  color: var(--muted);
  font-size: 0.74rem;
}

.member-h {
  margin: 6px 0 -4px;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.member-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.member-dl > div {
  display: grid;
  grid-template-columns: minmax(120px, 40%) minmax(0, 1fr);
  gap: 12px;
  padding: 9px 12px;
}

.member-dl > div + div {
  border-top: 1px solid var(--border);
}

.member-dl dt {
  color: var(--muted);
  font-size: 0.86rem;
}

.member-dl dd {
  margin: 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.member-actions {
  flex-wrap: wrap;
}

.member-actions .btn {
  flex: 1 1 120px;
}

@media (max-width: 480px) {
  .member-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Journal */
.logs-toolbar select {
  flex: 0 1 240px;
  min-height: 42px;
}

.log-day {
  margin: 10px 0 0;
  color: var(--faint);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.log-day:first-child {
  margin-top: 0;
}

.log-row {
  border-left: 3px solid var(--green);
}

.log-row.tone-bad {
  border-left-color: var(--red);
}

.log-row.tone-quiet {
  border-left-color: var(--border-strong);
}

/* Annonce (admin) */
.announce-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.announce-form textarea {
  resize: vertical;
}

.announce-form #announceLeft {
  float: right;
  font-variant-numeric: tabular-nums;
}

.announce-preview {
  padding: 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.announce-preview .fr-announce {
  margin: 0;
}

.announce-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.announce-current {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.announce-current .fr-announce {
  align-self: stretch;
  margin: 0;
}

.announce-live {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-weight: 700;
}

/* Bandeau d'annonce (toutes les pages) */
.fr-announce {
  --ann: var(--red);
  --ann-soft: var(--red-soft);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 -12px;
  padding: 12px 8px 12px 14px;
  border: 1px solid color-mix(in srgb, var(--ann) 40%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--ann-soft), rgba(255, 255, 255, 0.02));
  animation: annIn 0.28s ease;
}

.fr-announce.lvl-info {
  --ann: #3d8bff;
  --ann-soft: rgba(61, 139, 255, 0.13);
}

.fr-announce.lvl-success {
  --ann: var(--green);
  --ann-soft: var(--green-soft);
}

.fr-announce.lvl-warning {
  --ann: var(--yellow);
  --ann-soft: var(--yellow-soft);
}

.fr-announce.leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes annIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.fr-announce-ic {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ann-soft);
  color: var(--ann);
}

.fr-announce-ic .i {
  width: 17px;
  height: 17px;
}

.fr-announce-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding-top: 5px;
}

.fr-announce-body p {
  margin: 0;
  flex: 1 1 220px;
  font-size: 0.92rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.fr-announce-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ann);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.fr-announce-link .i {
  width: 15px;
  height: 15px;
}

@media (hover: hover) {
  .fr-announce-link:hover {
    text-decoration: underline;
  }
}

.fr-announce-x {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-height: 32px;
  color: var(--muted);
}

[dir="rtl"] .fr-announce {
  background: linear-gradient(270deg, var(--ann-soft), rgba(255, 255, 255, 0.02));
}

@media (prefers-reduced-motion: reduce) {
  .fr-announce {
    animation: none;
  }
}

/* e48 — Fiche, Rôles, Premium, Supprimer : retour à la ligne au lieu de se chevaucher */
.user-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
}

/* e48b — Images de la radio : carrées, comme les pochettes de la page Musique */
.radio-admin-thumb {
  width: 44px;
  height: 44px;
}

.radio-img-preview {
  width: 120px;
  aspect-ratio: 1;
}

/* e48d — Carte du jour, jour de repos : la prochaine séance s'ouvre (flèche au lieu de 0/5) */
.today-later {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

[dir="rtl"] .today-later .i {
  transform: scaleX(-1);
}

/* e49 — Encart sous la carte du jour : de l'air avant « Mes séances » */
#viewSeances > .ad-slot:not(:empty),
#viewSeances > .ad-slot.reserved {
  margin-bottom: 26px;
}

/* =========================================================
   e50 — Téléphone : iPhone à l'horizontale, rien sous l'encoche
   (la page va d'un bord à l'autre de l'écran : on garde la marge de sécurité)
   ========================================================= */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .app-header-inner,
  .app-main {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}

/* Calculateur de disques : « 20 kg (olympique) », « Machine à disques (presse, hack…) » lisibles en entier */
@media (max-width: 480px) {
  .plates-inputs {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   e51 — Ordinateur : navigation dans une barre à gauche
   Icônes seules ; au survol (ou au clavier) la barre s'ouvre par-dessus la page
   avec le nom à côté de chaque icône.
   ========================================================= */
@media (min-width: 900px) {
  body.side-nav-on {
    padding-inline-start: 76px;
  }

  .side-nav,
  .desk-nav.side-nav {
    position: fixed;
    z-index: 70;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 76px;
    display: flex;
    flex-direction: column;
    border-top: 0;
    border-inline-end: 1px solid var(--border);
    background: rgba(11, 11, 13, 0.97);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    transition: width 0.2s ease, box-shadow 0.2s ease;
  }

  .side-nav::-webkit-scrollbar {
    display: none;
  }

  body:not(.side-nav-on) .side-nav {
    display: none;
  }

  .side-nav:hover,
  .side-nav:focus-within {
    width: 240px;
    box-shadow: 18px 0 44px rgba(0, 0, 0, 0.55);
  }

  .side-nav .desk-nav-inner {
    flex: 1;
    max-width: none;
    margin: 0;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
  }

  .side-nav .desk-tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .side-nav .desk-tab,
  .side-nav .desk-start,
  .side-tool {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    min-height: 48px;
    padding: 0 15px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .side-nav .desk-tab .i,
  .side-nav .desk-start .i,
  .side-tool .i {
    flex: none;
    width: 22px;
    height: 22px;
  }

  /* page en cours : fond rouge léger (le rouge plein reste pour « Démarrer la séance ») */
  .side-nav .desk-tab.active {
    color: #fff;
    background: rgb(var(--red-rgb) / 0.16);
    box-shadow: inset 3px 0 0 var(--red);
  }

  [dir="rtl"] .side-nav .desk-tab.active {
    box-shadow: inset -3px 0 0 var(--red);
  }

  .side-nav .desk-tab.active .i {
    color: var(--red2, #ff4a4a);
  }

  .side-nav .desk-start {
    margin-bottom: 10px;
    color: #fff;
    background: var(--red);
    box-shadow: 0 8px 22px rgb(var(--red-rgb) / 0.3);
  }

  .side-label {
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .side-nav:hover .side-label,
  .side-nav:focus-within .side-label {
    opacity: 1;
    transition-delay: 0.05s;
  }

  .side-tools {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }

  .side-tool[hidden] {
    display: none;
  }

  /* pastille des messages : sur l'icône quand la barre est fermée */
  .side-tool .msg-badge {
    top: 6px;
    inset-inline-start: 30px;
    right: auto;
  }

  .side-nav:hover .side-tool .msg-badge,
  .side-nav:focus-within .side-tool .msg-badge {
    top: 50%;
    inset-inline-start: auto;
    inset-inline-end: 12px;
    transform: translateY(-50%);
  }

  .side-nav .desk-tab:focus-visible,
  .side-nav .desk-start:focus-visible,
  .side-tool:focus-visible {
    outline: 2px solid var(--red2, #ff4a4a);
    outline-offset: -2px;
  }

  /* Ce qui est passé dans la barre n'est plus répété en haut */
  .app-header .side-moved {
    display: none !important;
  }
}

@media (min-width: 900px) and (hover: hover) {
  .side-nav .desk-tab:not(.active):hover,
  .side-tool:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
  }

  .side-nav .desk-start:hover {
    background: var(--red-hover);
  }
}

/* e53 — Visite guidée des onglets (tour.js) */
.tour-root {
  position: fixed;
  inset: 0;
  z-index: 2500;
}
.tour-shade {
  position: absolute;
  inset: 0;
}
.tour-spot {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72);
  outline: 2px solid rgb(var(--red-rgb) / 0.9);
  outline-offset: 0;
  pointer-events: none;
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.tour-center .tour-spot {
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  outline: 0;
}
.tour-card {
  position: fixed;
  max-width: calc(100vw - 32px);
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: #17171b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  color: #f3f3f5;
  transition: left 0.25s ease, top 0.25s ease;
}
.tour-count {
  margin: 0 0 4px;
}
.tour-title {
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.tour-text {
  margin: 0 0 14px;
  color: rgba(243, 243, 245, 0.82);
  line-height: 1.45;
}
.tour-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tour-gap {
  flex: 1;
}
.tour-root .btn.hidden {
  display: none;
}
/* la barre de gauche reste ouverte quand on présente un de ses onglets */
html.tour-on .side-nav:has(.tour-target) {
  width: 240px;
}
html.tour-on .side-nav:has(.tour-target) .side-label {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .tour-spot,
  .tour-card {
    transition: none;
  }
}
.tour-replay {
  margin-top: 12px;
}

/* e53 — Fonctions Premium du profil */
.section-head .badge-premium {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.section-head .badge-premium .i {
  width: 12px;
  height: 12px;
}
.prem-teaser {
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 204, 0, 0.4);
  background: rgba(255, 204, 0, 0.05);
}
.prem-teaser-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-weight: 700;
}
.prem-teaser-title .i {
  width: 16px;
  height: 16px;
  color: #ffd84d;
}
.prem-teaser ul {
  margin: 0 0 12px;
  padding-inline-start: 18px;
  color: var(--muted);
}
.prem-teaser li + li {
  margin-top: 4px;
}

/* Couleur de l'appli */
.accent-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  margin: 4px 0 8px;
}
.accent-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.accent-swatch[aria-checked="true"] {
  border-color: var(--sw);
  box-shadow: 0 0 0 1px var(--sw) inset;
}
.accent-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sw);
  color: #fff;
}
.accent-dot .i {
  width: 16px;
  height: 16px;
}
.accent-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accent-swatch.locked {
  opacity: 0.6;
}
.accent-swatch:focus-visible {
  outline: 2px solid var(--sw);
  outline-offset: 2px;
}

/* Statistiques avancées */
.adv-title {
  margin: 18px 0 8px;
  font-size: 0.95rem;
}
.adv-stats .adv-title:first-child,
#advStatsBody > .adv-title:first-child {
  margin-top: 4px;
}
.stat-grid.compact.adv-month {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .stat-grid.compact.adv-month {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.adv-delta {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--faint);
}
.adv-delta.up {
  color: var(--green);
}
.adv-delta.down {
  color: #ff8a8a;
}
.adv-bars {
  display: grid;
  gap: 8px;
}
.adv-bar {
  display: grid;
  grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
}
.adv-bar-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adv-bar-track {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.adv-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--red);
}
.adv-bar-val {
  min-width: 2.5em;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Photos de progression */
.pp-private {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
}
.pp-private .i {
  width: 14px;
  height: 14px;
  flex: none;
}
.pp-add {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.pp-add .field {
  flex: 1 1 140px;
  margin: 0;
}
.pp-add .btn {
  flex: 1 1 180px;
}
.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.pp-thumb {
  position: relative;
  display: block;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  aspect-ratio: 3 / 4;
}
.pp-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-thumb span {
  position: absolute;
  inset: auto 0 0;
  padding: 14px 6px 5px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  color: #fff;
  font-size: 0.7rem;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.pp-pair figure {
  margin: 0;
  min-width: 0;
}
.pp-pair img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  background: var(--surface-2);
}
.pp-pair figcaption {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}
.pp-pair figcaption b {
  color: var(--text);
}
.pp-gap {
  margin: 8px 0 0;
  text-align: center;
}
.pp-viewer-img {
  display: block;
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
}

/* e54 — Illustration animée des exercices */
.exo-info-media.is-anim {
  background: #111114;
}
.xa-box {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 280px;
}
.xa-svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* e55 — muscle qui travaille : couleur de l'appli */
.xa-svg .xa-on {
  fill: var(--red);
}
.xa-switch {
  position: absolute;
  inset-inline-end: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(11, 11, 13, 0.7);
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.xa-switch .i {
  width: 14px;
  height: 14px;
}

/* e54 — Envoi automatique des pas, en étapes numérotées */
.sync-flow {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.sync-flow > li {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 12px;
  padding-inline-start: 46px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.sync-flow > li::before {
  content: attr(data-n);
  position: absolute;
  inset-inline-start: 12px;
  top: 11px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
}
.sync-flow > li p {
  margin: 0;
}
.sync-flow > li .btn {
  justify-self: start;
}
.sync-flow .sync-key {
  margin: 2px 0 0;
}

/* e54 — Suivi Hyrox */
.hyrox-run-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hx-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hx-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
  padding: 4px 0;
}
.hx-bar {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}
.hx-bar-fill {
  width: 100%;
  max-width: 42px;
  border-radius: 8px 8px 3px 3px;
  background: var(--surface-3);
}
.hx-bar.best .hx-bar-fill {
  background: var(--red);
}
.hx-bar b {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.hx-bar small {
  font-size: 0.66rem;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hx-rows {
  display: grid;
  gap: 2px;
}
.hx-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.hx-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.hx-row b {
  font-variant-numeric: tabular-nums;
}
.hx-total {
  border-bottom: 0;
  font-weight: 700;
}
.hx-delta {
  min-width: 3.6em;
  text-align: end;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}
.hx-delta.up {
  color: var(--green);
}
.hx-delta.down {
  color: #ff8a8a;
}

/* e54 — Programme sur plusieurs semaines */
.cycle-field {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
}
.cycle-field > summary {
  cursor: pointer;
  list-style: none;
}
.cycle-field > summary::-webkit-details-marker {
  display: none;
}
.cycle-field[open] > summary {
  margin-bottom: 10px;
}
.session-item.off-week,
.tab-btn.off-week {
  opacity: 0.55;
}

/* e54 — Coaching : suivi, objectifs, commentaires */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.assid-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 120px;
}
.assid-bar {
  flex: 1 1 0;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}
.assid-fill {
  width: 100%;
  max-width: 46px;
  border-radius: 8px 8px 3px 3px;
  background: var(--surface-3);
}
.assid-bar.full .assid-fill {
  background: var(--green);
}
.assid-bar b {
  font-size: 0.8rem;
}
.assid-bar small {
  font-size: 0.68rem;
  color: var(--faint);
}
.coach-top b.up {
  color: var(--green);
}
.coach-top b.down {
  color: #ff8a8a;
}
.goal-form .grid-2 {
  margin-bottom: 4px;
}
.goal-list {
  display: grid;
  gap: 10px;
}
.goal-row {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.goal-row.done {
  border-color: rgba(75, 211, 123, 0.45);
}
.goal-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.goal-kind {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.goal-title {
  overflow-wrap: anywhere;
}
.goal-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.goal-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--red);
}
.goal-row.done .goal-bar span {
  background: var(--green);
}
.goal-note {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  font-style: italic;
}
.goal-actions {
  display: flex;
  justify-content: flex-end;
}
.cmt-zone,
.cmt-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.cmt-day {
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.cmt {
  max-width: 92%;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surface-3);
}
.cmt.mine {
  justify-self: end;
  background: var(--red-soft);
}
.cmt p {
  margin: 0 0 2px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cmt-form {
  display: flex;
  gap: 6px;
}
.cmt-form input {
  flex: 1 1 auto;
  min-width: 0;
}
.coach-home-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.coach-home-note > .i {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--red);
}
.coach-home-note > div {
  flex: 1 1 auto;
  min-width: 0;
}
.coach-home-note p {
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.coach-home-note {
  color: inherit;
  text-decoration: none;
}
.cycle-field > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cycle-field > summary .field-label {
  margin: 0;
}
@media (max-width: 640px) {
  #clientTabs.client-tabs-5 {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #clientTabs.client-tabs-5::-webkit-scrollbar {
    display: none;
  }
  #clientTabs.client-tabs-5 .segment {
    flex: 1 0 auto;
    padding: 0 12px;
    overflow: visible;
    white-space: nowrap;
  }
}

/* e57 — Proposer un exercice */
.suggest-form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
.muscle-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.muscle-pick button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--muted);
  font: 700 0.85rem/1 var(--font);
  cursor: pointer;
}
.muscle-pick button[aria-pressed="true"] {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}
.muscle-pick button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
.form-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgb(var(--red-rgb) / 0.45);
  background: rgb(var(--red-rgb) / 0.1);
  color: var(--text);
  font-size: 0.88rem;
}
.suggest-mine {
  margin-top: 18px;
}
.suggest-mine h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}
.suggest-list {
  display: grid;
  gap: 8px;
}
.suggest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.suggest-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.suggest-row b {
  overflow-wrap: anywhere;
}
.suggest-status {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.suggest-status.is-approved {
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
}
.suggest-status.is-rejected {
  background: rgb(var(--red-rgb) / 0.16);
  color: var(--text);
}
.lib-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
}
/* e57 — admin : propositions d'exercices */
.exo-sg-card {
  display: grid;
  gap: 12px;
}
.exo-sg-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.exo-sg-head h3 {
  margin: 0 0 2px;
}
.exo-sg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 16px;
}
.exo-sg-fields {
  display: grid;
  gap: 10px;
}
.exo-sg-anim {
  display: grid;
  gap: 8px;
  align-content: start;
}
.exo-sg-preview {
  border-radius: 12px;
  overflow: hidden;
  background: #111114;
  display: grid;
  place-items: center;
}
.exo-sg-noanim {
  margin: 0;
}
.custom-exo-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.custom-exo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.custom-exo-row > div {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.custom-exo-row.is-hidden {
  opacity: 0.55;
}
@media (max-width: 760px) {
  .exo-sg-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   e63 : vidéos « Comment ça marche » (une par page)
   ========================================================= */
.howto-row {
  display: flex;
  margin: 2px 0 14px;
}
.howto-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  border: 1px solid rgb(var(--red-rgb) / 0.45);
  background: rgb(var(--red-rgb) / 0.12);
  color: var(--text, #fff);
  font: 600 0.88rem/1 var(--font);
  cursor: pointer;
}
.howto-pill .i {
  width: 24px;
  height: 24px;
  padding: 6px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
}
.howto-pill:hover {
  background: rgb(var(--red-rgb) / 0.2);
}
.howto-pill:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.howto-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}
.today-card .howto-row {
  margin: 10px 0 0;
}
.howto-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.92);
  animation: fadeIn 0.2s ease;
}
.howto-backdrop.hidden {
  display: none;
}
.howto-frame {
  position: relative;
  width: min(100vw, calc(100dvh * 780 / 1688));
  height: min(100dvh, calc(100vw * 1688 / 780));
  background: #000;
  animation: sheetIn 0.3s ease;
}
.howto-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.howto-close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 10px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 10, 12, 0.7);
  color: #fff;
  cursor: pointer;
}
.howto-close .i {
  width: 20px;
  height: 20px;
}
body.howto-open {
  overflow: hidden;
}
@media (min-width: 700px) {
  .howto-frame {
    height: min(92dvh, calc(100vw * 1688 / 780));
    width: min(100vw, calc(92dvh * 780 / 1688));
    border-radius: 22px;
    overflow: hidden;
  }
}

/* =========================================================
   e64 : corbeille des séances, bilan revu plus tard
   ========================================================= */
.trash-row {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.trash-row .count-pill {
  margin-left: 2px;
}
.trash-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.trash-item {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-left: 4px solid var(--w-color, var(--red));
  background: rgba(255, 255, 255, 0.03);
}
.trash-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.trash-name {
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.trash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cal-day-summary {
  margin-top: 8px;
}
#summaryAgainBtn {
  grid-column: 1 / -1;
}

/* e69 : signaler / bloquer un membre */
.profile-social .social-more {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-social .social-more .btn {
  opacity: 0.8;
}
.report-reasons {
  display: grid;
  gap: 6px;
}
.report-reason,
.report-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
}
.report-reason:has(input:checked) {
  border-color: var(--red);
  background: var(--red-soft);
}
.report-reason input,
.report-block input {
  -webkit-appearance: auto;
  appearance: auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  accent-color: var(--red);
  flex: none;
}
.report-reason span,
.report-block span {
  flex: 1;
  min-width: 0;
}
.report-block {
  margin-top: 12px;
  border-style: dashed;
}
#reportDetails {
  width: 100%;
  resize: vertical;
}

/* e69 : appli des stores (Capacitor) : pas de bouton « Installer l'appli » ni d'instructions d'installation
   (e82 : la connexion Google y passe par le navigateur du téléphone) */
.is-native #installBtn {
  display: none !important;
}

/* e70 : signaler une animation qui bugue (coin haut de l'animation) */
.xa-report {
  position: absolute;
  inset-inline-end: 8px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(11, 11, 13, 0.7);
  color: var(--muted, #a3a8b0);
  cursor: pointer;
}
.xa-report:hover,
.xa-report:focus-visible {
  color: var(--text);
  border-color: var(--red);
}
.xa-report .i {
  width: 15px;
  height: 15px;
}

/* e70 : animation signalée, vue depuis l'admin */
.report-anim-media {
  margin-bottom: 12px;
}

/* e72 : rôle dans l'équipe de modération (fenêtre Rôles de l'admin) */
.staff-roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}

/* =========================================================
   e74
   ========================================================= */
/* Barres de défilement fines et sombres partout (Windows affichait les grises à flèches) */
:root {
  color-scheme: dark;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
* {
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
::-webkit-scrollbar-button {
  display: none;
}

/* Menu ordinateur : Premium en doré */
.side-tool.side-premium .i {
  color: var(--yellow, #ffcc00);
}
.side-tool.side-premium[aria-current="page"] {
  color: #fff;
  background: rgb(255 204 0 / 0.12);
}

/* Radio : la pochette et son disque vinyle, qui sort et tourne pendant la lecture */
.radio-vinyl {
  --s: min(190px, 50vw);
  position: relative;
  display: block;
  width: calc(var(--s) * 1.55);
  height: var(--s);
  text-align: start;
}
.radio-v2 .radio-now .radio-vinyl > .radio-art {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--s);
  height: var(--s);
  animation: none;
}
.radio-vinyl-disc {
  position: absolute;
  top: 3%;
  left: calc(var(--s) * 0.03);
  width: calc(var(--s) * 0.94);
  height: calc(var(--s) * 0.94);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 40%, rgba(255, 255, 255, 0.05) 40.5% 41.5%, transparent 42%),
    repeating-radial-gradient(circle, #0d0d0f 0 1.2px, #1a1a1d 1.2px 2.6px);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.6),
    inset 0 0 0 2px rgba(255, 255, 255, 0.05);
  transform: translateX(calc(var(--s) * 0.1));
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* reflets : fixes pendant que le disque tourne */
.radio-vinyl-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, 0.1) 13%, transparent 20% 52%, rgba(255, 255, 255, 0.08) 63%, transparent 70%);
  pointer-events: none;
}
.radio-vinyl-label {
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  background-color: var(--accent);
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5);
  animation: radio-spin 3.6s linear infinite;
  animation-play-state: paused;
}
/* trou central */
.radio-vinyl-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12%;
  height: 12%;
  border-radius: 50%;
  background: #0b0b0d;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
  transform: translate(-50%, -50%);
}
.radio-v2.is-playing .radio-vinyl-disc {
  transform: translateX(calc(var(--s) * 0.56));
}
.radio-v2.is-playing .radio-vinyl-label {
  animation-play-state: running;
}
@keyframes radio-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .radio-vinyl-label {
    animation: none;
  }
  .radio-vinyl-disc {
    transition: none;
  }
}
@media (min-width: 900px) {
  .radio-vinyl {
    --s: 200px;
  }
  .radio-v2 .radio-now {
    grid-template-columns: 310px 1fr;
  }
  .radio-v2 .radio-deck > .radio-progress,
  .radio-v2 .radio-deck > .radio-controls,
  .radio-v2 .radio-deck > .radio-volume,
  .radio-v2 .radio-deck > .radio-deck-foot,
  .radio-v2 .radio-deck > .radio-vol-ios {
    margin-left: 338px;
  }
  [dir="rtl"] .radio-v2 .radio-deck > .radio-progress,
  [dir="rtl"] .radio-v2 .radio-deck > .radio-controls,
  [dir="rtl"] .radio-v2 .radio-deck > .radio-volume,
  [dir="rtl"] .radio-v2 .radio-deck > .radio-deck-foot,
  [dir="rtl"] .radio-v2 .radio-deck > .radio-vol-ios {
    margin-left: 0;
    margin-right: 338px;
  }
}

/* Radio : reculer / avancer de 10 secondes */
.radio-ctl.radio-skip {
  width: 44px;
  height: 44px;
  background: none;
}
.radio-ctl.radio-skip .i,
.radio-mini-skip .i {
  fill: none;
}
.radio-v2 .radio-controls {
  gap: clamp(10px, 3.4vw, 22px);
}

/* Mini-lecteur : précédent, -10 s, lecture, +10 s, suivant */
.radio-mini-ctl {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
}
.radio-mini-ctl .icon-btn {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border: 0;
  background: none;
}
.radio-mini-ctl .icon-btn .i {
  width: 18px;
  height: 18px;
}
#radioMiniPrev .i,
#radioMiniNext .i {
  fill: currentColor;
}
.radio-mini-ctl #radioMiniToggle {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  background: #fff;
}
@media (max-width: 360px) {
  #radioMiniPrev {
    display: none;
  }
}
@media (min-width: 900px) {
  .radio-mini {
    width: 410px;
  }
}

/* Écran de démarrage : logo qui apparaît avec un halo, barre de progression au lieu de la roue */
.boot-screen {
  gap: 22px;
}
.boot-logo {
  position: relative;
  animation: boot-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.boot-logo::before {
  content: "";
  position: absolute;
  inset: -18% -30%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(var(--red-rgb) / 0.32), transparent 72%);
  animation: boot-halo 2.4s ease-in-out infinite;
}
@keyframes boot-in {
  from {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes boot-halo {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}
.boot-screen .boot-spinner {
  position: relative;
  width: min(200px, 52vw);
  height: 4px;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  animation: boot-in 0.55s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.boot-screen .boot-spinner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), #ff6a3d);
  box-shadow: 0 0 12px rgb(var(--red-rgb) / 0.7);
  animation: boot-fill 8s cubic-bezier(0.08, 0.7, 0.2, 1) forwards;
}
.boot-screen .boot-spinner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: boot-shine 1.3s ease-in-out infinite;
}
.boot-screen.fade .boot-spinner::before {
  width: 88%;
  animation: boot-done 0.25s ease-out forwards;
}
@keyframes boot-fill {
  to {
    width: 88%;
  }
}
@keyframes boot-done {
  to {
    width: 100%;
  }
}
@keyframes boot-shine {
  to {
    left: 100%;
  }
}
.boot-screen p {
  min-height: 1.4em;
  margin: 0;
  animation: boot-in 0.55s 0.25s ease both;
  transition: opacity 0.25s ease;
}
.boot-screen p.swap {
  opacity: 0;
}
.boot-screen.fade .boot-logo {
  transform: scale(1.04);
  transition: transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .boot-logo,
  .boot-logo::before,
  .boot-screen .boot-spinner,
  .boot-screen .boot-spinner::after,
  .boot-screen p {
    animation: none;
  }
}

/* Diète : une photo d'assiette = une seule ligne, avec ses aliments dessous */
.food-row.is-plate .food-row-main strong .i {
  width: 15px;
  height: 15px;
  margin-inline-end: 6px;
  color: var(--red2, #ff4a4a);
  vertical-align: -2px;
}
.food-row-main small.food-row-plate {
  margin-top: 3px;
  color: var(--faint, #8a8a92);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.photo-plate {
  display: grid;
  gap: 10px;
  margin: 4px 0 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.photo-plate .field {
  margin: 0;
}

/* =========================================================
   e76 — Messages : réponses, réactions, modifier, supprimer
   ========================================================= */
.chat-conv {
  position: relative;
}
.bubble-row {
  position: relative;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
}
.bubble-row.mine {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
/* coins : bulles qui se suivent collées comme un bloc */
.bubble-row.follows:not(.mine) .bubble {
  border-top-left-radius: 6px;
}
.bubble-row.mine.follows .bubble {
  border-top-right-radius: 6px;
}
.bubble-row.grouped:not(.mine) .bubble {
  border-bottom-left-radius: 6px;
}
.bubble-row.mine.grouped .bubble {
  border-bottom-right-radius: 6px;
}
.bubble-row.grouped {
  margin-bottom: 2px;
}
.bubble p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.bubble-row:not(.mine) .bubble p a {
  color: #ff8080;
}
.bubble-edited {
  font-style: italic;
}
/* message supprimé */
.bubble-row.deleted .bubble {
  background: transparent !important;
  border: 1px dashed var(--border-strong);
  color: var(--muted);
}
.bubble-row.deleted .bubble p {
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bubble-row.deleted .bubble p .i {
  width: 14px;
  height: 14px;
}
/* citation */
.bubble-quote {
  display: grid;
  flex: 1 1 100%;
  gap: 1px;
  min-width: 0;
  margin: 2px 0 4px;
  padding: 6px 10px;
  border: 0;
  border-inline-start: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.bubble-row:not(.mine) .bubble-quote {
  border-inline-start-color: var(--red2, #ff4a4a);
  background: rgba(255, 255, 255, 0.06);
}
.bubble-quote b {
  font-size: 0.72rem;
}
.bubble-quote span {
  overflow: hidden;
  font-size: 0.8rem;
  opacity: 0.85;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bubble-row.flash .bubble {
  animation: bubble-flash 1.2s ease;
}
@keyframes bubble-flash {
  0%,
  40% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
/* bouton « ⋯ » : au survol (ordinateur) */
.bubble-act {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.bubble-act .i {
  width: 16px;
  height: 16px;
}
.bubble-row:hover .bubble-act,
.bubble-row.acting .bubble-act,
.bubble-act:focus-visible {
  opacity: 1;
}
.bubble-act:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
@media (hover: none) {
  .bubble-act {
    display: none;
  }
}
.bubble-row.acting .bubble {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
/* réactions sous la bulle */
.bubble-reacts {
  display: flex;
  flex: 1 1 100%;
  gap: 4px;
  margin: -4px 10px 4px;
  position: relative;
  z-index: 1;
}
.bubble-row.mine .bubble-reacts {
  justify-content: flex-end;
}
.react-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.react-chip .i {
  width: 14px;
  height: 14px;
  color: var(--red2, #ff4a4a);
}
.react-chip.mine {
  border-color: var(--red2, #ff4a4a);
  background: rgb(var(--red-rgb) / 0.16);
}
/* menu d'un message */
.msg-actions {
  position: fixed;
  z-index: 1300;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: rgba(24, 23, 27, 0.98);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  animation: msg-pop 0.14s ease-out;
}
@keyframes msg-pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
.msg-actions > button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: start;
  cursor: pointer;
}
.msg-actions > button:hover,
.msg-actions > button:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}
.msg-actions > button.danger {
  color: var(--danger-hover, #ff6b6b);
}
.msg-actions .i {
  width: 18px;
  height: 18px;
}
.msg-react-row {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  padding: 2px 2px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.msg-react-row button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.msg-react-row button:hover {
  transform: scale(1.12);
  background: rgba(255, 255, 255, 0.1);
}
.msg-react-row button.on {
  background: rgb(var(--red-rgb) / 0.25);
  color: var(--red2, #ff4a4a);
}
.msg-react-row .i {
  width: 20px;
  height: 20px;
}
/* bandeau « Répondre à » / « Modifier » au-dessus de la saisie */
.chat-reply-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.chat-reply-bar.hidden {
  display: none;
}
.chat-reply-bar > .i {
  flex: none;
  color: var(--red2, #ff4a4a);
}
.chat-reply-text {
  display: grid;
  flex: 1;
  min-width: 0;
}
.chat-reply-text b {
  font-size: 0.8rem;
}
.chat-reply-text span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* bouton « derniers messages » */
.chat-jump {
  position: absolute;
  right: 16px;
  bottom: 86px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: rgba(24, 23, 27, 0.95);
  color: var(--text);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.chat-jump.hidden {
  display: none;
}
.chat-jump span:empty {
  display: none;
}
.chat-jump span {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}
/* « écrit… » avec trois points animés */
.chat-typing {
  display: flex;
  align-items: center;
  gap: 6px;
}
.typing-dots {
  display: inline-flex;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--surface-3);
}
.typing-dots b {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  animation: typing-dot 1.1s infinite ease-in-out;
}
.typing-dots b:nth-child(2) {
  animation-delay: 0.15s;
}
.typing-dots b:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes typing-dot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
.conv-item.deleted .conv-preview {
  font-style: italic;
}
.conv-none {
  padding: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots b,
  .msg-actions,
  .bubble-row.flash .bubble {
    animation: none;
  }
}

/* =========================================================
   e77 — Offrir Premium
   ========================================================= */
.gift-form,
.gift-mine,
.gift-landing {
  display: grid;
  gap: 14px;
}
.gift-form.hidden,
.gift-mine.hidden,
.gift-landing.hidden {
  display: none;
}
.gift-head,
.gift-land-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gift-head .section-title {
  margin: 0;
}
.gift-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--yellow, #ffcc00), #ff8a00);
  color: #1a1206;
  box-shadow: 0 10px 26px rgb(255 170 0 / 0.3);
}
.gift-icon .i {
  width: 24px;
  height: 24px;
}
.gift-offers .prem-offer {
  padding: 12px;
}
.gift-offers .prem-offer strong {
  font-size: 1.1rem;
}
.gift-to {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px) {
  .gift-to {
    grid-template-columns: 1fr;
  }
}
.gift-to-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.gift-to-opt .i {
  flex: none;
  margin-top: 2px;
}
.gift-to-opt span {
  display: grid;
  gap: 2px;
}
.gift-to-opt small {
  color: var(--muted);
  font-size: 0.76rem;
}
.gift-to-opt.on {
  border-color: var(--yellow, #ffcc00);
  box-shadow: 0 0 0 1px var(--yellow, #ffcc00) inset;
}
.gift-to-opt.on .i {
  color: var(--yellow, #ffcc00);
}
.gift-member.hidden {
  display: none;
}
.gift-picked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.gift-picked b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gift-picked.hidden,
#giftSearchBox.hidden {
  display: none;
}
.gift-results {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.gift-results.hidden {
  display: none;
}
.gift-results .person-row {
  width: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.gift-list {
  display: grid;
  gap: 8px;
}
.gift-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.gift-row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.gift-row-actions {
  display: flex;
  gap: 6px;
}
.gift-state {
  color: var(--muted);
  font-weight: 700;
}
.gift-state.paye {
  color: var(--yellow, #ffcc00);
}
.gift-state.utilise {
  color: #4bd37b;
}
.gift-landing {
  border-color: rgb(255 204 0 / 0.45);
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(255 204 0 / 0.14), transparent 60%),
    var(--surface);
}
.gift-land-title {
  display: block;
  font-size: 1.15rem;
}
.gift-land-msg {
  margin: 0;
  padding: 10px 14px;
  border-inline-start: 3px solid var(--yellow, #ffcc00);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font-style: italic;
}
.gift-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4bd37b;
}

/* =========================================================
   e78 — Style du profil Premium : cadres et couronne
   ========================================================= */
@property --fr-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.s-avatar[class*="frame-"] {
  border: 2px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.profile-avatar-wrap[class*="frame-"] .profile-avatar {
  border: 4px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.frame-or.s-avatar,
.frame-or .profile-avatar {
  background-image: linear-gradient(145deg, var(--surface-3), var(--surface-2)), linear-gradient(135deg, #fff2b0, #ffcc00 35%, #b8860b 65%, #ffe27a);
}
.frame-flamme.s-avatar,
.frame-flamme .profile-avatar {
  background-image: linear-gradient(145deg, var(--surface-3), var(--surface-2)), conic-gradient(from var(--fr-a), #ff2a2a, #ff8a00, #ffd000, #ff8a00, #ff2a2a);
  animation: fr-spin-a 3s linear infinite;
}
.frame-neon.s-avatar,
.frame-neon .profile-avatar {
  background-image: linear-gradient(145deg, var(--surface-3), var(--surface-2)), linear-gradient(var(--red2, #ff4a4a), var(--red2, #ff4a4a));
  box-shadow: 0 0 10px rgb(var(--red-rgb) / 0.7), 0 0 2px rgb(var(--red-rgb) / 0.9);
  animation: fr-neon 2.2s ease-in-out infinite;
}
.frame-glace.s-avatar,
.frame-glace .profile-avatar {
  background-image: linear-gradient(145deg, var(--surface-3), var(--surface-2)), linear-gradient(160deg, #e9fbff, #5fd4ff 45%, #2a7fff 70%, #c8f3ff);
}
.frame-arc.s-avatar,
.frame-arc .profile-avatar {
  background-image: linear-gradient(145deg, var(--surface-3), var(--surface-2)), conic-gradient(from var(--fr-a), #ff4d4d, #ffb84d, #f5ff4d, #4dff88, #4dc9ff, #8a4dff, #ff4dd2, #ff4d4d);
  animation: fr-spin-a 4s linear infinite;
}
.frame-nuit.s-avatar,
.frame-nuit .profile-avatar {
  background-image: linear-gradient(145deg, var(--surface-3), var(--surface-2)), linear-gradient(135deg, #8a5cff, #241a4d 50%, #b48cff);
}
/* la photo garde son propre fond rouge sur la page profil */
.profile-avatar-wrap[class*="frame-"] .profile-avatar {
  background-image: linear-gradient(135deg, var(--red), var(--red-deep)), var(--fr-ring, none);
}
.profile-avatar-wrap.frame-or .profile-avatar {
  background-image: linear-gradient(135deg, var(--red), var(--red-deep)), linear-gradient(135deg, #fff2b0, #ffcc00 35%, #b8860b 65%, #ffe27a);
}
.profile-avatar-wrap.frame-flamme .profile-avatar {
  background-image: linear-gradient(135deg, var(--red), var(--red-deep)), conic-gradient(from var(--fr-a), #ff2a2a, #ff8a00, #ffd000, #ff8a00, #ff2a2a);
}
.profile-avatar-wrap.frame-neon .profile-avatar {
  background-image: linear-gradient(135deg, var(--red), var(--red-deep)), linear-gradient(var(--red2, #ff4a4a), var(--red2, #ff4a4a));
}
.profile-avatar-wrap.frame-glace .profile-avatar {
  background-image: linear-gradient(135deg, var(--red), var(--red-deep)), linear-gradient(160deg, #e9fbff, #5fd4ff 45%, #2a7fff 70%, #c8f3ff);
}
.profile-avatar-wrap.frame-arc .profile-avatar {
  background-image: linear-gradient(135deg, var(--red), var(--red-deep)), conic-gradient(from var(--fr-a), #ff4d4d, #ffb84d, #f5ff4d, #4dff88, #4dc9ff, #8a4dff, #ff4dd2, #ff4d4d);
}
.profile-avatar-wrap.frame-nuit .profile-avatar {
  background-image: linear-gradient(135deg, var(--red), var(--red-deep)), linear-gradient(135deg, #8a5cff, #241a4d 50%, #b48cff);
}
@keyframes fr-spin-a {
  to {
    --fr-a: 360deg;
  }
}
@keyframes fr-neon {
  50% {
    box-shadow: 0 0 16px rgb(var(--red-rgb) / 0.9), 0 0 3px rgb(var(--red-rgb));
  }
}
/* couronne Premium, en haut à droite de la photo */
.s-avatar.has-crown::after,
.profile-avatar-wrap.has-crown::after {
  content: "";
  position: absolute;
  top: calc(var(--s, 96px) * -0.12);
  right: calc(var(--s, 96px) * -0.12);
  width: max(12px, calc(var(--s, 96px) * 0.38));
  height: max(12px, calc(var(--s, 96px) * 0.38));
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a1206'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z'/%3E%3C/svg%3E")
      center / 64% no-repeat,
    linear-gradient(135deg, #ffe27a, #ffb400);
  box-shadow: 0 0 0 2px var(--surface-solid, #121214);
  transform: rotate(18deg);
  pointer-events: none;
}
.profile-avatar-wrap.has-crown {
  --s: 96px;
}
@media (prefers-reduced-motion: reduce) {
  .frame-flamme.s-avatar,
  .frame-flamme .profile-avatar,
  .frame-arc.s-avatar,
  .frame-arc .profile-avatar,
  .frame-neon.s-avatar,
  .frame-neon .profile-avatar {
    animation: none;
  }
}

/* Objectifs */
.goals-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.goal-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}
.goal-card.done {
  border-color: rgb(75 211 123 / 0.45);
}
.goal-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.goal-title {
  flex: 1;
  min-width: 0;
}
.goal-del {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border: 0;
  background: none;
  color: var(--muted);
}
.goal-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}
.goal-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), #ff8a3d);
  transition: width 0.6s ease;
}
.goal-card.done .goal-bar span {
  background: linear-gradient(90deg, #2fb866, #6be59a);
}
.goal-nums {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
}
.goal-nums b {
  color: var(--text);
  font-size: 0.95rem;
}
.goal-line {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.goal-line .i {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.goal-line b {
  color: var(--text);
}
.goal-form {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.goal-form.hidden {
  display: none;
}
.goal-kinds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.goal-kind {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.goal-kind.on {
  border-color: var(--red2, #ff4a4a);
  color: var(--text);
  background: rgb(var(--red-rgb) / 0.12);
}
.goal-form-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
#goalAddBtn.hidden {
  display: none;
}
/* Style du profil */
.frame-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.frame-choice {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.frame-choice.on {
  border-color: var(--yellow, #ffcc00);
  color: var(--text);
}
.frame-choice.locked {
  opacity: 0.6;
}
/* Bilan PDF */
.export-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.export-row select {
  flex: 1 1 180px;
}
.btn.locked {
  opacity: 0.6;
}
.print-report {
  display: none;
}
@media print {
  body.printing-report > *:not(#printReport) {
    display: none !important;
  }
  body.printing-report {
    background: #fff !important;
  }
  body.printing-report .print-report {
    display: block;
    color: #111;
    font: 11pt/1.45 Inter, Arial, sans-serif;
  }
  .print-report h1 {
    margin: 4px 0;
    font-size: 20pt;
  }
  .print-report h2 {
    margin: 18px 0 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid #e51212;
    font-size: 13pt;
  }
  .print-report h3 {
    margin: 10px 0 4px;
    font-size: 11pt;
  }
  .print-report .rep-brand {
    margin: 0;
    font-weight: 900;
    letter-spacing: 1px;
  }
  .print-report .rep-brand span {
    color: #e51212;
  }
  .print-report .rep-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 14px 0;
  }
  .print-report .rep-kpis div {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
  }
  .print-report .rep-kpis b {
    display: block;
    font-size: 16pt;
  }
  .print-report table {
    width: 100%;
    border-collapse: collapse;
  }
  .print-report td,
  .print-report th {
    padding: 4px 6px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: top;
  }
  .print-report .rep-day {
    break-inside: avoid;
  }
  .print-report footer {
    margin-top: 20px;
    color: #777;
    font-size: 9pt;
  }
}

/* =========================================================
   e79 — Coaching : vitrine, offres, espace coaché
   ========================================================= */
.coach-tabs {
  margin-bottom: 14px;
}
.coach-tabs .segment.hidden,
.coach-tab.hidden {
  display: none;
}
.tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-inline-start: 4px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  font-size: 0.68rem;
}
.tab-count.hidden {
  display: none;
}
.coach-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.coach-empty > .i {
  width: 34px;
  height: 34px;
  color: var(--muted);
}
.find-intro p {
  margin: 0 0 6px;
}
.find-tools {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.coach-dir {
  display: grid;
  gap: 12px;
}
@media (min-width: 900px) {
  .coach-dir {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
.coach-dir-card {
  display: grid;
  gap: 10px;
}
.coach-headline {
  margin: 0;
  font-weight: 700;
}
.coach-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip.sm {
  padding: 3px 9px;
  font-size: 0.74rem;
}
.coach-bio summary {
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
}
.coach-bio p {
  margin: 6px 0 0;
  white-space: pre-wrap;
}
.coach-offers {
  display: grid;
  gap: 8px;
}
.coach-offer {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}
.coach-offer-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.coach-offer-top strong {
  color: var(--yellow, #ffcc00);
  white-space: nowrap;
}
.coach-offer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  white-space: pre-wrap;
}
.coach-offer ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}
.coach-offer li .i {
  width: 14px;
  height: 14px;
  color: #4bd37b;
  vertical-align: -2px;
}
.coach-offer .btn {
  justify-self: start;
}
.coach-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}
.coach-state.ok {
  color: #4bd37b;
}
.chip-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.my-offers {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.my-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.my-offer.off {
  opacity: 0.6;
}
.my-offer-actions {
  display: flex;
  gap: 6px;
}
.offer-form {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.offer-form.hidden {
  display: none;
}
.app-msg {
  margin: 0;
  padding: 8px 12px;
  border-inline-start: 3px solid var(--red2, #ff4a4a);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  white-space: pre-wrap;
}
/* Espace coaché */
#spacePlus {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.space-chat .section-title .i,
#spaceProgram .section-title .i,
#checkinPanel .section-title .i {
  width: 20px;
  height: 20px;
  vertical-align: -3px;
}
.space-msgs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 2px;
}
.space-msgs .bubble-row {
  margin-bottom: 4px;
}
.space-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.space-compose textarea {
  flex: 1;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  resize: none;
}
.space-wk {
  display: grid;
  gap: 6px;
}
.space-wk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
}
.space-wk-row span {
  display: grid;
}
.checkin-form {
  display: grid;
  gap: 10px;
}
.checkin-form output {
  color: var(--muted);
  font-size: 0.85rem;
}
.ck-scale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ck-scale > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.ck-scale > div {
  display: flex;
  gap: 6px;
}
.ck-scale button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.ck-scale button.on {
  border-color: var(--red2, #ff4a4a);
  background: rgb(var(--red-rgb) / 0.2);
}
.ck-history {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.ck-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.ck-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.ck-vals {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 0.85rem;
}
.ck-vals .i {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}
.ck-note {
  margin: 0;
  white-space: pre-wrap;
}
.ck-reply {
  padding: 8px 12px;
  border-inline-start: 3px solid #4bd37b;
  border-radius: 8px;
  background: rgb(75 211 123 / 0.08);
}
.ck-reply small {
  color: #4bd37b;
  font-weight: 700;
}
.ck-reply p {
  margin: 4px 0 0;
  white-space: pre-wrap;
}
.ck-reply-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.ck-reply-form textarea {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.find-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.find-specs .chip {
  white-space: nowrap;
}