/* ============================================================
   JDT Trail Planner — Styles
   Thème aligné sur jourdetrail.fr (jdt-super-simulateur)
   Palette : slate + bleu #3b82f6 + orange #ea580c
   Font    : system-ui, sans-serif
   ============================================================ */

/* -- Variables ----------------------------------------------- */
:root {
  --jdt-blue: #3b82f6;
  --jdt-blue-dark: #2563eb;
  --jdt-blue-bg: #eff6ff;
  --jdt-blue-cyan: #3baef6;
  --jdt-orange: #ea580c;
  --jdt-orange-bg: #fff7ed;
  --jdt-green: #10b981;
  --jdt-green-dark: #059669;
  --jdt-green-bg: #dcfce7;
  --jdt-purple: #6366f1;
  --jdt-purple-dark: #4f46e5;
  --jdt-amber: #f59e0b;
  --jdt-red: #ef4444;
  --jdt-red-bg: #fef2f2;

  --jdt-text-900: #0f172a;
  --jdt-text-800: #1e293b;
  --jdt-text-700: #334155;
  --jdt-text-500: #64748b;
  --jdt-text-400: #94a3b8;

  --jdt-bg-white: #ffffff;
  --jdt-bg-50: #f8fafc;
  --jdt-bg-100: #f1f5f9;
  --jdt-border: #e2e8f0;
  --jdt-border-md: #cbd5e1;

  --jdt-r-sm: 6px;
  --jdt-r: 8px;
  --jdt-r-lg: 12px;

  --jdt-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --jdt-shadow: 0 2px 8px rgba(0, 0, 0, .10);
  --jdt-t: .2s ease;
  --jdt-font: system-ui, -apple-system, sans-serif;
}

/* -- Reset --------------------------------------------------- */
/* #jdt-planner, #jdt-planner * { box-sizing: border-box; margin: 0; padding: 0; }

#jdt-planner {
  font-family: var(--jdt-font);
  font-size: 15px;
  color: var(--jdt-text-700);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
*/

/* -----------------------------------------------------------
   FORMULAIRE
----------------------------------------------------------- */
.jdt-form-wrap {
  max-width: 800px;
  margin: 120px auto 0;
  padding: 0 16px 60px;
}

/* Progress bar */
.jdt-progress {
  display: flex;
  align-items: center;
  padding: 10px 0 10px;
}

.jdt-progress-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: relative;
}

.jdt-progress-step::before {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 2px;
  background: var(--jdt-border);
  z-index: 0;
}

.jdt-progress-step:last-child::before {
  display: none;
}

.jdt-progress-step .jdt-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--jdt-border-md);
  background: var(--jdt-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--jdt-text-400);
  transition: var(--jdt-t);
  position: relative;
  z-index: 1;
}

.jdt-progress-step.active .jdt-step-dot {
  border-color: var(--jdt-blue);
  background: var(--jdt-blue);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
}

.jdt-progress-step.done .jdt-step-dot {
  border-color: var(--jdt-green);
  background: var(--jdt-green);
  color: #fff;
}

.jdt-progress-step.done::before {
  background: var(--jdt-green);
}

.jdt-step-label {
  font-weight: 600;
  color: var(--jdt-text-400);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.jdt-progress-step.active .jdt-step-label {
  color: var(--jdt-blue);
}

.jdt-progress-step.done .jdt-step-label {
  color: var(--jdt-green);
}

/* Étapes */
.jdt-step {
  display: none;
  animation: jdtFadeUp .25s ease both;
}

.jdt-step.active {
  display: block;
}

@keyframes jdtFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.jdt-step-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--jdt-text-800);
  margin-bottom: 4px;
  line-height: 1.25;
}

.jdt-step-subtitle {
  margin-bottom: 28px;
}

/* Champs */
.jdt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.jdt-field label {
  font-weight: 600;
  color: var(--jdt-text-700);
}

.jdt-field input[type="text"],
.jdt-field input[type="number"],
.jdt-field input[type="date"],
.jdt-field select {
  padding: 10px 12px;
  border: 1px solid var(--jdt-border-md);
  border-radius: var(--jdt-r);
  background: var(--jdt-bg-white);
  font-family: var(--jdt-font);
  color: var(--jdt-text-900);
  transition: var(--jdt-t);
  outline: none;
  appearance: none;
  width: 100%;
}

.jdt-field input:focus,
.jdt-field select:focus {
  border-color: var(--jdt-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.jdt-field input.error {
  border-color: var(--jdt-red);
}

.jdt-field-hint {
  color: var(--jdt-text-500);
  line-height: 1.4;
  padding: 5px 0 0 5px;
}

.jdt-field-error {
  color: var(--jdt-red);
  display: none;
}

.jdt-field-error.visible {
  display: block;
}

.jdt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 500px) {
  .jdt-row {
    grid-template-columns: 1fr;
  }
}

/* Toggle durée */
.jdt-toggle-group {
  display: flex;
  /*border: 1px solid var(--jdt-border-md);
  border-radius: var(--jdt-r);*/
  overflow: hidden;
  margin-bottom: 14px;
}

.jdt-toggle-group button {
  flex: 1;
  padding: 9px 12px;
  background: var(--jdt-bg-white);
  border: none;
  font-family: var(--jdt-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--jdt-text-500);
  cursor: pointer;
  transition: var(--jdt-t);
}

.jdt-toggle-group button.active {
  background: var(--jdt-blue);
  color: #fff;
}

/* Jours */
.jdt-days-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.jdt-day-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--jdt-border-md);
  background: var(--jdt-bg-white);
  font-family: var(--jdt-font);
  font-size: 11px;
  font-weight: 700;
  color: var(--jdt-text-500);
  cursor: pointer;
  transition: var(--jdt-t);
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.jdt-day-btn:hover {
  border-color: var(--jdt-blue);
  color: var(--jdt-blue);
}

