/* ─────────────────────────────────────────────────────────────
   Rêves & Légendes — Design System
   Dark fantasy "grimoire moderne" — bleu nuit + or
   ───────────────────────────────────────────────────────────── */

:root {
  /* Palette */
  --rl-bg: #0f1620;            /* nuit profonde */
  --rl-bg-2: #161e2b;          /* surface */
  --rl-bg-3: #1d2738;          /* surface élevée */
  --rl-line: rgba(212, 175, 110, 0.18);
  --rl-line-strong: rgba(212, 175, 110, 0.35);
  --rl-gold: #d4af6e;          /* or chaud */
  --rl-gold-bright: #e7c98a;
  --rl-gold-deep: #a8854f;
  --rl-silver: #b9c0cc;        /* argent froid — écus des premiers rangs */
  --rl-silver-bright: #dfe4ec;
  --rl-ink: #f3ead7;           /* texte primaire chaud */
  --rl-ink-2: #c8c0ad;
  --rl-ink-3: #8b8472;
  --rl-rust: #b86a3e;          /* rouille / sang séché */
  --rl-sage: #7c9a7c;          /* vert mousse — pour "actif" */
  --rl-purple: #8d7ac0;        /* magie */
  --rl-danger: #c25555;

  /* Fonts */
  --rl-display: "Cormorant Garamond", "Cormorant", "Trajan Pro", serif;
  --rl-body: "Spectral", "Lora", Georgia, serif;
  --rl-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Geo */
  --rl-radius: 4px;
  --rl-radius-lg: 8px;
  --rl-shadow: 0 18px 40px -22px rgba(0,0,0,.7), 0 2px 0 rgba(212,175,110,.05) inset;
}

/* page wrapper */
.rl-page {
  font-family: var(--rl-body);
  color: var(--rl-ink);
  background: var(--rl-bg);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  min-height: 100vh;
  overflow: visible;
  position: relative;
}

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

.rl-page h1, .rl-page h2, .rl-page h3, .rl-page h4 {
  font-family: var(--rl-display);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--rl-ink);
}

.rl-page p { margin: 0; }
.rl-page button { font-family: inherit; cursor: pointer; }
.rl-page a { color: inherit; text-decoration: none; }

/* ─── Backdrop textures ─────────────────────────────────────── */
.rl-bg-stars {
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(212,175,110,.35), transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(212,175,110,.25), transparent 50%),
    radial-gradient(1px 1px at 40% 80%, rgba(243,234,215,.3), transparent 50%),
    radial-gradient(1.5px 1.5px at 85% 15%, rgba(212,175,110,.35), transparent 50%),
    radial-gradient(1px 1px at 10% 65%, rgba(243,234,215,.25), transparent 50%),
    radial-gradient(1.5px 1.5px at 55% 25%, rgba(212,175,110,.3), transparent 50%);
  pointer-events: none;
}

.rl-bg-grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(212,175,110,.04) 1px, transparent 0);
  background-size: 3px 3px;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ─── Navbar (shared) ───────────────────────────────────────── */
.rl-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 56px;
  border-bottom: 1px solid var(--rl-line);
  position: relative;
  z-index: 5;
}

.rl-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.rl-nav-link {
  font-family: var(--rl-display);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--rl-ink-2);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.rl-nav-link:hover { color: var(--rl-gold-bright); }
.rl-nav-link.is-active {
  color: var(--rl-gold-bright);
  border-bottom-color: var(--rl-gold);
}

.rl-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ─── Menu compte (avatar déroulant) ────────────────────────────
   Regroupe profil / déconnexion sous l'avatar pour libérer la barre.
   Voir partials/_nav_account.html.twig + toggle dans public/js/app.js. */
.rl-nav-account { position: relative; }
.rl-nav-account-btn { gap: 8px; }
.rl-nav-account-name { font-family: var(--rl-display); }
.rl-nav-account-caret { transition: transform .18s; opacity: .65; flex-shrink: 0; }
.rl-nav-account.is-open .rl-nav-account-caret { transform: rotate(180deg); }

