/* AperoRoom — Rose Garden tokens
   ──────────────────────────────────
   Palette nuit velours + glow rose néon. Variables CSS pures pour
   coller au stack Symfony/asset_mapper. Préfixe --pt-* préservé pour
   compatibilité avec le système de thèmes profil existant. */

:root {
  /* ── Couleurs Rose Garden ─────────────────────────────────────── */
  --pt-primary:        #E83E6B;          /* rose Campari vibrant */
  --pt-primary-soft:   #ff5a83;
  --pt-primary-deep:   #b62a52;
  --pt-secondary:      #8E5A6E;          /* mauve poudré */
  --pt-bg:             #0A0408;          /* nuit profonde */
  --pt-bg-2:           #160910;          /* élévation 1 */
  --pt-surface:        #2D0F1F;          /* bordeaux velours */
  --pt-surface-2:      #3a142a;
  --pt-text:           #FFD6DC;          /* rose poudré clair */
  --pt-text-muted:     rgba(255,214,220,0.55);
  --pt-text-dim:       rgba(255,214,220,0.35);
  --pt-gold:           #FFB000;          /* or VIP */
  --pt-cyan:           #5DEAFF;          /* contraste rare */
  --pt-line:           rgba(232,62,107,0.22);
  --pt-line-soft:      rgba(255,214,220,0.10);

  /* ── Apéro Glow (intensité contrôlée par tweak) ───────────────── */
  --glow-intensity:    1;
  --glow-color:        232, 62, 107;     /* rgb primary */
  --glow-soft:         0 0 calc(28px * var(--glow-intensity)) rgba(var(--glow-color), calc(0.28 * var(--glow-intensity)));
  --glow-strong:       0 0 calc(48px * var(--glow-intensity)) rgba(var(--glow-color), calc(0.45 * var(--glow-intensity)));
  --glow-inset:        inset 0 0 calc(40px * var(--glow-intensity)) rgba(var(--glow-color), calc(0.12 * var(--glow-intensity)));

  /* ── Type ─────────────────────────────────────────────────────── */
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Radius / spacing ─────────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
}

/* ── Surface "Apéro Glow" : verre dépoli rose ─────────────────── */
.apero-glow {
  background: linear-gradient(180deg, rgba(58,20,42,0.55), rgba(45,15,31,0.55));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--pt-line);
  box-shadow:
    var(--glow-inset),
    0 18px 60px rgba(0,0,0,0.55),
    var(--glow-soft);
  border-radius: var(--r-lg);
}

.apero-glow-soft {
  background: rgba(22,9,16,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--pt-line);
  border-radius: var(--r-md);
}

/* ── Boutons ─────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: 0;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  color: var(--pt-text);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background:
    radial-gradient(120% 200% at 30% 0%, rgba(255,255,255,0.22), transparent 45%),
    linear-gradient(135deg, var(--pt-primary) 0%, var(--pt-secondary) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -8px 18px rgba(0,0,0,0.25),
    0 8px 22px rgba(var(--glow-color), 0.45),
    var(--glow-soft);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -8px 18px rgba(0,0,0,0.25),
    0 10px 28px rgba(var(--glow-color), 0.6),
    var(--glow-strong); }

.btn-ghost {
  background: rgba(255,214,220,0.04);
  border: 1px solid var(--pt-line);
  color: var(--pt-text);
}
.btn-ghost:hover {
  background: rgba(232,62,107,0.10);
  border-color: rgba(232,62,107,0.5);
  box-shadow: var(--glow-soft);
}

.btn-gold {
  background: linear-gradient(135deg, #ffd76b, var(--pt-gold));
  color: #2a1500;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 6px 18px rgba(255,176,0,0.4);
}

/* ── Pills / tags ────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,214,220,0.05);
  border: 1px solid var(--pt-line);
  color: var(--pt-text);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.pill:hover { background: rgba(232,62,107,0.14); border-color: rgba(232,62,107,0.55); }
.pill.active {
  background: linear-gradient(135deg, var(--pt-primary), var(--pt-secondary));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--glow-soft);
}

/* ── Glaçons / chiffres mono ─────────────────────────────────── */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Titres display ──────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.95;
}

/* ── Badge "Apéro en cours" (au lieu de EN DIRECT) ───────────── */
.badge-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px 4px 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--pt-primary), #ff7195);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--glow-color), 0.5);
}
.badge-live::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff, 0 0 12px #fff;
  animation: pulse-live 1.6s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