.jdt-day-btn.selected {
  border-color: var(--jdt-blue);
  background: var(--jdt-blue);
  color: #fff;
}

/* Pills */
.jdt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jdt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--jdt-border-md);
  border-radius: 20px;
  background: var(--jdt-bg-white);
  font-size: 13px;
  font-weight: 500;
  color: var(--jdt-text-700);
  cursor: pointer;
  transition: var(--jdt-t);
  user-select: none;
}

.jdt-pill input {
  display: none;
}

.jdt-pill:hover {
  border-color: var(--jdt-blue);
}

.jdt-pill.selected {
  border-color: var(--jdt-blue);
  background: var(--jdt-blue-bg);
  color: var(--jdt-blue-dark);
}

.pill-icon {
  font-size: 15px;
  line-height: 1;
}

/* Cartes mode profil */
.jdt-mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.jdt-mode-card {
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r-lg);
  padding: 18px;
  cursor: pointer;
  transition: var(--jdt-t);
  background: var(--jdt-bg-white);
}

.jdt-mode-card:hover {
  border-color: var(--jdt-blue);
}

.jdt-mode-card.selected {
  border-color: var(--jdt-blue);
  background: var(--jdt-blue-bg);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}

.jdt-mode-card input {
  display: none;
}

.jdt-mode-card .card-icon {
  font-size: 26px;
  margin-bottom: 8px;
}

.jdt-mode-card .card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--jdt-text-800);
  margin-bottom: 4px;
}

.jdt-mode-card .card-desc {
  color: var(--jdt-text-500);
  line-height: 1.4;
}

/* Encart niveau */
.jdt-level-explainer {
  background: var(--jdt-bg-50);
  border: 1px solid var(--jdt-border);
  border-left: 3px solid var(--jdt-blue);
  border-radius: 0 var(--jdt-r) var(--jdt-r) 0;
  padding: 13px 16px;
  margin-bottom: 18px;
  color: var(--jdt-text-700);
  line-height: 1.6;
}

.jdt-level-explainer strong {
  display: block;
  color: var(--jdt-text-800);
  font-weight: 700;
  margin-bottom: 6px;
}

/* Récap */
.jdt-recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

.jdt-recap-item {
  background: var(--jdt-bg-50);
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r);
  padding: 13px 15px;
}

.jdt-recap-item .recap-label {
  font-weight: 700;
  color: var(--jdt-text-500);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 4px;
}

.jdt-recap-item .recap-value {
  font-weight: 700;
  color: var(--jdt-text-900);
}

/* Navigation */
.jdt-form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
}

/* Boutons */
.jdt-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: var(--jdt-r);
  font-family: var(--jdt-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--jdt-t);
  border: none;
  text-decoration: none;
}

.jdt-btn-primary {
  background: var(--jdt-blue);
  color: #fff;
}

.jdt-btn-primary:hover {
  background: var(--jdt-blue-dark);
}

.jdt-btn-primary:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.jdt-btn-ghost {
  background: var(--jdt-bg-white);
  color: var(--jdt-text-500);
  border: 1px solid var(--jdt-border-md);
}

.jdt-btn-ghost:hover {
  background: var(--jdt-bg-100);
  border-color: var(--jdt-text-400);
}

.jdt-btn-toggle.blesse.active {
  background: var(--jdt-red-bg);
  border-color: var(--jdt-red);
  color: var(--jdt-red);
}

.jdt-btn-toggle.fatigue.active {
  background: var(--jdt-orange-bg);
  border-color: var(--jdt-orange);
  color: var(--jdt-orange);
}

.jdt-btn-fire {
  background: var(--jdt-orange);
  color: #fff;
}

.jdt-btn-fire:hover {
  background: #c2410c;
}

/* Loader */
.jdt-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
}

.jdt-loader-ring {
  width: 40px;
  height: 40px;
  border: 3px solid var(--jdt-border);
  border-top-color: var(--jdt-blue);
  border-radius: 50%;
  animation: jdtSpin .8s linear infinite;
}

@keyframes jdtSpin {
  to {
    transform: rotate(360deg);
  }
}

.jdt-loader p {
  color: var(--jdt-text-500);
  font-size: 14px;
  font-weight: 500;
}

/* -----------------------------------------------------------
   PLAN — VUE GÉNÉRALE
----------------------------------------------------------- */
.jdt-plan-wrap {
  margin: 0 auto;
  padding: 0 16px 80px;
}

.jdt-plan-hero {
  padding: 0 0 24px;
  border-bottom: 2px solid var(--jdt-bg-100);
  margin-bottom: 28px;
}

.jdt-plan-hero h1 {
  font-size: 3rem;
  font-weight: 800;
  color: var(--jdt-text-800);
  margin-bottom: 8px;
  line-height: 1.2;
}

.jdt-plan-hero h1 em {
  font-style: normal;
  color: var(--jdt-orange);
}

.jdt-plan-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.jdt-badge {
  padding: 4px 11px;
  border-radius: 20px;
  font-weight: 600;
  background: var(--jdt-bg-100);
  color: var(--jdt-text-500);
  border: 1px solid var(--jdt-border);
}

.jdt-badge.moss {
  background: var(--jdt-green-bg);
  color: #166534;
  border-color: #86efac;
}

.jdt-badge.fire {
  background: var(--jdt-orange-bg);
  color: var(--jdt-orange);
  border-color: #fdba74;
}

.jdt-badge.blue {
  background: var(--jdt-blue-bg);
  color: var(--jdt-blue-dark);
  border-color: #93c5fd;
}

.jdt-plan-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.jdt-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--jdt-text-800);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--jdt-bg-100);
}

/* Phases */
.jdt-phases {
  margin-bottom: 40px;
}