.rl-nav-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: var(--rl-bg-2);
  border: 1px solid var(--rl-line-strong);
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  padding: 6px;
  display: none;
  flex-direction: column;
  z-index: 40;
}
.rl-nav-account.is-open .rl-nav-account-menu { display: flex; }

.rl-nav-account-head {
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--rl-line);
  margin-bottom: 5px;
}
.rl-nav-account-head-name {
  font-family: var(--rl-display);
  font-size: 16px;
  color: var(--rl-gold-bright);
  line-height: 1.1;
}
.rl-nav-account-head-sub {
  font-family: var(--rl-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rl-ink-3);
  margin-top: 4px;
}
.rl-nav-account-menu a {
  font-family: var(--rl-display);
  font-size: 15px;
  color: var(--rl-ink-2);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 4px;
  transition: background .12s, color .12s;
}
.rl-nav-account-menu a:hover { background: var(--rl-bg); color: var(--rl-gold-bright); }
.rl-nav-account-logout { color: var(--rl-ink-3) !important; }
.rl-nav-account-logout:hover { color: var(--rl-gold-bright) !important; }
.rl-nav-account-sep { height: 1px; background: var(--rl-line); margin: 5px 8px; }

/* ─── Logo ──────────────────────────────────────────────────── */
.rl-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.rl-logo-mark {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.rl-logo-text {
  display: flex; flex-direction: column; line-height: 1;
}
.rl-logo-text .title {
  font-family: var(--rl-display);
  font-size: 48px;
  font-weight: 600;
  color: var(--rl-gold-bright);
  letter-spacing: 0.02em;
}
.rl-logo-text .sub {
  font-family: var(--rl-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--rl-ink-3);
  text-transform: uppercase;
  margin-top: 3px;
}

/* ─── Buttons ───────────────────────────────────────────────── */
.rl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid var(--rl-gold);
  background: transparent;
  color: var(--rl-gold-bright);
  font-family: var(--rl-display);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--rl-radius);
  transition: background .15s, color .15s, transform .15s;
  position: relative;
}
.rl-btn:hover { background: rgba(212,175,110,.1); }
.rl-btn--solid {
  background: var(--rl-gold);
  color: var(--rl-bg);
}
/* Un <a> stylé en bouton plein doit garder son texte sombre : sans cette règle,
   « .rl-page a { color: inherit } » (spécificité supérieure) écrase la couleur du
   bouton et rend le texte clair sur fond doré (illisible). Harmonise tous les
   liens-boutons pleins du site. */
.rl-page a.rl-btn--solid { color: var(--rl-bg); }
.rl-btn--solid:hover {
  background: var(--rl-gold-bright);
}
.rl-btn--ghost {
  border-color: var(--rl-line);
  color: var(--rl-ink-2);
}
.rl-btn--ghost:hover {
  border-color: var(--rl-line-strong);
  color: var(--rl-ink);
}
.rl-btn--sm { padding: 7px 14px; font-size: 12px; }
/* Action disponible mais sans effet dans l'état courant : le bouton garde sa
   place (repère stable dans une barre d'actions) en s'effaçant visuellement.
   Volontairement PAS `disabled` — il reste cliquable, focusable et porte une
   infobulle qui explique pourquoi il n'y a rien à faire. */
.rl-btn--muted { opacity: .4; }
.rl-btn--muted:hover { opacity: .7; }

/* ─── Cards ─────────────────────────────────────────────────── */
.rl-card {
  background: var(--rl-bg-2);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  position: relative;
}
.rl-card-elev {
  background: var(--rl-bg-3);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  box-shadow: var(--rl-shadow);
}