/* ── Body base ───────────────────────────────────────────────── */
.apero-root {
  font-family: var(--font-body);
  color: var(--pt-text);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(232,62,107,0.10), transparent 55%),
    radial-gradient(80% 60% at 90% 100%, rgba(142,90,110,0.18), transparent 60%),
    var(--pt-bg);
  -webkit-font-smoothing: antialiased;
}

/* scrollbar */
.apero-root *::-webkit-scrollbar { width: 8px; height: 8px; }
.apero-root *::-webkit-scrollbar-thumb { background: rgba(232,62,107,0.3); border-radius: 4px; }
.apero-root *::-webkit-scrollbar-track { background: transparent; }

/* ── Polyfill drapeaux pour Windows ────────────────────────────
   Microsoft Windows ne rend pas les flag emojis (FR, GB, ES, etc.)
   dans Segoe UI Emoji. Sur Windows, on voit "FR", "GB" en texte au
   lieu de 🇫🇷, 🇬🇧.
   Le polyfill "Twemoji Country Flags" charge UNIQUEMENT les chars
   flag (unicode-range tres limite) en font woff2 (~36 KB) depuis CDN.
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Twemoji Country Flags';
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065,
                 U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
  font-display: swap;
}

/* Applique la stack font emoji sur body — le navigateur utilisera
   Twemoji Country Flags UNIQUEMENT pour les flag chars (grace au
   unicode-range), et les autres fonts pour le reste. */