.jdt-phases-timeline {
  display: flex;
  border-radius: var(--jdt-r);
  overflow: hidden;
  height: 48px;
  margin-bottom: 14px;
  box-shadow: var(--jdt-shadow-sm);
}

.jdt-phase-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.jdt-phase-bar.fondation {
  background: #94a3b8;
  color: var(--jdt-text-800);
}

.jdt-phase-bar.developpement {
  background: var(--jdt-blue);
}

.jdt-phase-bar.specifique {
  background: var(--jdt-orange);
}

.jdt-phase-bar.taper {
  background: var(--jdt-amber);
  color: var(--jdt-text-800);
}

.jdt-phases-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.jdt-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--jdt-text-500);
}

.jdt-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Grille semaines - Slider horizontal */
.jdt-weeks-scroller {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
}

.jdt-weeks-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 15px;
  flex: 1;
  margin-bottom: 0;
}

.jdt-weeks-grid::-webkit-scrollbar {
  height: 6px;
}

.jdt-weeks-grid::-webkit-scrollbar-track {
  background: var(--jdt-bg-100);
  border-radius: 4px;
}

.jdt-weeks-grid::-webkit-scrollbar-thumb {
  background: var(--jdt-border-md);
  border-radius: 4px;
}

.jdt-week-card {
  flex: 0 0 165px;
  scroll-snap-align: start;
}

.jdt-weeks-next-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--jdt-border-md);
  background: var(--jdt-bg-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--jdt-t);
  font-size: 16px;
  color: var(--jdt-text-700);
}

.jdt-weeks-next-btn:hover {
  border-color: var(--jdt-blue);
  color: var(--jdt-blue);
  box-shadow: var(--jdt-shadow-sm);
}

.jdt-week-card {
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r-lg);
  padding: 14px;
  background: var(--jdt-bg-white);
  cursor: pointer;
  transition: var(--jdt-t);
  position: relative;
  box-shadow: var(--jdt-shadow-sm);
}

.jdt-week-card:hover {
  border-color: var(--jdt-blue);
  box-shadow: var(--jdt-shadow);
  transform: translateY(-2px);
}

.jdt-week-card.recovery {
  background: var(--jdt-bg-50);
}

.jdt-week-card.is-current {
  border-color: var(--jdt-orange);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, .12);
}

.jdt-week-num {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 3px;
}

.jdt-week-phase {
  font-weight: 600;
  color: var(--jdt-blue);
  margin-bottom: 8px;
}

.jdt-week-phase.taper {
  color: var(--jdt-amber);
}

.jdt-week-phase.recovery {
  color: var(--jdt-text-400);
}

.jdt-week-phase.specifique {
  color: var(--jdt-orange);
}

.jdt-week-stats {
  font-weight: 800;
  color: var(--jdt-text-900);
  margin-bottom: 2px;
}

.jdt-week-stats span {
  font-size: 11px;
  color: var(--jdt-text-500);
  font-weight: 400;
}

.jdt-week-types {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 8px;
}

.jdt-week-card .recovery-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jdt-text-400);
}

/* Tags séances */
.jdt-session-tag {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: 500;
  /*text-transform: uppercase;*/
  letter-spacing: .03em;
}

.jdt-session-tag.EF {
  background: #dbeafe;
  color: #1d4ed8;
}

.jdt-session-tag.VMA {
  background: #fce7f3;
  color: #9d174d;
}

.jdt-session-tag.cotes {
  background: #fef3c7;
  color: #92400e;
}

.jdt-session-tag.sortie_longue {
  background: #ede9fe;
  color: #5b21b6;
}

.jdt-session-tag.renfo {
  background: #dcfce7;
  color: #166534;
}

.jdt-session-tag.repos_actif {
  background: var(--jdt-bg-100);
  color: var(--jdt-text-500);
}

.jdt-session-tag.repos {
  background: var(--jdt-bg-100);
  color: var(--jdt-text-400);
}

/* -----------------------------------------------------------
   PLAN DÉTAILLÉ
----------------------------------------------------------- */
.jdt-detail-section {
  margin-bottom: 48px;
}

.jdt-week-detail {
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r-lg);
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: var(--jdt-shadow-sm);
}

.jdt-week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--jdt-bg-50);
  cursor: pointer;
  gap: 12px;
  transition: var(--jdt-t);
}

.jdt-week-header:hover {
  background: var(--jdt-bg-100);
}

.jdt-week-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jdt-week-header-num {
  font-weight: 800;
  color: var(--jdt-text-900);
  min-width: 28px;
}

.jdt-week-header-meta {
  color: var(--jdt-text-500);
}

.jdt-week-header-meta strong {
  color: var(--jdt-blue);
  font-weight: 700;
}

.jdt-week-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jdt-week-header-stats {
  color: var(--jdt-text-500);
  text-align: right;
}

.jdt-chevron {
  color: var(--jdt-text-400);
  font-size: 14px;
  transition: transform var(--jdt-t);
}

.jdt-week-detail.open .jdt-chevron {
  transform: rotate(180deg);
}

.jdt-week-body {
  display: none;
}

.jdt-week-detail.open .jdt-week-body {
  display: block;
}

.jdt-week-detail.recovery-week .jdt-week-header-meta strong {
  color: var(--jdt-text-500);
}

.jdt-day-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  border-top: 1px solid var(--jdt-border);
  min-height: 58px;
}

.jdt-day-label-col {
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(248, 250, 252, .7);
  border-right: 1px solid var(--jdt-border);
}

.jdt-day-name {
  font-weight: 700;
  color: var(--jdt-text-800);
}