/* gilded corners */
.rl-gilded::before,
.rl-gilded::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--rl-gold);
  pointer-events: none;
}
.rl-gilded::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.rl-gilded::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ─── Tags / Chips ──────────────────────────────────────────── */
.rl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rl-line);
  border-radius: 100px;
  font-size: 11px;
  font-family: var(--rl-mono);
  color: var(--rl-ink-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rl-chip--gold {
  border-color: var(--rl-gold);
  color: var(--rl-gold-bright);
}
.rl-chip--sage  { border-color: rgba(124,154,124,.4); color: var(--rl-sage); }
.rl-chip--rust  { border-color: rgba(184,106,62,.4); color: var(--rl-rust); }
.rl-chip--purple{ border-color: rgba(141,122,192,.4); color: var(--rl-purple); }

/* ─── Section eyebrow / divider ─────────────────────────────── */
.rl-eyebrow {
  font-family: var(--rl-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rl-gold);
}

.rl-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--rl-gold);
}
.rl-rule::before, .rl-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rl-gold) 50%, transparent);
}
.rl-rule .diamond {
  width: 7px; height: 7px;
  background: var(--rl-gold);
  transform: rotate(45deg);
}

/* ─── Image placeholders (stripey, monospace label) ─────────── */
.rl-imgslot {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(212,175,110,.06) 0 8px,
      rgba(212,175,110,.03) 8px 16px
    ),
    var(--rl-bg-3);
  border: 1px solid var(--rl-line);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.rl-imgslot .label {
  font-family: var(--rl-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--rl-ink-3);
  text-transform: uppercase;
  background: var(--rl-bg);
  padding: 4px 8px;
  border: 1px solid var(--rl-line);
}

/* ─── Form fields ───────────────────────────────────────────── */
.rl-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rl-field label {
  font-family: var(--rl-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rl-ink-3);
}
.rl-field input, .rl-field textarea, .rl-field select {
  background: var(--rl-bg);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  padding: 11px 14px;
  color: var(--rl-ink);
  font-family: var(--rl-body);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.rl-field input:focus, .rl-field textarea:focus, .rl-field select:focus {
  border-color: var(--rl-gold);
  background: var(--rl-bg-2);
}

/* ─── Zone de glisser-déposer (upload multi-fichiers, cf. app.js) ─── */
.rl-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 26px 18px;
  border: 1.5px dashed var(--rl-line);
  border-radius: var(--rl-radius);
  background: var(--rl-bg);
  color: var(--rl-ink-3);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.rl-dropzone:hover {
  border-color: var(--rl-gold);
  color: var(--rl-ink-2);
}
.rl-dropzone.is-dragover {
  border-color: var(--rl-gold);
  background: var(--rl-bg-2);
  color: var(--rl-ink);
}
.rl-dropzone.is-invalid {
  border-color: var(--rl-danger);
  border-style: solid;
}
.rl-dropzone-error {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--rl-danger);
  line-height: 1.4;
}
.rl-dropzone-file.is-invalid { color: var(--rl-danger); }
.rl-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rl-dropzone-title { font-family: var(--rl-body); font-size: 14px; color: var(--rl-ink-2); }
.rl-dropzone-browse { color: var(--rl-gold); text-decoration: underline; }
.rl-dropzone-hint {
  font-family: var(--rl-mono);
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1.5;
}
.rl-dropzone-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.rl-dropzone-files:empty { display: none; }
.rl-dropzone-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--rl-mono);
  font-size: 11px;
  color: var(--rl-ink-2);
}
.rl-dropzone-remove {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--rl-ink-3);
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  transition: color .15s;
}
.rl-dropzone-remove:hover { color: var(--rl-danger); }

/* ─── Validation visible (formulaires à faux-selects, cf. app.js) ───
   !important : les contrôles des faux-selects portent leur bordure en style inline */
.rl-field-invalid > label { color: var(--rl-danger); }
.rl-field-invalid input,
.rl-field-invalid select,
.rl-field-invalid button {
  border-color: var(--rl-danger) !important;
}
.rl-form-invalid-note {
  margin: 0;
  font-size: 13px;
  color: var(--rl-danger);
}

