/*!
 * Danz Studio — Frontend base CSS
 * Mobile-first, Android + iOS, safe-area-aware.
 */

:root {
  --danz-fe-primary: #6366f1;
  --danz-fe-primary-600: #4f46e5;
  --danz-fe-bg: #ffffff;
  --danz-fe-surface: #ffffff;
  --danz-fe-surface-2: #f9fafb;
  --danz-fe-text: #111827;
  --danz-fe-text-muted: #6b7280;
  --danz-fe-border: #e5e7eb;
  --danz-fe-radius: 12px;
  --danz-fe-radius-lg: 16px;
  --danz-fe-shadow: 0 2px 8px rgba(17, 24, 39, .08);
  --danz-fe-tap: 44px;
}

.danz-fe { color: var(--danz-fe-text); -webkit-font-smoothing: antialiased; }
.danz-fe *, .danz-fe *::before, .danz-fe *::after { box-sizing: border-box; }

.danz-fe .danz-fe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--danz-fe-tap);
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--danz-fe-border);
  background: var(--danz-fe-surface);
  color: var(--danz-fe-text);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
}
.danz-fe .danz-fe-btn--primary {
  background: var(--danz-fe-primary);
  border-color: var(--danz-fe-primary);
  color: #fff;
}
.danz-fe .danz-fe-btn--block { width: 100%; }

.danz-fe .danz-fe-card {
  background: var(--danz-fe-surface);
  border: 1px solid var(--danz-fe-border);
  border-radius: var(--danz-fe-radius);
  box-shadow: var(--danz-fe-shadow);
  padding: 20px;
  margin-bottom: 16px;
}

/* Scanner fullscreen layout */
.danz-scan {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  color: #fff;
}
.danz-scan__video {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.danz-scan__frame {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 320px);
  height: min(80vw, 320px);
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .4);
}
.danz-scan__top, .danz-scan__bottom {
  position: relative;
  padding: 12px 16px;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.danz-scan__bottom {
  flex-direction: column;
  gap: 8px;
}
.danz-scan input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 16px; /* évite zoom iOS */
}
.danz-scan input[type="text"]::placeholder { color: rgba(255, 255, 255, .6); }

.danz-scan__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
  z-index: 10000;
  text-align: center;
}
.danz-scan__overlay--success { background: rgba(22, 163, 74, .92); }
.danz-scan__overlay--error   { background: rgba(220, 38, 38, .92); }
.danz-scan__overlay h2 { font-size: 28px; margin: 12px 0 4px; }
.danz-scan__overlay p  { font-size: 16px; opacity: .9; margin: 0; }
.danz-scan__overlay img { max-width: 140px; border-radius: 50%; }