.jdt-day-content {
  padding: 13px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.jdt-day-session-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jdt-day-session-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.jdt-day-session-desc {
  line-height: 1.5;
}

.jdt-session-toggle {
  background: none;
  border: none;
  padding: 5px;
  cursor: pointer;
  color: var(--jdt-blue-cyan);
  font-size: 12px;
  font-family: var(--jdt-font);
  font-weight: 600;
  gap: 3px;
  box-shadow: var(--jdt-blue) 0px 0px 0px 0.5px !important;
}

.jdt-session-toggle:hover,
.jdt-session-toggle:focus {
  background: var(--jdt-blue);
}

.jdt-session-extra {
  display: none;
  padding: 12px 14px;
  background: var(--jdt-bg-50);
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r);
  line-height: 1.6;
}

.jdt-session-extra.open {
  display: block;
}

.jdt-session-extra ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.jdt-session-extra ul li::before {
  content: '? ';
  color: var(--jdt-blue);
  font-weight: 700;
}

.jdt-session-extra .tip {
  display: inline-block;
  background: var(--jdt-blue-bg);
  color: var(--jdt-blue-dark);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin: 3px 3px 0 0;
}

/* -----------------------------------------------------------
   ZONES
----------------------------------------------------------- */
.jdt-zones-section {
  margin-bottom: 40px;
}

.jdt-zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 10px;
}

.jdt-zone-card {
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r);
  padding: 13px 15px;
  background: var(--jdt-bg-white);
  box-shadow: var(--jdt-shadow-sm);
}

.jdt-zone-name {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 3px;
}

.jdt-zone-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--jdt-text-900);
}

.jdt-zone-desc {
  font-size: 13px;
  margin-top: 2px;
  line-height: 1.4;
}

/* -----------------------------------------------------------
   DASHBOARD
----------------------------------------------------------- */
.jdt-dashboard {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 80px;
}

.jdt-dash-hero {
  padding: 28px 0 22px;
  margin-bottom: 24px;
}

.jdt-dash-hero h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--jdt-text-800);
  margin-bottom: 4px;
}

.jdt-dash-hero p {
  color: var(--jdt-text-500);
  font-size: 14px;
}

.jdt-today-card {
  background: var(--jdt-text-800);
  color: #fff;
  border-radius: var(--jdt-r-lg);
  padding: 24px 28px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.jdt-today-card::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
}

.jdt-today-card .today-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 6px;
}

.jdt-today-card .today-session {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.jdt-today-card .today-desc {
  color: rgba(255, 255, 255, .65);
  line-height: 1.5;
  max-width: 480px;
}

.jdt-today-card .today-meta {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.jdt-today-meta-pill {
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .12);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

/* Validation RPE - Action Buttons */
.jdt-rpe-actions {
  margin-top: 24px;
}

.rpe-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin-bottom: 20px;
  width: 100%;
}

.rpe-question {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 12px;
}

.rpe-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.jdt-rpe-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--jdt-r-md);
  padding: 12px 0;
  flex: 1;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
}

.jdt-rpe-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  color: #fff;
}

.jdt-rpe-btn:active {
  transform: translateY(0);
}

.rpe-emoji {
  font-size: 24px;
  margin-bottom: 6px;
  line-height: 1;
}

.rpe-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* État survol par couleur */
.jdt-rpe-btn.rpe-easy:hover {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.15);
}

.jdt-rpe-btn.rpe-mod:hover {
  border-color: #F59E0B;
  background: rgba(245, 158, 11, 0.15);
}

.jdt-rpe-btn.rpe-hard:hover {
  border-color: #F97316;
  background: rgba(249, 115, 22, 0.15);
}

.jdt-rpe-btn.rpe-vhard:hover {
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.15);
}

.jdt-rpe-btn.rpe-max:hover {
  border-color: #8B5CF6;
  background: rgba(139, 92, 246, 0.15);
}

/* Success Block */
.jdt-rpe-success {
  display: flex;
  align-items: center;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 16px 20px;
  border-radius: var(--jdt-r-md);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.rpe-check {
  font-size: 18px;
  margin-right: 12px;
}

.jdt-progress-bar-wrap {
  margin-bottom: 20px;
}

.jdt-progress-bar-wrap h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--jdt-text-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

.jdt-global-bar {
  height: 8px;
  background: var(--jdt-bg-100);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 6px;
}

.jdt-global-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--jdt-blue), #60a5fa);
  border-radius: 8px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.jdt-global-bar-label {
  font-size: 12px;
  color: var(--jdt-text-500);
}

.jdt-current-week {
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r-lg);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--jdt-shadow-sm);
}

.jdt-cw-header {
  padding: 15px 20px;
  background: var(--jdt-bg-50);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--jdt-border);
}

.jdt-cw-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--jdt-text-800);
}

.jdt-cw-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.jdt-cw-day {
  padding: 14px 8px;
  border-right: 1px solid var(--jdt-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  position: relative;
}

.jdt-cw-day:last-child {
  border-right: none;
}

.jdt-cw-day.today {
  background: var(--jdt-orange-bg);
}

.jdt-cw-day.today::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--jdt-orange);
}

.jdt-cw-day .cw-day-name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.jdt-cw-day.today .cw-day-name {
  color: var(--jdt-orange);
}

.jdt-cw-day .cw-session-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.jdt-cw-day .cw-session-label {
  font-size: 13px;
  line-height: 1.2;
}

/* -----------------------------------------------------------
   MESSAGES
----------------------------------------------------------- */
.jdt-notice {
  padding: 12px 16px;
  border-radius: var(--jdt-r);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.jdt-notice.error {
  background: var(--jdt-red-bg);
  border: 1px solid #fecaca;
  color: #991b1b;
}

.jdt-notice.success {
  background: var(--jdt-green-bg);
  border: 1px solid #86efac;
  color: #166534;
}

/* -- Avertissements terrain -------------------------------- */
.jdt-terrain-warning {
  border-radius: var(--jdt-r);
  padding: 14px 18px;
  margin-bottom: 20px;
  border: 1px solid;
}

.jdt-terrain-warning--warning {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}

.jdt-terrain-warning--info {
  background: var(--jdt-blue-bg);
  border-color: #93c5fd;
  color: var(--jdt-blue-dark);
}

.jtw-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}