/* ─── Sélecteur date + heure (design system, cf. app.js rlDateTimePicker) ─── */
.rl-dtp { position: relative; }
.rl-dtp-native { display: none !important; } /* input natif conservé mais masqué : source de vérité (name/required/value) */
.rl-dtp-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--rl-bg);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  padding: 11px 14px;
  color: var(--rl-ink);
  font-family: var(--rl-body);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rl-dtp-trigger:hover { border-color: var(--rl-line-strong); }
.rl-dtp.is-open .rl-dtp-trigger { border-color: var(--rl-gold); background: var(--rl-bg-2); }
.rl-dtp-value.is-placeholder { color: var(--rl-ink-3); }
.rl-dtp-caret { color: var(--rl-ink-3); font-size: 11px; flex-shrink: 0; }

.rl-dtp-panel {
  margin-top: 8px;
  border: 1px solid var(--rl-line-strong);
  border-radius: var(--rl-radius);
  background: var(--rl-bg-2);
  padding: 14px;
}
.rl-dtp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rl-dtp-month {
  font-family: var(--rl-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rl-gold-bright);
}
.rl-dtp-nav {
  background: transparent;
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  color: var(--rl-ink-2);
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: border-color .15s, color .15s;
}
.rl-dtp-nav:hover { border-color: var(--rl-gold); color: var(--rl-gold-bright); }
.rl-dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rl-dtp-dow {
  font-family: var(--rl-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rl-ink-3);
  text-align: center;
  padding: 4px 0;
}
.rl-dtp-day {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rl-radius);
  color: var(--rl-ink-2);
  padding: 7px 0;
  font-size: 13px;
  font-family: var(--rl-body);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.rl-dtp-day:hover { border-color: var(--rl-gold); color: var(--rl-ink); }
.rl-dtp-day.is-other { color: var(--rl-ink-3); opacity: .5; }
.rl-dtp-day.is-today { border-color: var(--rl-line-strong); }
.rl-dtp-day.is-selected {
  background: var(--rl-gold);
  border-color: var(--rl-gold);
  color: var(--rl-bg);
  font-weight: 600;
}
.rl-dtp-time {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rl-line);
}
.rl-dtp-time-label {
  font-family: var(--rl-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rl-ink-3);
}
.rl-dtp-time-sep { color: var(--rl-ink-3); }
.rl-dtp-time select {
  background: var(--rl-bg);
  border: 1px solid var(--rl-line);
  border-radius: var(--rl-radius);
  padding: 7px 10px;
  color: var(--rl-ink);
  font-family: var(--rl-body);
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.rl-dtp-time select:focus { border-color: var(--rl-gold); }
.rl-dtp-done { margin-left: auto; flex-shrink: 0; }

/* État invalide : cadre rouge sur le déclencheur (cf. validation visible) */
.rl-field-invalid .rl-dtp-trigger { border-color: var(--rl-danger) !important; }

/* ─── Erreurs de formulaire Symfony ─────────────────────────── */
.form-error {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.form-error li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--rl-danger);
  background: rgba(196, 85, 85, .10);
  border: 1px solid rgba(196, 85, 85, .30);
  border-radius: 4px;
  padding: 6px 10px;
  line-height: 1.4;
  margin-top: 4px;
}
.form-error li::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rl-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ─── Custom scrollbar (where needed) ───────────────────────── */
.rl-scroll { overflow: auto; }

/* ─── Utility ───────────────────────────────────────────────── */
.rl-fade-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--rl-bg));
  pointer-events: none;
}

/* ─── Rang forum (écus de progression) ──────────────────────── */
/* Utilisé dans la colonne auteur du forum, la liste des sujets et le profil. */
.rl-rank { display: block; margin-top: 4px; text-align: center; }
.rl-rank-name {
  display: block; font-family: var(--rl-mono);
  font-size: 11px; letter-spacing: .04em; color: var(--rl-gold-bright);
}
.rl-rank-pips { display: inline-flex; gap: 4px; margin-top: 5px; vertical-align: middle; }
.rl-pip {
  display: inline-block; width: 7px; height: 7px; transform: rotate(45deg);
  background: rgba(212, 175, 110, 0.08); border: 1px solid rgba(212, 175, 110, 0.45);
}
/* Écu allumé — chaque écu porte le matériau du rang où il a été gagné (les rangs acquis
   ne disparaissent pas : monter en matériau les repousse vers la droite). */