body {
  font-family: 'Inter', 'Twemoji Country Flags', 'Apple Color Emoji',
               'Segoe UI Emoji', 'Noto Color Emoji', system-ui,
               -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Grid responsive pour les room cards (4 max par ligne) ──
   Utilise sur home/category/subcategory/account/etc. pour une presentation
   coherente. Responsive : 1 col mobile, 2 tablet, 3 medium, 4 large. */
.apero-rooms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 600px) {
  .apero-rooms-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (min-width: 960px) {
  .apero-rooms-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .apero-rooms-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ===========================================================
   Timeline « Apéros à venir » — frise horizontale d'onglets (accueil)
   Aujourd'hui (serveur) · Demain · 7-14-21-30 j (AJAX). cf home-timeline.js
   =========================================================== */
.apero-timeline-frieze {
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.apero-timeline-frieze::-webkit-scrollbar { display: none; }
.apero-timeline-svg {
  display: block;
  width: 100%;
  min-width: 600px;          /* mobile : scroll horizontal plutôt que labels illisibles */
  max-width: 680px;          /* desktop : rendu 1:1 (viewBox 680) = net */
  height: auto;
  overflow: visible;
}
.apero-tl-node { cursor: pointer; }
.apr-tl-bowl,
.apr-tl-stem {
  fill: none;
  stroke: var(--pt-text-muted, #9c6b80);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;   /* trait constant malgré le scale du verre */
  transition: stroke .2s ease;
}
.apr-tl-fill { fill: var(--pt-primary, #e0457b); opacity: 0; transition: opacity .25s ease; }
.apr-tl-olive { fill: var(--pt-primary, #e0457b); opacity: 0; transition: opacity .2s ease; }
.apr-tl-glass { transform-box: fill-box; transform-origin: center bottom; transition: transform .25s ease; }
.apr-tl-dot {
  fill: var(--pt-surface, #1a0c14);
  stroke: var(--pt-text-muted, #9c6b80);
  stroke-width: 1.6;
  transition: fill .2s ease, stroke .2s ease, r .2s ease;
}
.apr-tl-glow { opacity: 0; transition: opacity .25s ease; }
.apr-tl-label {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  fill: var(--pt-text-muted, #a87e90);
  transition: fill .2s ease;
}
.apero-tl-node:hover:not(.is-active) .apr-tl-glass { transform: scale(1.12); }
.apero-tl-node:hover:not(.is-active) .apr-tl-bowl,
.apero-tl-node:hover:not(.is-active) .apr-tl-stem { stroke: var(--pt-primary, #e0457b); }
.apero-tl-node:focus-visible .apr-tl-label { fill: var(--pt-text, #fff); }
.apero-tl-node.is-active .apr-tl-bowl,
.apero-tl-node.is-active .apr-tl-stem { stroke: var(--pt-primary, #e0457b); stroke-width: 2; }
.apero-tl-node.is-active .apr-tl-fill { opacity: .24; }
.apero-tl-node.is-active .apr-tl-olive { opacity: 1; }
.apero-tl-node.is-active .apr-tl-glass { transform: scale(1.5); }
.apero-tl-node.is-active .apr-tl-dot { fill: var(--pt-primary, #e0457b); stroke: none; r: 6.5; }
.apero-tl-node.is-active .apr-tl-glow { opacity: 1; }
.apero-tl-node.is-active .apr-tl-label { fill: var(--pt-text, #fff); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .apr-tl-glass, .apr-tl-dot, .apr-tl-bowl, .apr-tl-stem, .apr-tl-fill, .apr-tl-glow, .apr-tl-label { transition: none; }
}
.apero-timeline-grid { position: relative; min-height: 80px; transition: opacity .15s ease; }
.apero-timeline-grid.is-loading { opacity: .42; pointer-events: none; }
.apero-timeline-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--pt-text-muted, #b9b2c2);
  font-size: 15px;
  padding: 38px 20px;
  margin: 0;
}

/* ===========================================================
   Timeline horaire « Les apéros aujourd'hui » — règle d'heures + curseur live
   + verres aux heures des apéros (bâtie en JS : cf home-timeline.js).
   =========================================================== */
.apero-today-frieze {
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.apero-today-frieze::-webkit-scrollbar { display: none; }
.apero-today-svg {
  display: block;
  width: 100%;
  min-width: 600px;
  max-width: 680px;
  height: auto;
  overflow: visible;
  color: var(--pt-primary, #e0457b);   /* currentColor des tracés = rose du thème */
}
.apr-td-glass { transition: opacity .2s ease; }
.apr-td-glass--ended { color: var(--pt-text-muted, #7a5666); opacity: .6; }
.apr-td-tick {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11.5px;
  fill: var(--pt-text-muted, #9a7d8c);
}
.apr-td-pill { fill: var(--pt-primary, #e0457b); }
.apr-td-pill-txt {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  fill: #fff;
}
@keyframes aprTdPulse { 0% { r: 15; opacity: .55; } 100% { r: 34; opacity: 0; } }
.apr-td-pulse { animation: aprTdPulse 2.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .apr-td-pulse { animation: none; opacity: 0; }
  .apr-td-glass { transition: none; }
}

/* ===========================================================
   Room card v3 « QR + infos » (zéro spoiler) — cf _room_card.html.twig
   Couleurs via variables --apr-* : défaut AperoRoom (rose). Surchargées
   par --pt-* sur la page profil (.pt-body .apr2) -> s'adapte au thème client.
   =========================================================== */
.apr2 {
  --apr-grad: linear-gradient(180deg, rgba(58,20,42,0.65), rgba(45,15,31,0.65));
  --apr-accent: #E83E6B;
  --apr-text: #FFD6DC;
  --apr-muted: rgba(255,214,220,0.62);
  --apr-line: rgba(232,62,107,0.20);
  --apr-gold: #FFB000;
  --apr-solid: #1f0c15;   /* couleur ~opaque de la carte, pour le fondu du « Voir plus » */
}
.apero-room-card {
  background: var(--apr-grad);
  border: 1px solid var(--apr-line);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  max-width: 480px;          /* anti-étirement sur écran large (cellules de grille larges) */
  min-width: 0;              /* respecte la colonne 1fr (sinon le min-content déborde) */
  width: 100%;               /* remplit la cellule (PAS de shrink-to-fit -> largeurs égales) */
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
/* Reflet qui balaie la carte au survol (effet « whoua ») */
.apero-room-card::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.08) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
.apero-room-card:hover {
  /* léger basculement 3D + montée + halo à la couleur de l'accent */
  transform: perspective(1100px) translateY(-6px) rotateX(2.5deg);
  border-color: var(--apr-accent);
  box-shadow: 0 26px 60px rgba(0,0,0,0.6), 0 0 30px color-mix(in srgb, var(--apr-accent) 32%, transparent);
}
.apero-room-card:hover::after { transform: translateX(120%); }
.apero-room-card__title { font-family: 'Instrument Serif', 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.apr2__main { display: flex; gap: 14px; padding: 14px; }
.apr2__qr { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; width: 104px; }
.apr2__qr-frame { width: 104px; height: 104px; border-radius: 12px; background: #fff; padding: 7px; box-sizing: border-box; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.apr2__qr-frame img { width: 100%; height: 100%; display: block; }
.apr2__qr-hint { font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--apr-muted); }
.apr2__info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.apr2__status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apr2__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; background: var(--apr-accent); color: #fff; }
.apr2__dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: apero-live-pulse 1.2s ease-in-out infinite; }
.apr2__soon { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(255,176,0,0.16); color: var(--apr-gold); border: 1px solid rgba(255,176,0,0.35); }
.apr2__ended { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(128,128,128,0.18); color: var(--apr-muted); }
.apr2__time { font-size: 11.5px; color: var(--apr-muted); }
.apr2__time--gold { color: var(--apr-gold); }
.apr2__title { display: block; font-size: 19px; line-height: 1.15; color: var(--apr-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apr2__title:hover { opacity: .85; }
.apr2__cat { font-size: 12px; color: var(--apr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apr2__geo { display: flex; flex-direction: column; gap: 2px; margin-top: 1px; }
.apr2__geo-row { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--apr-text); min-width: 0; }
.apr2__geo-row svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--apr-accent); }
.apr2__geo-label { color: var(--apr-muted); }
.apr2__langs { font-size: 11.5px; }
.apr2__more { font-size: 11px; color: var(--apr-muted); font-weight: 600; }
.apr2__desc { position: relative; margin: 3px 14px 0; min-height: 2.9em; font-size: 11.5px; font-style: italic; color: var(--apr-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.apr2__desc--open { -webkit-line-clamp: unset; line-clamp: unset; min-height: 0; display: block; overflow: visible; }
/* « Voir plus » EN BOUT de 2e ligne (absolu + fondu) -> n'ajoute AUCUNE hauteur,
   l'alignement des footers est préservé. En mode déplié, repasse en flux normal. */
.apr2__desc-more { position: absolute; right: 0; bottom: 0; padding: 0 0 0 34px; background: linear-gradient(90deg, transparent, var(--apr-solid) 40%); border: 0; color: var(--apr-accent); font-size: 11px; font-weight: 500; cursor: pointer; }
.apr2__desc-more:hover { text-decoration: underline; }
.apr2__desc--open .apr2__desc-more { position: static; padding: 0; background: none; margin-top: 3px; }
.apr2__footer { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 11px 14px; border-top: 1px solid var(--apr-line); }
.apr2__creator { display: inline-flex; align-items: center; gap: 7px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.apr2__avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 10px; border: 1.5px solid rgba(255,176,0,0.6); flex: 0 0 auto; }
.apr2__creator-name { font-size: 12px; color: var(--apr-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apr2__creator:hover { opacity: .85; }
.apr2__viewers { display: inline-flex; align-items: center; gap: 6px; flex: 1; font-size: 12px; color: var(--apr-text); font-family: 'JetBrains Mono', monospace; }
.apr2__viewers svg { width: 14px; height: 14px; color: var(--apr-accent); }
.apr2__lock { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--apr-muted); flex: 0 0 auto; }
.apr2__lock svg { width: 12px; height: 12px; }
.apr2__player { border-top: 1px solid var(--apr-line); }
.apr2__player-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; font-size: 12px; color: var(--apr-accent); cursor: pointer; list-style: none; user-select: none; }
.apr2__player-toggle::-webkit-details-marker { display: none; }
.apr2__player-toggle::marker { content: ''; }
.apr2__player-toggle svg { width: 14px; height: 14px; }
.apr2__player-toggle:hover { opacity: .8; }
.apr2__chev { transition: transform .2s ease; }
.apr2__player[open] .apr2__chev { transform: rotate(180deg); }
.apr2__player-body { background: rgba(128,128,128,0.10); border-top: 1px solid var(--apr-line); padding: 11px 15px; }
.apr2__player-body p { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 7px; font-size: 11.5px; line-height: 1.5; color: var(--apr-text); }
.apr2__player-body p:last-child { margin-bottom: 0; }
.apr2__player-body svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--apr-accent); }
.apr2__player-link { color: var(--apr-accent); font-weight: 500; text-decoration: underline; }
.apr2__player-link:hover { opacity: .85; }

/* « Me rappeler » (apéros à venir) — compact, MÊME hauteur que l'avatar (24px) pour ne
   PAS rallonger le footer -> « Afficher le lecteur » reste aligné sur TOUTES les cartes
   (avec ou sans bouton). À droite du créateur (flex:1 le pousse à droite). */
.apr2__remind {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  flex-shrink: 0; white-space: nowrap; height: 24px; box-sizing: border-box;
  appearance: none; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 0 10px; border-radius: 7px; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--apr-accent) 45%, transparent);
  background: color-mix(in srgb, var(--apr-accent) 10%, transparent);
  color: var(--apr-accent);
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.apr2__remind svg { width: 13px; height: 13px; flex-shrink: 0; }
.apr2__remind:hover { background: color-mix(in srgb, var(--apr-accent) 18%, transparent); border-color: var(--apr-accent); }
.apr2__remind.is-loading { opacity: .55; pointer-events: none; }
/* État « validé » en VERT (s'applique au clic via JS .is-done ET au refresh côté serveur) */
.apr2__remind.is-done {
  background: color-mix(in srgb, #22c55e 18%, transparent);
  border-color: color-mix(in srgb, #22c55e 55%, transparent);
  color: #86efac; cursor: default; pointer-events: none;
}
@keyframes apero-live-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.7); } }
@media (max-width: 380px) {
  .apr2__qr, .apr2__qr-frame { width: 88px; }
  .apr2__qr-frame { height: 88px; }
}

/* ── Floating actions (remplacent jb-header sur pages avec hero propre) ──
   Quand une page a deja son titre et son solde dans le hero (Mes Glacons,
   Mon Comptoir), on supprime la jb-header complete et on flotte juste les
   actions essentielles (notifications bell, lang switcher, user menu)
   en haut a droite, transparentes au-dessus du contenu.
   position: fixed pour rester accessible meme en scrollant. */
.apero-floating-actions {
  position: fixed;
  top: 28px;
  right: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 20;
}
@media (max-width: 720px) {
  .apero-floating-actions { top: 14px; right: 14px; }
}

/* ───────────────────────────────────────────────────────────────
   Hamburger mobile + sidebar responsive
   ─────────────────────────────────────────────────────────────── */

/* Bouton hamburger 3 traits — visible UNIQUEMENT sur mobile.
   Position fixed top-left, glassmorphism rose. */
.apero-hamburger {
  display: none; /* hidden by default — affiche en mobile via media query */
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 50;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(22, 9, 16, 0.78);
  border: 1px solid var(--pt-line, rgba(232, 62, 107, 0.25));
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--pt-text, #FFD6DC);
  transition: all 0.2s ease;
}
.apero-hamburger:hover,
.apero-hamburger:focus-visible {
  background: rgba(232, 62, 107, 0.18);
  border-color: rgba(232, 62, 107, 0.5);
  outline: none;
}
.apero-hamburger svg { display: block; }

/* Backdrop sombre derriere la sidebar mobile ouverte (clic = close) */
.apero-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: apero-backdrop-fade 0.2s ease;
}
@keyframes apero-backdrop-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Responsive : < 1024px = sidebar masquee par defaut + hamburger affiche ───
   Note : on aligne sur le breakpoint d'app.css ligne 287 qui fait
   `@media (max-width: 1024px) { .jb-sidebar { display: none; } }`.
   Sans `!important` ici, cette regle d'app.css gagne et masque la sidebar
   meme quand on ouvre via hamburger. */
@media (max-width: 1024px) {
  /* Sidebar : slide off-screen par defaut, on-screen quand body.sidebar-open.
     Force display: flex !important pour annuler app.css "display: none" */
  .jb-sidebar {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh !important;
    width: 280px !important;
    max-width: 82vw;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  }
  body.sidebar-open .jb-sidebar {
    transform: translateX(0);
  }
  body.sidebar-open .apero-sidebar-backdrop {
    display: block;
  }
  /* App prend 1 colonne (sidebar est hors flux en fixed) */
  .jb-app {
    grid-template-columns: 1fr !important;
  }
  .jb-main {
    margin-left: 0 !important;
    padding-left: 0;
  }
}

/* En mode desktop (>=1025px) : on s'assure que les helpers mobile sont caches */
@media (min-width: 1025px) {
  .apero-hamburger { display: none !important; }
  .apero-sidebar-backdrop { display: none !important; }
}

/* Hamburger visible UNIQUEMENT si la page a une sidebar (.jb-app present).
   Donc cache sur : pages Room (.jb-room-view), telecommande mobile,
   receiver Cast, pages d'erreur, pages auth (login/register, pas de jb-app). */
@media (max-width: 1024px) {
  .apero-hamburger { display: none; }
  body:has(.jb-app) .apero-hamburger { display: inline-flex; }
}