.jtw-message {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.jtw-tips {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  padding-left: 0;
}

.jtw-tips li::before {
  content: '? ';
  font-weight: 700;
}

/* -- Note terrain dans les séances ------------------------ */
.jdt-terrain-note {
  font-size: 13px;
  color: var(--jdt-text-500);
  background: var(--jdt-bg-50);
  border-left: 2px solid var(--jdt-border-md);
  padding: 4px 10px;
  border-radius: 0 var(--jdt-r-sm) var(--jdt-r-sm) 0;
  margin-top: 4px;
  line-height: 1.4;
}

/* -----------------------------------------------------------
   LAYOUT SIDEBAR & TABS
----------------------------------------------------------- */
.jdt-plan-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.jdt-plan-content {
  flex: 1;
  min-width: 0;
}

.jdt-plan-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
  border-right: 1px solid var(--jdt-border);
  padding-right: 30px;
  /* Optionnel pour un effet full hauteur, depend de l'intégration WP */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.jdt-tab-content {
  display: none;
}

.jdt-tab-content.active {
  display: block;
  animation: jdtFadeIn 0.3s ease forwards;
}

.jdt-sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.jdt-sidebar-logo {
  width: 50px;
}

.jdt-sidebar-brand {
  display: flex;
  flex-direction: column;
}

.jdt-sidebar-brand strong {
  font-size: 18px;
  color: var(--jdt-text-900);
  line-height: 1.2;
}

.jdt-sidebar-brand span {
  font-size: 13px;
  color: var(--jdt-muted);
}

.jdt-sidebar-group {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--jdt-text-500);
  margin-bottom: 12px;
  margin-top: 30px;
  padding-left: 12px;
}

.jdt-sidebar-group:first-of-type {
  margin-top: 0;
}

.jdt-sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jdt-menu-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 8px 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  font-weight: 500;
  color: var(--jdt-text-700);
  text-decoration: none;
  box-shadow: none !important;
  margin: 1px 0;
}

.section {
  padding: 0 !important;
}

.jdt-menu-btn:hover {
  background: var(--jdt-bg-50) !important;
  color: var(--jdt-text-900) !important;
}

.jdt-menu-btn.active {
  background: #FFF0E9;
  color: #E07050;
  font-weight: 600;
}

.jdt-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--jdt-text-400);
}

.jdt-menu-btn:hover .jdt-menu-icon {
  color: var(--jdt-text-700);
}

.jdt-menu-btn.active .jdt-menu-icon {
  color: #E07050;
}

.jdt-menu-badge {
  margin-left: auto;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 12px;
  color: var(--jdt-text-500);
}

.jdt-menu-btn.active .jdt-menu-badge {
  background: rgba(224, 112, 80, 0.15);
  color: #E07050;
}

/* -----------------------------------------------------------
   GUT TRAINING MODULE
----------------------------------------------------------- */

.jdt-gut-section {
  padding: 10px 0;
}

.jdt-gut-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--jdt-blue-bg);
  padding: 20px;
  border-radius: var(--jdt-r-md);
  margin-bottom: 30px;
  border-left: 4px solid var(--jdt-blue);
  color: var(--jdt-blue-dark);
}

.jdt-gut-banner .gut-banner-icon {
  font-size: 24px;
  line-height: 1;
}

.jdt-gut-banner p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.jdt-gut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.jdt-gut-card {
  background: var(--jdt-bg-white);
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r-sm);
  padding: 20px;
  box-shadow: var(--jdt-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.jdt-gut-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--jdt-shadow-md);
  border-color: var(--jdt-border-md);
}

.gut-card-header {
  margin-bottom: 12px;
}

.gut-step-num {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--jdt-blue);
  background: var(--jdt-blue-bg);
  padding: 4px 8px;
  border-radius: 12px;
  margin-bottom: 8px;
}

.gut-step-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--jdt-text-900);
  margin: 0;
}

.gut-step-desc {
  font-size: 14px;
  color: var(--jdt-text-600);
  line-height: 1.5;
  margin: 0;
}

.gut-card-center {
  align-items: center;
  text-align: center;
  padding: 24px;
}

.gut-card-center .gut-card-icon {
  font-size: 48px;
  margin-bottom: 12px;
  line-height: 1;
}

.gut-card-center .gut-card-label {
  font-size: 14px;
  color: var(--jdt-text-600);
  margin-bottom: 8px;
}

.gut-card-center .gut-card-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--jdt-text-900);
}

.jdt-gut-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jdt-gut-rules li {
  position: relative;
  padding-left: 24px;
  line-height: 1.6;
  color: var(--jdt-text-700);
  font-size: 15px;
}

.jdt-gut-rules li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #E07050;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.2;
}

.jdt-gut-rules li strong {
  color: var(--jdt-text-900);
}

.jdt-gut-banner--advanced {
  background: #F3E5F5;
  border-left-color: #AB47BC;
}

.jdt-gut-tool {
  background: var(--jdt-bg-50);
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r-md);
  padding: 5px 30px;
}

/* -----------------------------------------------------------
   LA ROUTINE DU TRAILEUR
----------------------------------------------------------- */

.jdt-routine-section {
  padding: 10px 0;
}

.jdt-routine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.jdt-routine-card {
  padding: 30px 24px;
  border-radius: var(--jdt-r-md);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jdt-routine-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--jdt-shadow-md);
}

.routine-icon {
  font-size: 40px;
  margin-bottom: 20px;
  line-height: 1;
}

.routine-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px 0;
}

.routine-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.routine-list li {
  position: relative;
  padding-left: 20px;
  line-height: 1.5;
  font-size: 14px;
}

.routine-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}