.rl-pip--on { background: var(--rl-gold); border-color: var(--rl-gold); }
/* Rangs 1-5 : écu argenté */
.rl-pip--silver { border-color: rgba(185, 192, 204, .45); }
.rl-pip--silver.rl-pip--on { background: var(--rl-silver); border-color: var(--rl-silver-bright); }
/* Rangs 6-10 : écu doré (style par défaut) */
.rl-pip--gold.rl-pip--on { background: var(--rl-gold); border-color: var(--rl-gold); }
/* Rangs 11-14 : écu doré nimbé d'une aura qui « respire » (halo pulsant). */
.rl-pip--aura.rl-pip--on {
  background: var(--rl-gold-bright); border-color: var(--rl-gold-bright);
  box-shadow: 0 0 6px rgba(231, 201, 138, .7), 0 0 2px rgba(231, 201, 138, .9);
  animation: rl-pip-aura 2.2s ease-in-out infinite;
}
/* Léger décalage entre écus aura → ondulation plutôt que pulsation à l'unisson. */
.rl-rank-pips .rl-pip--aura:nth-child(2) { animation-delay: .3s; }
.rl-rank-pips .rl-pip--aura:nth-child(3) { animation-delay: .6s; }
.rl-rank-pips .rl-pip--aura:nth-child(4) { animation-delay: .9s; }
.rl-rank-pips .rl-pip--aura:nth-child(5) { animation-delay: 1.2s; }
@keyframes rl-pip-aura {
  0%, 100% { box-shadow: 0 0 4px rgba(231, 201, 138, .5), 0 0 1px rgba(231, 201, 138, .8); }
  50%      { box-shadow: 0 0 10px rgba(231, 201, 138, .9), 0 0 3px rgba(231, 201, 138, 1); }
}
/* Respect de la préférence système : halo statique enrichi, sans animation. */
@media (prefers-reduced-motion: reduce) {
  .rl-pip--aura.rl-pip--on {
    animation: none;
    box-shadow: 0 0 9px rgba(231, 201, 138, .8), 0 0 2px rgba(231, 201, 138, .95);
  }
}
/* Variante inline pour la liste des sujets */
.rl-rank--compact { display: inline-flex; align-items: center; gap: 6px; margin: 0 4px; text-align: left; }
.rl-rank--compact .rl-rank-name { display: inline; font-size: 10px; }
.rl-rank--compact .rl-rank-pips { margin-top: 0; gap: 3px; }
.rl-rank--compact .rl-pip { width: 5px; height: 5px; }
/* Carte « Rang au forum » du profil */
.rl-rank-card .rl-rank { text-align: left; }
.rl-rank-card .rl-rank-name { font-size: 15px; }
.rl-rank-progress { margin-top: 12px; font-size: 12px; color: var(--rl-ink-3); line-height: 1.6; }
.rl-rank-progress strong { color: var(--rl-gold-bright); font-weight: 600; }

/* ─── Silhouette « je suis sur cette séance » (tuiles du planificateur) ─── */
/* L'icône est un fichier stocké (images/silhouette.svg) posé en masque plutôt
   qu'un SVG inline : un seul téléchargement mis en cache, et la teinte reste
   pilotée en CSS. Le pastille vit dans la ligne de l'horaire de la tuile
   (flex), donc elle ne décale aucun élément verticalement. */
.rl-tile-me {
  flex: none;
  width: 13px;
  height: 13px;
  background-color: var(--rl-silver);
  -webkit-mask: url('../images/silhouette.svg') no-repeat center / contain;
  mask: url('../images/silhouette.svg') no-repeat center / contain;
}
/* MJ de la séance — doré */
.rl-tile-me--mj { background-color: var(--rl-gold); }
/* File d'attente — argent atténué : la place n'est pas encore acquise */
.rl-tile-me--attente { opacity: .45; }