/*!
 * 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); }

/* Invite de connexion (visiteur déconnecté) — UNE seule carte, centrée. */
.danz-fe-account--login { max-width: 460px; min-height: 46vh; display: flex; align-items: center; justify-content: center; }
.danz-fe-account--login.danz-fe-account--login-form { max-width: 540px; }
.danz-fe-account__login-card { width: 100%; text-align: center; padding: 40px 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.danz-fe-account__login-icon { font-size: 38px; line-height: 1; margin-bottom: 4px; filter: grayscale(1); opacity: .5; }
.danz-fe-account__login-card h3 { margin: 0 0 6px; font-size: 22px; }
/* Titre redondant du formulaire WC (« Se connecter ») masqué — on garde notre h3. */
.danz-fe-account__login-card h2 { display: none; }
.danz-fe-account__login-card .woocommerce-notices-wrapper:empty { display: none; }
.danz-fe-account__login-card p { margin: 0; color: var(--danz-fe-text-muted); }
.danz-fe-account__login-card .danz-fe-btn { margin-top: 12px; }
/* Formulaire WooCommerce intégré dans la carte (hérite du thème, aligné à gauche). */
.danz-fe-account__login-card .woocommerce,
.danz-fe-account__login-card form.login { width: 100%; text-align: left; }
.danz-fe-account__login-card .woocommerce-form-row,
.danz-fe-account__login-card .form-row { margin: 0 0 14px; }
.danz-fe-account__login-card label { display: block; margin: 0 0 6px; font-weight: 600; font-size: 14px; }
.danz-fe-account__login-card input[type="text"],
.danz-fe-account__login-card input[type="email"],
.danz-fe-account__login-card input[type="password"] {
  width: 100%; padding: 11px 14px; border: 1px solid var(--danz-fe-border);
  border-radius: var(--danz-fe-radius); background: var(--danz-fe-bg); color: var(--danz-fe-text);
  font-size: 15px; box-sizing: border-box;
}
.danz-fe-account__login-card button[type="submit"],
.danz-fe-account__login-card .woocommerce-button {
  width: 100%; margin-top: 4px; padding: 12px 18px; border: 0; cursor: pointer;
  border-radius: 999px; background: var(--danz-fe-primary, var(--danz-color-primary, #F5333F)); color: var(--danz-fe-bg, #fff);
  font-weight: 700; font-size: 15px;
}
.danz-fe-account__login-card .lost_password { margin-top: 12px; font-size: 14px; }
.danz-fe-account__login-card .lost_password a { color: var(--danz-fe-primary, var(--danz-color-primary, #F5333F)); }

/* =====================================================================
 * Compte « app » — 2 colonnes : menu groupé à gauche + contenu à droite.
 * Une seule section visible à la fois (bascule via account-fe.js).
 * ===================================================================== */
.danz-fe-account--app {
  max-width: 1140px; margin: 0 auto; padding: 16px;
  display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 28px;
  align-items: start;
}
.danz-fe-account__sidebar {
  position: sticky; top: 88px;
  background: var(--danz-fe-surface);
  border: 1px solid var(--danz-fe-border);
  border-radius: var(--danz-fe-radius);
  padding: 14px; box-shadow: var(--danz-fe-shadow);
  display: flex; flex-direction: column;
}
.danz-fe-account__user {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--danz-fe-border);
}
.danz-fe-account__avatar {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; color: var(--danz-fe-bg, #fff); font-weight: 700;
  background: var(--danz-fe-primary, var(--danz-color-primary, #F5333F));
}
.danz-fe-account__uname {
  font-weight: 600; font-size: 14px; color: var(--danz-fe-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.danz-fe-account__burger { display: none; margin-left: auto; background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--danz-fe-text); }
.danz-fe-account__group { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.danz-fe-account__group-title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--danz-fe-text-muted); padding: 4px 10px 3px;
}
.danz-fe-account__navitem {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 10px;
  color: var(--danz-fe-text) !important; text-decoration: none !important; font-size: 14px; font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.danz-fe-account__navitem:hover { background: rgba(127, 127, 127, .12); color: var(--danz-fe-text) !important; }
.danz-fe-account__navitem.is-active { background: var(--danz-fe-primary, var(--danz-color-primary, #F5333F)); color: var(--danz-fe-bg, #fff) !important; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.danz-fe-account__navico { flex: 0 0 auto; display: inline-flex; align-items: center; }
.danz-fe-account__navico svg { width: 18px; height: 18px; display: block; }
/* icône un peu plus discrète sur les items inactifs, pleine sur l'actif */
.danz-fe-account__navitem:not(.is-active) .danz-fe-account__navico { opacity: .7; }
.danz-fe-account__navlabel { line-height: 1.25; }
.danz-fe-account__logout {
  margin-top: 12px; padding: 10px 11px;
  border-top: 1px solid var(--danz-fe-border);
  color: var(--danz-fe-text-muted) !important; text-decoration: none !important; font-size: 13px; font-weight: 500;
}
.danz-fe-account__logout:hover { color: var(--danz-fe-text) !important; }
.danz-fe-account__main { min-width: 0; }
.danz-fe-account__panel { animation: danzAccFade .22s ease; }
.danz-fe-account__panel[hidden] { display: none !important; }
.danz-fe-account__main > .danz-fe-account__panel { max-width: 820px; }
@keyframes danzAccFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Responsive : sidebar empilée au-dessus du contenu. Sur mobile le menu reste
   TOUJOURS ouvert et visible (pas de burger ni de repli). */
@media (max-width: 820px) {
  .danz-fe-account--app { grid-template-columns: 1fr; gap: 14px; }
  .danz-fe-account__sidebar { position: static; }
  .danz-fe-account__burger { display: none; }
}

/* 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;
}
/* v1.24.211 — RÈGLE D'OR étendue aux états : chaque hover/actif réaffirme
   fond ET texte pour que le thème du site ne rende jamais un bouton illisible. */
.danz-fe-btn:hover { background: var(--danz-fe-surface-2); color: var(--danz-fe-text); }
.danz-fe-btn:active { background: var(--danz-fe-text); color: var(--danz-fe-surface); border-color: var(--danz-fe-text); }
.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); color: #fff; }
.danz-fe-btn--primary:active { background: var(--danz-fe-primary-600); border-color: var(--danz-fe-primary-600); color: #fff; filter: brightness(.85); }
.danz-fe-btn--danger { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.danz-fe-btn--danger:hover { background: #fee2e2; color: #991b1b; }
.danz-fe-btn--danger:active { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.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) */

/* Message de réservation/annulation (planning) — badge AUTOPORTANT (fond + texte)
   pour rester LISIBLE dans tous les modes d'affichage (grid, list, week, studios,
   table, compact) et en clair comme en sombre. Avant : couleur de texte inline
   #b91c1c / #16a34a invisible sur carte sombre. */
.js-danz-book-msg { display: block; margin-top: 6px; font-size: .85rem; line-height: 1.45; font-weight: 600; }
.js-danz-book-msg.is-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; padding: 7px 11px; border-radius: 8px; }
.js-danz-book-msg.is-ok    { background: #dcfce7; color: #166534; border: 1px solid #86efac; padding: 7px 11px; border-radius: 8px; }

/* ====================== Planning : les images ==========================
 * v1.24.465 — La photo du professeur n'avait aucune règle.
 *
 * Elle sortait donc à sa taille naturelle : une pastille de professeur
 * pouvait occuper la moitié de la page, selon le thème et la photo
 * d'origine. On la contraint ici, et on pose un garde-fou sur toute image
 * placée dans un planning — une pastille, un logo de studio, une vignette
 * de cours ne doivent jamais dépasser leur ligne.
 */
.danz-fe-planning__chip-avatar {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: 50%; object-fit: cover;
  margin-right: 6px; vertical-align: middle;
  background: rgba(127,127,127,.18);
}
.danz-fe-planning img,
.danz-fe-planning__card img,
.danz-studio-widget--danz-horaire img { max-width: 100%; height: auto; }
.danz-fe-planning__chip { display: inline-flex; align-items: center; }

/* ============== Planning : la navigation de semaine ====================
 * v1.24.466 — « Semaine suivante » est un lien, et aucune règle ne lui
 * donnait de couleur : il retombait sur le bleu par défaut du navigateur.
 * Sur un fond sombre, ce bleu tombe à 2,1:1 — illisible. Il suit désormais
 * l'encre de la surface, comme tout le reste du planning.
 */
.danz-fe-planning__nav-btn,
.danz-fe-planning__nav-btn:visited { color: var(--danz-fe-text); text-decoration: none; }
.danz-fe-planning__nav-btn:hover { color: var(--danz-fe-text); text-decoration: underline; }
.danz-fe-planning__nav-btn:focus-visible {
  outline: 3px solid var(--danz-fe-primary); outline-offset: 2px; border-radius: 6px;
}
/* Un bouton désactivé doit rester lisible : atténué, jamais effacé. */
.danz-fe-planning__nav-btn.is-disabled,
.danz-fe-planning__nav-btn[aria-disabled="true"] {
  color: var(--danz-fe-text-muted); opacity: 1; cursor: default; text-decoration: none;
}

/* ============ Planning : les noms de cours qui débordent ================
 * v1.24.467 — « ChorégraphieContemporaineAvancée… » sortait de sa carte.
 *
 * Un nom de cours écrit d'un seul tenant — sans espace — ne peut pas être
 * coupé par le navigateur : il pousse sa boîte, et comme les cartes sont des
 * conteneurs flexibles dont les enfants refusent par défaut de rétrécir
 * sous leur contenu, le texte sortait jusqu'à 143 px hors de la carte sur
 * un téléphone. Mesuré sur les quatorze habillages, à 390 px de large.
 *
 * Deux règles suffisent : autoriser la coupure d'un mot trop long, et
 * permettre aux enfants souples de rétrécir.
 */
.danz-fe-planning__title-wrap,
.danz-fe-planning__card-h,
.danz-fe-planning__card,
.danz-fe-card,
.danz-fe-planning__card-body,
.danz-fe-planning__meta,
.danz-fe-planning__chip { min-width: 0; }

.danz-fe-planning__card-title,
.danz-fe-planning__title,
.danz-fe-planning__name,
.danz-fe-planning__title-wrap,
.danz-fe-planning__meta,
.danz-fe-planning__chip,
.danz-fe-planning__day-title,
.danz-fe-planning__card-h {
  /* v1.24.468 — Pas de césure automatique : « contemporain » se coupait en
     « contem-porain » alors qu'il tenait sur la ligne suivante. On autorise
     seulement la coupure d'un mot qui, seul, ne tient pas dans sa boîte. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

/* v1.24.468 — Un jour sans cours, quand on demande à le voir : présent,
   nommé, visiblement creux — mais jamais confondu avec une carte de cours. */
.danz-fe-planning__day--vide { opacity: .72; }
.danz-fe-planning__day-empty {
  margin: 0; padding: 14px 16px; border-radius: 10px;
  border: 1px dashed var(--danz-fe-border);
  background: var(--danz-fe-surface-2);
  color: var(--danz-fe-text-muted);
  font-size: 13px; font-style: italic;
}

/* v1.24.469 — Carte peinte à la couleur du cours : tout ce qu'elle contient
   suit son encre, sinon les métadonnées gardaient le gris du thème et
   disparaissaient sur un fond vif. */
.danz-fe-planning__card--teinte,
.danz-fe-planning__card--teinte * { color: inherit; }
.danz-fe-planning__card--teinte .danz-fe-planning__chip { background: rgba(255,255,255,.22); }
.danz-fe-planning__card--teinte .danz-fe-btn { border-color: currentColor; }

/* v1.24.470 — Garde-fou : le planning ne déborde jamais de sa colonne.
   Si un contenu reste plus large que la place disponible — une grille de
   sept jours sur un écran étroit, un nom qu'aucune coupure ne sauve — il
   défile à l'intérieur du planning au lieu de sortir dans la page. */
.danz-fe-planning { max-width: 100%; overflow-x: auto; }
.danz-fe-planning__grid,
.danz-fe-planning__cards,
.danz-fe-planning__list { max-width: 100%; }

/* v1.24.471 — Information masquée depuis le widget : retirée de l'affichage,
   mais laissée dans la page pour que les scripts continuent de la mettre à
   jour (la jauge de places se rafraîchit après chaque réservation). */
.danz-fe-invisible { display: none !important; }

/* ================= Prix boutique : la couleur de l'école ================
 * v1.24.493 — Le prix s'affichait dans un doré olivâtre (#958E09) qui
 * n'appartient à personne : c'est la teinte que WooCommerce calcule tout
 * seul dans sa propre feuille de style. Elle passait inaperçue au réglage
 * des couleurs, puisqu'elle ne vient ni du thème ni de Danz.
 *
 * WooCommerce l'écrit dans un `:where()`, de poids nul : une simple classe
 * suffit à reprendre la main, sans `!important` ni surenchère.
 */
/* v1.24.494 — Il faut peser plus lourd que WooCommerce, pas seulement
   arriver après lui : sa règle vaut trois classes et deux éléments, la
   nôtre en valait autant et perdait au tirage. On ajoute `body`, qui suffit
   à faire pencher la balance sans recourir à `!important`. */
body.woocommerce div.product p.price,
body.woocommerce div.product span.price,
body.woocommerce ul.products li.product .price,
body.woocommerce-page div.product p.price,
body.woocommerce-page div.product span.price,
body.woocommerce-page ul.products li.product .price,
body .wc-block-components-product-price,
body .wc-block-grid__product-price {
  color: var(--danz-color-primary, var(--danz-fe-primary, #111827));
}
/* Le prix barré d'une promotion reste discret : c'est l'ancien montant. */
body.woocommerce div.product p.price del,
body.woocommerce-page div.product p.price del,
body.woocommerce ul.products li.product .price del {
  color: var(--danz-fe-text-muted, #6b7280); opacity: 1;
}