/* ─────────────────────────────────────────────────────────
 * partner.lyacityguide.com · Ajouts au DS LYA Booking
 * Référence : docs/03-DESIGN-SYSTEM.md
 *
 * Ce fichier ne contient QUE :
 *   1. .admin-nav a.disabled  (item nav grisé)
 *   2. .qr-display              (mode kiosque)
 *   3. .est-switcher.select     (variante select pour > 6 établissements)
 * Tout le reste vient de tokens.css (importé en premier).
 * ───────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────
 * .admin-nav a.disabled
 * Item de nav grisé (CRM Booking quand crm_booking_enabled === false).
 * ───────────────────────────────────────────────────────── */
.admin-nav a.disabled {
  color: var(--ink-40);
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.admin-nav a.disabled::after {
  content: 'BIENTÔT';
  margin-left: 8px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink-40);
}

/* ─────────────────────────────────────────────────────────
 * Shimmer / skeleton loading
 *
 * Pattern : pendant le chargement, on garde la forme finale de l'élément
 * mais on cache le contenu derrière un gradient animé (effet "vague").
 * Une fois la donnée chargée, JS retire la classe `.is-loading`.
 *
 * Usage HTML :
 *   <div class="kpi-value is-loading" id="kpi-today">000</div>
 *   <span class="text-shimmer is-loading">Loading text…</span>
 * ───────────────────────────────────────────────────────── */
@keyframes shimmer-sweep {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.is-loading.kpi-value,
.is-loading.text-shimmer,
.shimmer-block {
  color: transparent !important;
  background-color: var(--ink-10, #f5f1ec);
  background-image: linear-gradient(
    90deg,
    var(--ink-10, #f5f1ec) 0%,
    var(--ink-20, #e8e1d6) 50%,
    var(--ink-10, #f5f1ec) 100%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: shimmer-sweep 1.4s ease-in-out infinite;
  border-radius: 6px;
  user-select: none;
  pointer-events: none;
}

/* KPI value en loading : on garde la taille du nombre, on masque juste le texte */
.kpi-value.is-loading {
  display: inline-block;
  min-width: 80px;
  height: 1.1em;
  line-height: 1.1em;
}

/* Bloc shimmer générique (pour cards, lignes de liste, etc.) */
.shimmer-block {
  display: block;
  width: 100%;
  height: 16px;
  margin: 8px 0;
}
.shimmer-card {
  height: 84px;
  border-radius: 12px;
  margin-bottom: 12px;
}

/* Liste de skeleton cards pour les redemptions/listes */
.skeleton-list .shimmer-card:nth-child(2) { animation-delay: 0.1s; }
.skeleton-list .shimmer-card:nth-child(3) { animation-delay: 0.2s; }
.skeleton-list .shimmer-card:nth-child(4) { animation-delay: 0.3s; }
.skeleton-list .shimmer-card:nth-child(5) { animation-delay: 0.4s; }

/* Switcher d'établissement en loading : pseudo tabs */
.est-switcher.is-loading {
  display: flex !important;
  gap: 12px;
}
.est-switcher.is-loading button {
  display: inline-block;
  width: 120px;
  height: 24px;
  background-color: var(--ink-10, #f5f1ec);
  background-image: linear-gradient(
    90deg,
    var(--ink-10, #f5f1ec) 0%,
    var(--ink-20, #e8e1d6) 50%,
    var(--ink-10, #f5f1ec) 100%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: shimmer-sweep 1.4s ease-in-out infinite;
  border-radius: 6px;
  border: none;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
 * Page kiosque (wow-session.html)
 * Pas de admin-nav, pas de footer. Centre absolu.
 * ───────────────────────────────────────────────────────── */
body.kiosk {
  padding: 32px;
  justify-content: center;
}
body.kiosk main {
  max-width: 540px;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────────────────────
 * .qr-display — composant QR plein écran
 * ───────────────────────────────────────────────────────── */
.qr-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.qr-display .qr-label {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--ink-60);
  text-align: center;
}

.qr-display .qr-est-name {
  font-family: 'EB Garamond', serif;
  font-size: 22px;
  color: var(--ink);
  text-align: center;
  margin: -16px 0 0;
}

.qr-display .qr-canvas {
  width: 60vmin;
  max-width: 480px;
  height: 60vmin;
  max-height: 480px;
  background: var(--bg);
  padding: 24px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-display .qr-canvas svg,
.qr-display .qr-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.qr-display .qr-canvas.loading::before {
  content: '';
  width: 24px;
  height: 24px;
  border: 1px solid var(--ink-15);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Ring timer : cercle hairline qui se vide en 30s */
.qr-timer {
  width: 48px;
  height: 48px;
  position: relative;
}
.qr-timer svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.qr-timer circle {
  fill: none;
  stroke: var(--ink-15);
  stroke-width: 1;
}
.qr-timer .timer-progress {
  stroke: var(--ink);
  stroke-dasharray: 144;        /* 2 * π * 23 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

.qr-counter {
  font-family: 'EB Garamond', serif;
  font-size: 26px;
  color: var(--ink);
  text-align: center;
}
.qr-counter .label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-top: 6px;
}

.qr-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  width: 100%;
  max-width: 320px;
}

/* ─────────────────────────────────────────────────────────
 * Toast notifications (.msg en mode flottant)
 * Cohérent DS : ivoire / hairline / EB Garamond italique.
 * ───────────────────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
  width: calc(100% - 48px);
  max-width: 420px;
}
.toast {
  pointer-events: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 14px 18px;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  text-align: center;
  animation: toast-in 0.25s ease;
}
.toast.error {
  border-color: var(--error);
  color: var(--error);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────
 * Page kiosque — masquer scrollbar inutile
 * ───────────────────────────────────────────────────────── */
body.kiosk::-webkit-scrollbar { display: none; }
body.kiosk { scrollbar-width: none; }

/* ─────────────────────────────────────────────────────────
 * .info-btn — petit bouton (i) à côté d'un titre
 * Cohérent DS : cercle hairline, pas de fond, EB Garamond italique.
 * ───────────────────────────────────────────────────────── */
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-60);
  padding: 0;
  margin-left: 12px;
  vertical-align: middle;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.info-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Modale info (réutilise .modal du DS, juste un titre h1 + paragraphes) */
.info-modal-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 32px 0;
}
.info-modal-list .info-step {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.info-modal-list .info-step:last-child {
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.info-modal-list .info-step-num {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 8px;
}
.info-modal-list .info-step-title {
  font-family: 'EB Garamond', serif;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 8px;
}
.info-modal-list .info-step-text {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-60);
  margin: 0;
}