/* Morning */
.jdt-routine-morning {
  background: #EFF6FF;
  /* tailwind blue-50 */
  border: 1px solid #DBEAFE;
  color: #1E3A8A;
  /* tailwind blue-900 */
}

.jdt-routine-morning .routine-list li::before {
  color: #3B82F6;
}

/* Day */
.jdt-routine-day {
  background: var(--jdt-bg-white);
  border: 1px solid var(--jdt-border);
  color: var(--jdt-text-800);
}

.jdt-routine-day .routine-list li::before {
  color: #10B981;
  /* JDT success green */
}

/* Night */
.jdt-routine-night {
  background: #1E293B;
  /* tailwind slate-800 */
  border: 1px solid #0F172A;
  color: #F8FAFC;
}

.jdt-routine-night .routine-title {
  color: #FFFFFF;
}

.jdt-routine-night .routine-list li {
  color: #CBD5E1;
}

.jdt-routine-night .routine-list li::before {
  color: #818CF8;
  /* tailwind indigo-400 */
}

/* -----------------------------------------------------------
   RESPONSIVE
----------------------------------------------------------- */
/* -----------------------------------------------------------
   MOBILE SIDEBAR (OFF-CANVAS)
----------------------------------------------------------- */
.jdt-mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--jdt-bg-white);
  border-bottom: 1px solid var(--jdt-border);
  margin-bottom: 20px;
  border-radius: var(--jdt-r-lg);
  box-shadow: var(--jdt-shadow-sm);
}

.jdt-mobile-toggle,
.jdt-mobile-close {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--jdt-text-700);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.jdt-mobile-toggle:hover,
.jdt-mobile-close:hover {
  background: var(--jdt-bg-50);
  color: var(--jdt-text-900);
}

.jdt-mobile-close {
  display: none;
}

.jdt-sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.jdt-sidebar-backdrop.active {
  display: block;
  opacity: 1;
}

@media (max-width: 850px) {
  .jdt-plan-layout {
    flex-direction: column;
  }

  .jdt-mobile-topbar {
    display: flex !important;
  }

  .jdt-mobile-close {
    display: flex;
  }

  .jdt-plan-sidebar {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    background: var(--jdt-bg-white);
    z-index: 1000;
    padding: 24px;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: none;
    overflow-y: auto;
    border-right: none;
  }

  .jdt-plan-sidebar.mobile-open {
    left: 0;
  }

  .jdt-sidebar-menu {
    flex-direction: column;
    margin-bottom: 24px;
    gap: 8px;
  }

  .jdt-menu-btn {
    padding: 8px 16px;
  }

  .jdt-sidebar-header {
    justify-content: space-between;
    margin-top: 30px;
  }
}

@media (max-width: 600px) {
  .jdt-step-title {
    font-size: 1.3rem;
  }

  .jdt-plan-hero h1 {
    font-size: 1.5rem;
  }

  .jdt-weeks-section {
    display: none !important;
  }

  .jdt-day-row {
    grid-template-columns: 70px 1fr;
  }

  .jdt-day-content {
    padding: 11px 12px;
  }

  .jdt-today-card {
    padding: 18px 20px;
  }

  .jdt-cw-days {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .jdt-cw-day {
    padding: 10px 4px;
    border: none;
  }

  .jdt-mode-cards {
    grid-template-columns: 1fr;
  }

  .jdt-recap-grid {
    grid-template-columns: 1fr;
  }

  .jdt-gut-grid {
    grid-template-columns: 1fr;
  }

  .jdt-routine-grid {
    grid-template-columns: 1fr;
  }

  .jdt-plan-actions {
    flex-direction: column;
  }

  .jdt-stats-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------
   STATISTIQUES & PROGRESSION
----------------------------------------------------------- */
.jdt-stats-section {
  animation: jdtFadeUp .3s ease both;
}

.jdt-stats-chart-card {
  background: var(--jdt-bg-white);
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r-lg);
  box-shadow: var(--jdt-shadow);
  padding: 24px;
  margin-bottom: 28px;
}

.jdt-stats-chart-header {
  margin-bottom: 20px;
}

.jdt-stats-chart-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.jdt-rpe-chart {
  width: 100%;
  max-height: 260px;
  height: auto;
  display: block;
  font-family: var(--jdt-font);
}

.jdt-stats-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--jdt-border);
}

.jdt-stats-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--jdt-text-500);
}

.jdt-stats-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* KPI Cards */
.jdt-stats-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.jdt-stats-kpi-card {
  background: var(--jdt-bg-white);
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r-lg);
  box-shadow: var(--jdt-shadow-sm);
  padding: 24px 20px;
  text-align: center;
  transition: var(--jdt-t);
}

.jdt-stats-kpi-card:hover {
  box-shadow: var(--jdt-shadow);
  transform: translateY(-2px);
}

.jdt-stats-kpi-card .kpi-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.jdt-stats-kpi-card .kpi-value {
  font-size: 36px;
  font-weight: 800;
  color: var(--jdt-text-900);
  margin-bottom: 4px;
  line-height: 1.2;
}

.jdt-stats-kpi-card .kpi-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--jdt-text-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.jdt-stats-kpi-card .kpi-sub {
  font-size: 13px;
  color: var(--jdt-text-400);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .jdt-stats-kpi-grid {
    grid-template-columns: 1fr;
  }

  .jdt-stats-chart-card {
    padding: 16px;
  }

  .jdt-stats-kpi-card .kpi-value {
    font-size: 28px;
  }

  .jdt-stats-total-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Period stats */
.jdt-stats-period-section {
  margin-top: 36px;
  background: var(--jdt-bg-white);
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r-lg);
  box-shadow: var(--jdt-shadow-sm);
  padding: 24px;
  box-sizing: border-box;
}

.jdt-stats-period-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--jdt-text-800);
  margin: 0 0 4px;
}