/* États UX (start / loading / denied / no-camera / scanning) */
.danz-scan__state {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  text-align: center;
  color: #fff;
  background: #000;
}
.danz-scan__state.is-active { display: flex; }
.danz-scan__state--scanning { background: transparent; pointer-events: none; }
.danz-scan__state-icon  { font-size: 48px; line-height: 1; }
.danz-scan__state-title { font-size: 20px; font-weight: 600; margin: 0; }
.danz-scan__state-text  { font-size: 15px; opacity: .8; max-width: 320px; margin: 0; }
.danz-scan__state-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
  max-width: 320px;
}
.danz-scan__start-btn {
  min-height: 56px;
  padding: 14px 28px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 17px;
  font-weight: 600;
  border: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.danz-scan__start-btn:focus-visible {
  outline: 3px solid #6366f1;
  outline-offset: 2px;
}

/* ============================================================
 * Account FO — page « Mon compte » Danz (4 endpoints + shortcodes)
 * ============================================================ */
.danz-fe-account { max-width: 980px; margin: 0 auto; padding: 16px; }
.danz-fe-account h2 { font-size: 24px; margin: 24px 0 16px; }
.danz-fe-account h3 { font-size: 18px; margin: 20px 0 12px; }
.danz-fe-account h4 { font-size: 15px; margin: 14px 0 8px; color: var(--danz-fe-text-muted); }
.danz-fe-account .danz-fe-text-muted { color: var(--danz-fe-text-muted); }

/* Cartes wallet */
.danz-fe-wallet-card,
.danz-fe-reservation-card,
.danz-fe-ticket-card,
.danz-fe-profile-card,
.danz-fe-family-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  margin-bottom: 16px;
  background: var(--danz-fe-surface);
  border: 1px solid var(--danz-fe-border);
  border-radius: var(--danz-fe-radius);
  box-shadow: var(--danz-fe-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.danz-fe-wallet-card:hover,
.danz-fe-reservation-card:hover,
.danz-fe-ticket-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(17, 24, 39, .12); }

.danz-fe-wallet-card header,
.danz-fe-reservation-card header,
.danz-fe-ticket-card header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.danz-fe-wallet-card header h3,
.danz-fe-reservation-card header h3,
.danz-fe-ticket-card header h3 { margin: 0; font-size: 18px; }

.danz-fe-wallet-card footer,
.danz-fe-reservation-card footer,
.danz-fe-ticket-card footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.danz-fe-wallet-card[data-status="expired"],
.danz-fe-wallet-card[data-status="cancelled"] { opacity: 0.65; }

.danz-fe-wallet-card__image { max-width: 160px; height: auto; border-radius: 8px; align-self: flex-start; }
.danz-fe-wallet-card__expires { margin: 0; color: var(--danz-fe-text-muted); font-size: 14px; }
.danz-fe-wallet-card__desc { margin: 0; font-size: 14px; }
.danz-fe-wallet-card__owner { margin: 8px 0 0; font-size: 14px; color: var(--danz-fe-text-muted); }

/* KPI bloc */
.danz-fe-kpi {
  background: var(--danz-fe-surface-2);
  /* v1.24.102 — couleur explicite pour que les enfants n'héritent pas
     d'une couleur thème dark qui rendrait le chiffre invisible (cas
     reporté : « 10 » bleu sombre sur fond noir). */
  color: var(--danz-fe-text);
  padding: 16px;
  border-radius: 10px;
  text-align: center;
}
.danz-fe-kpi .value {
  font-size: 36px;
  font-weight: 700;
  display: block;
  line-height: 1;
  /* Force la couleur du texte principal pour rester lisible quel que
     soit le thème WP autour. Sans ça, certains thèmes block (mode
     sombre auto, ou variables corrompues) rendent le chiffre du même
     ton que le fond. */
  color: var(--danz-fe-text);
}
.danz-fe-kpi .label { color: var(--danz-fe-text-muted); font-size: 13px; }

/* Total cumulé des séances restantes (tête de page Portefeuille FO). */
.danz-fe-total-credits {
  background: linear-gradient( 135deg, var( --danz-fe-primary, #6366f1 ) 0%, #818cf8 100% );
  color: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  margin: 0 0 24px;
  text-align: center;
  box-shadow: 0 6px 20px rgba( 99, 102, 241, 0.25 );
}
.danz-fe-total-credits__value {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.danz-fe-total-credits__label {
  font-size: 16px;
  margin-top: 6px;
  opacity: 0.95;
}
.danz-fe-total-credits__detail {
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.85;
}
.danz-fe-total-credits__expiry {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
}
@media ( max-width: 640px ) {
  .danz-fe-total-credits { padding: 22px 16px; }
  .danz-fe-total-credits__value { font-size: 48px; }
  .danz-fe-total-credits__label { font-size: 14px; }
}

/* Progress bar */
.danz-fe-progress {
  height: 6px;
  background: var(--danz-fe-border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.danz-fe-progress__bar {
  height: 100%;
  background: var(--danz-fe-primary);
  border-radius: 999px;
  transition: width .3s ease;
}

/* Badges */
.danz-fe-badge {
  display: inline-flex; padding: 4px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--danz-fe-surface-2); color: var(--danz-fe-text-muted);
}
.danz-fe-badge--active   { background: #dcfce7; color: #166534; }
.danz-fe-badge--expired  { background: #fee2e2; color: #991b1b; }
.danz-fe-badge--paused   { background: #fef3c7; color: #92400e; }

/* QR */
.danz-fe-qr-toggle summary { cursor: pointer; padding: 8px 0; color: var(--danz-fe-primary); font-weight: 500; }
.danz-fe-qr { text-align: center; padding: 12px; }
.danz-fe-qr img { max-width: 100%; width: 240px; height: auto; border-radius: 8px; background: #fff; }
.danz-fe-qr .help { color: var(--danz-fe-text-muted); font-size: 13px; margin-top: 8px; }

/* Boutons */
.danz-fe-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--danz-fe-tap, 44px); padding: 12px 18px;
  border-radius: 10px; border: 1px solid var(--danz-fe-border);
  background: var(--danz-fe-surface); color: var(--danz-fe-text);
  font-weight: 500; font-size: 15px; cursor: pointer;
  text-decoration: none; touch-action: manipulation;
}
.danz-fe-btn:hover { background: var(--danz-fe-surface-2); }
.danz-fe-btn--primary { background: var(--danz-fe-primary); border-color: var(--danz-fe-primary); color: #fff; }
.danz-fe-btn--primary:hover { background: var(--danz-fe-primary-600); border-color: var(--danz-fe-primary-600); }
.danz-fe-btn--danger { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.danz-fe-btn--danger:hover { background: #fee2e2; }
.danz-fe-btn:focus-visible { outline: 3px solid var(--danz-fe-primary); outline-offset: 2px; }

/* Tableau historique responsive */
.danz-fe-table {
  width: 100%; border-collapse: collapse;
  background: var(--danz-fe-surface);
  border: 1px solid var(--danz-fe-border);
  border-radius: var(--danz-fe-radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.danz-fe-table th,
.danz-fe-table td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--danz-fe-border);
  font-size: 14px;
}
.danz-fe-table thead th { background: var(--danz-fe-surface-2); font-weight: 600; }
.danz-fe-table tbody tr:last-child td { border-bottom: 0; }

/* Empty state */
.danz-fe-empty {
  text-align: center; padding: 40px 20px;
  color: var(--danz-fe-text-muted);
  background: var(--danz-fe-surface);
  border: 1px dashed var(--danz-fe-border);
  border-radius: var(--danz-fe-radius);
}
.danz-fe-empty h3 { color: var(--danz-fe-text); margin: 0 0 12px; }

/* Tabs */
.danz-fe-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--danz-fe-border);
}
.danz-fe-tab {
  padding: 10px 16px;
  color: var(--danz-fe-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  font-size: 14px; font-weight: 500;
  min-height: 44px; display: inline-flex; align-items: center;
}
.danz-fe-tab.is-active {
  color: var(--danz-fe-primary);
  border-bottom-color: var(--danz-fe-primary);
}
.danz-fe-tab:hover { color: var(--danz-fe-text); }

/* Form */
.danz-fe-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.danz-fe-form-row label { font-size: 14px; font-weight: 500; color: var(--danz-fe-text-muted); }
.danz-fe-form-row input,
.danz-fe-form-row select,
.danz-fe-form-row textarea {
  padding: 10px 12px;
  border: 1px solid var(--danz-fe-border);
  border-radius: 8px;
  font-size: 16px; /* iOS no zoom */
  background: var(--danz-fe-surface);
  color: var(--danz-fe-text);
}
.danz-fe-form-row input:focus { outline: 2px solid var(--danz-fe-primary); border-color: var(--danz-fe-primary); }

/* Profile card */
.danz-fe-profile-card__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.danz-fe-profile-card__avatar {
  width: 72px; height: 72px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--danz-fe-border);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--danz-fe-surface-2);
  color: var(--danz-fe-text-muted);
  font-size: 26px; font-weight: 600;
}
.danz-fe-profile-card__id h3 { margin: 0; font-size: 18px; }
.danz-fe-profile-card__id p { margin: 4px 0 0; }

/* Chips (styles, niveaux) */
.danz-fe-chips { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.danz-fe-chip {
  background: var(--danz-fe-surface-2);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--danz-fe-text);
}

/* Family grid */
.danz-fe-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.danz-fe-family-card { text-align: center; padding: 16px; }
.danz-fe-family-card img,
.danz-fe-family-card__avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--danz-fe-surface-2);
  color: var(--danz-fe-text-muted);
  font-size: 28px; font-weight: 600;
}
.danz-fe-family-card h4 { margin: 0; font-size: 15px; color: var(--danz-fe-text); }

/* Collapsible */
.danz-fe-collapsible {
  background: var(--danz-fe-surface);
  border: 1px solid var(--danz-fe-border);
  border-radius: var(--danz-fe-radius);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.danz-fe-collapsible summary { cursor: pointer; font-weight: 500; padding: 4px 0; }
.danz-fe-collapsible__body { margin-top: 12px; }

/* Ledger par carte (dépliable via bouton "Historique") */
.danz-fe-wallet-card__history { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--danz-fe-border); }
.danz-fe-wallet-card__history .danz-fe-table { margin-top: 0; }

/* Cutoff indicator */
.danz-fe-reservation-card__cutoff { margin: 8px 0 0; font-size: 13px; }

/* Toast */
.danz-fe-toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 9999; max-width: 90vw; }
.danz-fe-toast .msg { background: #111; color: #fff; padding: 10px 14px; border-radius: 8px; margin-top: 8px; font-size: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.danz-fe-toast .msg.ok { background: #16a34a; }
.danz-fe-toast .msg.err { background: #dc2626; }

/* Responsive */
@media (max-width: 640px) {
  .danz-fe-account { padding: 12px; }
  .danz-fe-wallet-card,
  .danz-fe-reservation-card,
  .danz-fe-ticket-card,
  .danz-fe-profile-card { padding: 16px; }
  .danz-fe-kpi .value { font-size: 28px; }
  .danz-fe-table thead { display: none; }
  .danz-fe-table tr {
    display: block;
    border-bottom: 1px solid var(--danz-fe-border);
    padding: 8px 0;
  }
  .danz-fe-table td {
    display: block;
    padding: 4px 12px;
    border: 0;
    font-size: 13px;
  }
  .danz-fe-table td::before {
    content: attr(data-label) ' : ';
    font-weight: 600;
    color: var(--danz-fe-text-muted);
    margin-right: 6px;
  }
  .danz-fe-qr img { width: 200px; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --danz-fe-bg: #0f172a;
    --danz-fe-surface: #1e293b;
    --danz-fe-surface-2: #0f172a;
    --danz-fe-text: #f1f5f9;
    --danz-fe-text-muted: #94a3b8;
    --danz-fe-border: #334155;
    --danz-fe-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  }
  .danz-fe-badge--active   { background: rgba(34, 197, 94, .15);  color: #4ade80; }
  .danz-fe-badge--expired  { background: rgba(239, 68, 68, .15);  color: #f87171; }
  .danz-fe-badge--paused   { background: rgba(245, 158, 11, .15); color: #fbbf24; }
  .danz-fe-btn--danger { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); color: #fca5a5; }
}

/* Print */
@media print {
  .danz-fe-tabs, .danz-fe-btn, .danz-fe-toast, .danz-fe-collapsible { display: none !important; }
  .danz-fe-card { box-shadow: none !important; border: 1px solid #ccc !important; page-break-inside: avoid; }
}

/* Endpoint icons (menu WC My Account) */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--danz-portefeuille a::before { content: "\1F4B3"; margin-right: 6px; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--danz-reservations a::before { content: "\1F4C5"; margin-right: 6px; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--danz-tickets a::before      { content: "\1F39F"; margin-right: 6px; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--danz-profil a::before       { content: "\1F464"; margin-right: 6px; }