/* Tab pills */
.jdt-stats-period-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  background: var(--jdt-bg-100);
  border-radius: var(--jdt-r);
  padding: 4px;
  width: fit-content;
}

.jdt-period-tab {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: var(--jdt-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--jdt-text-500);
  cursor: pointer;
  transition: var(--jdt-t);
}

.jdt-period-tab.active {
  background: var(--jdt-bg-white);
  color: var(--jdt-blue);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

/* Panes */
.jdt-period-pane {
  display: none;
}

.jdt-period-pane.active {
  display: block;
}

/* Table */
.jdt-stats-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.jdt-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.jdt-stats-table thead tr {
  border-bottom: 2px solid var(--jdt-border);
}

.jdt-stats-table th {
  padding: 8px 10px;
  font-weight: 700;
  color: var(--jdt-text-400);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
}

.jdt-stats-row td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--jdt-border);
  vertical-align: middle;
  color: var(--jdt-text-700);
}

.jdt-stats-row:last-child td {
  border-bottom: none;
}

.jdt-stats-row.recovery td {
  background: var(--jdt-bg-50);
  color: var(--jdt-text-400);
}

/* Total grid — Plan complet */
.jdt-stats-total-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 8px 0;
}

.jdt-stats-total-cell {
  text-align: center;
  padding: 20px 10px;
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r);
  background: var(--jdt-bg-50);
}

.jdt-stats-total-cell .total-val {
  font-size: 32px;
  font-weight: 800;
  color: var(--jdt-text-900);
  line-height: 1.1;
  margin-bottom: 6px;
}

.jdt-stats-total-cell .total-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--jdt-text-400);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* -----------------------------------------------------------
   PLAN SUMMARY & PREVIEW (POST-CREATION)
----------------------------------------------------------- */
.jdt-summary-hero {
  text-align: center;
  padding: 20px;
  background: var(--jdt-text-700);
  color: white;
  border-radius: 16px;
  margin: 100px 50px 0 50px;
  position: relative;
  overflow: hidden;
}

.jdt-summary-hero-bg {
  opacity: 0.8;
  font-size: 110px;
}

.jdt-summary-hero-content {
  position: relative;
  z-index: 1;
}

.jdt-summary-hero h2 {
  margin: 0 0 12px 0;
  font-size: 32px;
  color: white;
}

.jdt-summary-hero p {
  margin: 0 0 20px 0;
  font-size: 18px;
  opacity: 0.9;
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.5;
}

.jdt-summary-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 14px;
  backdrop-filter: blur(5px);
}

.jdt-summary-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-bottom: 30px;
}

.jdt-summary-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.jdt-summary-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.jdt-summary-card-header h3 {
  margin: 0;
  font-size: 20px;
}

.jdt-summary-card p {
  color: var(--jdt-text-600);
  font-size: 14.5px;
  line-height: 1.6;
}

.jdt-summary-cta-card {
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border-radius: 16px;
  padding: 30px;
  color: white;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.jdt-summary-cta-card h3 {
  margin: 0 0 15px 0;
  font-size: 20px;
  color: white;
}

.jdt-summary-cta-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #94a3b8;
  margin-bottom: 20px;
}

.jdt-summary-cta-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jdt-summary-cta-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jdt-summary-cta-list li b {
  color: white;
}

.jdt-summary-cta-list li span {
  color: #10b981;
}

.jdt-summary-footer-note {
  text-align: center;
  font-size: 11px;
  margin-top: 12px;
  color: #64748b;
}

.jdt-summary-preview-section {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  margin-bottom: 40px;
  position: relative;
}

.jdt-summary-preview-section h3 {
  margin-top: 0;
  font-size: 20px;
  margin-bottom: 10px;
}

.jdt-summary-preview-section p {
  margin: 0 0 24px 0;
  color: var(--jdt-text-500);
  font-size: 14.5px;
}

.jdt-summary-preview-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  border-radius: 0 0 16px 16px;
  pointer-events: none;
}

/* -- Phases in Summary -- */
.summary-phase-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid var(--jdt-blue);
}

.summary-phase-idx {
  min-width: 40px;
  height: 40px;
  border-radius: 20px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--jdt-blue);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  font-size: 18px;
}

.summary-phase-content h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: var(--jdt-text-900);
}

.summary-phase-weeks {
  font-size: 12px;
  color: var(--jdt-text-500);
  margin-bottom: 6px;
}

.summary-phase-desc {
  margin: 0;
  font-size: 13px;
  color: var(--jdt-text-600);
  line-height: 1.5;
}

/* -----------------------------------------------------------
   PAYWALL & LOCKED PREVIEW
----------------------------------------------------------- */
.jdt-paywall-wrap {
  text-align: center;
  padding: 60px 20px;
  max-width: 600px;
  margin: 60px auto;
}

.jdt-paywall-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.jdt-paywall-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--jdt-text-900);
}

.jdt-paywall-desc {
  font-size: 18px;
  color: var(--jdt-text-600);
  margin-bottom: 32px;
  line-height: 1.6;
}

.jdt-locked-preview {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--jdt-border);
  background: var(--jdt-bg-white);
  padding: 20px;
}

.jdt-locked-preview h3 {
  margin-top: 0;
  color: var(--jdt-text-800);
}

.jdt-locked-preview-blur {
  opacity: 0.3;
  filter: blur(3px);
  pointer-events: none;
  margin-top: 20px;
}

/* -----------------------------------------------------------
   PREMIUM TEASER
----------------------------------------------------------- */
.jdt-premium-teaser {
  margin-top: 40px;
  position: relative;
}

.jdt-premium-teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  opacity: 0.6;
  filter: grayscale(100%) blur(1px);
  pointer-events: none;
}

.jdt-teaser-card {
  background: var(--jdt-bg-white);
  border: 1px solid var(--jdt-border);
  border-radius: var(--jdt-r-lg);
  padding: 20px;
}

.jdt-teaser-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.jdt-teaser-badge {
  background: var(--jdt-bg-200);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
}

/* -- Helpers -- */
.jdt-flex {
  display: flex;
}

.jdt-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.jdt-flex-gap-8 {
  display: flex;
  gap: 8px;
}

.jdt-flex-gap-10 {
  display: flex;
  gap: 10px;
}

.jdt-hidden {
  display: none !important;
}


.jdt-muted {
  font-weight: 400;
  color: var(--jdt-text-400);
}

/* -- Loader & Notices -- */
.jdt-loader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
}

.jdt-notice.error a {
  display: none;
}

/* -- Popover -- */
.jdt-exo-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.jdt-exo-popover-title {
  font-size: 13px;
  color: var(--jdt-text-900);
}

.jdt-exo-popover-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  color: var(--jdt-text-400);
}

.jdt-exo-popover img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

/* -- Sidebar & Layout -- */
.jdt-mobile-topbar-icon {
  width: 24px;
  height: 24px;
}

.jdt-sidebar-logo-wrap {
  font-size: 24px;
}

.jdt-sidebar-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jdt-menu-icon-scale {
  transform: scale(1.1);
}

/* -- Gut Training & Routine -- */
.jdt-routine-footer {
  margin-top: 40px;
  text-align: center;
  color: var(--jdt-text-600);
  font-style: italic;
  font-size: 16px;
}

.jdt-gut-weeks-badges {
  margin-bottom: 30px;
}

.jdt-gut-grid-cols {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.jdt-gut-banner-advanced {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  background: #f3e5f5;
  border-radius: 12px;
  padding: 20px;
}

.jdt-gut-banner-advanced h4 {
  margin: 0 0 8px 0;
  color: #7B1FA2;
  font-size: 16px;
  font-weight: 700;
}

.jdt-gut-banner-advanced p {
  margin: 0;
  color: #4A148C;
}

.jdt-gut-tool-wrap {
  margin-top: 40px;
  text-align: center;
}

.jdt-gut-tool-desc {
  color: var(--jdt-text-600);
  text-align: center;
  margin-bottom: 24px;
  font-size: 15px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.jdt-gut-tool-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.jdt-icon-svg-sm {
  width: 16px;
  height: 16px;
}

/* -- Stats -- */
.jdt-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.jdt-stats-badge-gamif {
  font-size: 14px;
  padding: 4px 10px;
}

.jdt-stats-progress-wrap {
  margin-bottom: 20px;
}

.jdt-stats-global-bar {
  height: 12px;
  border-radius: 12px;
  background: var(--jdt-bg-200);
  overflow: hidden;
}

.jdt-stats-global-bar-fill {
  background: #10b981;
  height: 100%;
  border-radius: 12px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.jdt-stats-global-bar-label {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--jdt-text-600);
}

.jdt-stats-phases-section {
  margin-bottom: 40px;
}

.jdt-stats-phases-title {
  font-size: 15px;
  margin-bottom: 12px;
  color: var(--jdt-text-700);
}

.jdt-stats-chart-h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--jdt-text-800);
}

.jdt-stats-chart-p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--jdt-text-400);
}

.jdt-stats-color-facile {
  background: #10b981;
}

.jdt-stats-color-modere {
  background: #f59e0b;
}

.jdt-stats-color-difficile {
  background: #f97316;
}

.jdt-stats-color-intense {
  background: #ef4444;
}

.jdt-stats-color-repos {
  background: #94a3b8;
}

.jdt-stats-kpi-emoji {
  font-size: 32px;
}

.jdt-stats-kpi-label-large {
  font-size: 22px;
}

.jdt-stats-period-p {
  color: var(--jdt-text-400);
  font-size: 13px;
  margin-bottom: 20px;
}

/* -- Utilities -- */
.jdt-flex-column {
  display: flex;
  flex-direction: column;
}

.jdt-text-center {
  text-align: center;
}

.jdt-text-right {
  text-align: right;
}

.jdt-m-0 {
  margin: 0 !important;
}

.jdt-mt-30 {
  margin-top: 30px !important;
}

.jdt-mt-40 {
  margin-top: 40px !important;
}

.jdt-mb-40 {
  margin-bottom: 40px !important;
}

.jdt-block-mt20 {
  display: block;
  margin-top: 20px !important;
}

.jdt-muted-mb30 {
  color: var(--jdt-text-500);
  margin-bottom: 30px;
}

.jdt-muted-mb24 {
  color: var(--jdt-text-500);
  margin-bottom: 24px;
}

.jdt-btn-min-100 {
  min-width: 100px;
}

/* -- Component Fixes -- */
.jdt-teaser-expiry {
  margin-top: 16px;
  font-size: 14px;
  color: var(--jdt-text-500);
}

.jdt-gut-banner-h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--jdt-text-800);
}

.jdt-gut-banner-p {
  margin: 0;
  color: var(--jdt-text-600);
  line-height: 1.6;
}

/* -- Empty State (Dashboard) -- */
.jdt-empty-state {
  max-width: 600px;
  margin: 50px auto;
  padding: 50px 30px;
  text-align: center;
  background: var(--jdt-bg-white);
  border-radius: var(--jdt-r-lg);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.jdt-empty-icon {
  font-size: 52px;
  margin-bottom: 24px;
}

.jdt-empty-title {
  margin-bottom: 28px;
  color: var(--jdt-text-800);
  font-weight: 800;
  font-size: 24px;
}

.jdt-empty-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 380px;
  margin: 0 auto;
}

.jdt-empty-actions .jdt-btn {
  text-decoration: none;
  padding: 15px;
  font-size: 15px;
  font-weight: 600;
}

.jdt-empty-divider {
  color: var(--jdt-text-500);
  font-size: 13px;
  font-weight: 700;
  margin: 4px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}