/**
 * Je Travel Learning System - Content & Pedagogical Engine Styles
 * Conforming strictly to Brand Book v5 and WCAG 2.1 AA (min 48px touch targets).
 */

:root {
  --jtls-blue: var(--jt-brand-blue, #1CA3DD);
  --jtls-blue-dark: var(--jt-brand-blue-dark, #1276A8);
  --jtls-blue-pale: var(--jt-brand-blue-pale, #E3F6FD);
  --jtls-navy: var(--jt-brand-navy, #0B2545);
  --jtls-yellow: var(--jt-brand-yellow, #F8B400);
  --jtls-yellow-pale: var(--jt-brand-yellow-pale, #FEF6DC);
  --jtls-red: var(--jt-brand-red, #E63946);
  --jtls-red-pale: var(--jt-brand-red-pale, #FEF0F1);
  --jtls-gray-light: var(--jt-brand-gray-light, #F5F7FA);
  --jtls-gray-dark: var(--jt-brand-gray-dark, #333333);
  --jtls-white: var(--jt-brand-white, #FFFFFF);
  --jtls-radius-sm: 8px;
  --jtls-radius-md: 12px;
  --jtls-radius-lg: 16px;
  --jtls-shadow-sm: 0 2px 8px rgba(11, 37, 69, 0.06);
  --jtls-shadow-md: 0 4px 16px rgba(11, 37, 69, 0.08);
  --jtls-font-title: var(--jt-brand-font-title, 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --jtls-font-body: var(--jt-brand-font-body, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.jtls-content-container,
.jtls-step-contents-container {
  font-family: var(--jtls-font-body);
  color: var(--jtls-gray-dark);
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px;
}

.jtls-content-header {
  margin-bottom: 24px;
}

.jtls-content-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.jtls-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

.jtls-role-comprendre { background: var(--jtls-blue-pale); color: var(--jtls-blue-dark); }
.jtls-role-decider { background: var(--jtls-yellow-pale); color: #8A6500; }
.jtls-role-preparer { background: #E8F5E9; color: #2E7D32; }
.jtls-role-agir { background: #EDE7F6; color: #512DA8; }
.jtls-role-resoudre { background: var(--jtls-red-pale); color: var(--jtls-red); }

.jtls-depth-essentiel { background: var(--jtls-navy); color: var(--jtls-white); }
.jtls-depth-complement { background: var(--jtls-gray-light); color: var(--jtls-gray-dark); border: 1px solid #E0E0E0; }
.jtls-depth-approfondissement { background: #F3E5F5; color: #7B1FA2; }

.jtls-badge-duration,
.jtls-badge-type {
  background: var(--jtls-gray-light);
  color: var(--jtls-gray-dark);
}

.jtls-content-main-title {
  font-family: var(--jtls-font-title);
  color: var(--jtls-navy);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 12px 0 16px;
  line-height: 1.3;
}

.jtls-card-why {
  background: var(--jtls-white);
  border: 1px solid #E3E8EF;
  border-left: 4px solid var(--jtls-blue);
  border-radius: var(--jtls-radius-md);
  padding: 16px;
  box-shadow: var(--jtls-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jtls-section-tag {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--jtls-navy);
  display: block;
  margin-bottom: 4px;
}

.jtls-objective-text,
.jtls-outcome-text {
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}

/* Media Players */
.jtls-media-player-wrapper {
  margin: 24px 0;
}

.jtls-video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--jtls-radius-md);
  box-shadow: var(--jtls-shadow-md);
}

.jtls-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.jtls-guide-download-card {
  display: flex;
  align-items: center;
  background: var(--jtls-blue-pale);
  border: 1px solid var(--jtls-blue);
  border-radius: var(--jtls-radius-md);
  padding: 16px;
  gap: 16px;
}

.jtls-guide-icon {
  font-size: 2rem;
}

.jtls-guide-info h4 {
  margin: 0 0 4px;
  color: var(--jtls-navy);
  font-family: var(--jtls-font-title);
}

.jtls-guide-info p {
  margin: 0;
  font-size: 0.9rem;
}

/* Content Body */
.jtls-content-body {
  background: var(--jtls-white);
  border-radius: var(--jtls-radius-md);
  padding: 24px;
  box-shadow: var(--jtls-shadow-sm);
  border: 1px solid #E8EEF5;
  line-height: 1.7;
  font-size: 1rem;
  margin-bottom: 24px;
}

.jtls-content-body strong {
  color: var(--jtls-navy);
}

.jtls-content-body ul {
  padding-left: 20px;
  margin: 12px 0;
}

.jtls-content-body li {
  margin-bottom: 8px;
}

/* Quiz Section */
.jtls-content-assessment-section {
  background: var(--jtls-white);
  border: 1px solid #E2E8F0;
  border-radius: var(--jtls-radius-md);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--jtls-shadow-sm);
}

.jtls-quiz-header h3 {
  font-family: var(--jtls-font-title);
  color: var(--jtls-navy);
  margin: 0 0 6px;
}

.jtls-quiz-threshold {
  font-size: 0.9rem;
  color: #64748B;
  margin: 0 0 20px;
}

.jtls-question-card {
  border: 1px solid #E2E8F0;
  border-radius: var(--jtls-radius-sm);
  padding: 16px;
  margin-bottom: 16px;
  background: #F8FAFC;
}

.jtls-question-title {
  font-family: var(--jtls-font-title);
  font-size: 1rem;
  font-weight: 600;
  color: var(--jtls-navy);
  padding: 0 8px;
}

.jtls-q-index {
  color: var(--jtls-blue);
  margin-right: 4px;
}

.jtls-options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.jtls-option-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--jtls-white);
  border: 1px solid #CBD5E1;
  border-radius: var(--jtls-radius-sm);
  cursor: pointer;
  min-height: 48px; /* Touch target >= 48px */
  transition: all 0.2s ease;
}

.jtls-option-label:hover {
  border-color: var(--jtls-blue);
  background: var(--jtls-blue-pale);
}

.jtls-option-label input[type="radio"],
.jtls-option-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--jtls-blue);
}

/* Question Feedback */
.jtls-question-feedback {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--jtls-radius-sm);
  font-size: 0.9rem;
}

.jtls-feedback-correct {
  background: #E8F5E9;
  border: 1px solid #4CAF50;
  color: #2E7D32;
}

.jtls-feedback-incorrect {
  background: var(--jtls-red-pale);
  border: 1px solid var(--jtls-red);
  color: var(--jtls-red);
}

/* Sources Box */
.jtls-content-sources-box {
  background: var(--jtls-gray-light);
  border-radius: var(--jtls-radius-sm);
  padding: 16px;
  margin-bottom: 24px;
  font-size: 0.85rem;
}

.jtls-content-sources-box h4 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--jtls-navy);
}

.jtls-sources-list {
  padding-left: 18px;
  margin: 0;
}

.jtls-sources-list li {
  margin-bottom: 4px;
}

.jtls-source-date {
  color: #64748B;
  font-size: 0.8rem;
}

/* Footer Action */
.jtls-content-footer {
  background: var(--jtls-white);
  border: 1px solid #E2E8F0;
  border-radius: var(--jtls-radius-md);
  padding: 16px;
  box-shadow: var(--jtls-shadow-sm);
}

.jtls-progress-bar-wrapper {
  height: 8px;
  background: #E2E8F0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.jtls-progress-bar-fill {
  height: 100%;
  background: var(--jtls-blue);
  transition: width 0.3s ease;
}

.jtls-footer-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.jtls-footer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.jtls-status-pill {
  font-weight: 600;
  font-size: 0.9rem;
}

.jtls-status-validated { color: #2E7D32; }
.jtls-status-in-progress { color: var(--jtls-blue-dark); }

/* Buttons with WCAG focus and min 48px touch targets */
.jtls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--jtls-radius-sm);
  font-family: var(--jtls-font-title);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease, transform 0.1s ease;
}

.jtls-btn:focus-visible {
  outline: 3px solid var(--jtls-navy);
  outline-offset: 2px;
}

.jtls-btn-primary {
  background: var(--jtls-blue);
  color: var(--jtls-white);
}

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

.jtls-btn-action {
  background: var(--jtls-navy);
  color: var(--jtls-white);
}

.jtls-btn-action:hover {
  background: #061528;
}

.jtls-btn-outline {
  background: transparent;
  border: 2px solid var(--jtls-blue);
  color: var(--jtls-blue);
}

.jtls-btn-outline:hover {
  background: var(--jtls-blue-pale);
  /* v1.36.1 Phase 3 : même collision que .jtls-btn-report-blocker (mission.css) — sans ce fix,
     le thème BuddyBoss force un texte blanc invisible sur ce fond bleu très clair. */
  color: var(--jtls-blue);
}

/* Step contents cards grid */
.jtls-content-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}

@media (min-width: 640px) {
  .jtls-content-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.jtls-content-summary-card {
  background: var(--jtls-white);
  border: 1px solid #E2E8F0;
  border-radius: var(--jtls-radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--jtls-shadow-sm);
}

.jtls-card-top-metas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.jtls-card-title {
  font-family: var(--jtls-font-title);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--jtls-navy);
  margin: 4px 0 8px;
}

.jtls-card-objective {
  font-size: 0.88rem;
  color: #475569;
  flex-grow: 1;
  margin: 0 0 16px;
}

.jtls-card-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.jtls-tag-validated {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2E7D32;
}

.jtls-tag-pending {
  font-size: 0.8rem;
  color: #64748B;
}

/* Pedagogical Action Banner in Dashboard */
.jtls-pedagogical-now-banner {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--jtls-blue-pale) 0%, #FFFFFF 100%);
  border: 1px solid var(--jtls-blue);
  border-left: 6px solid var(--jtls-blue);
  border-radius: var(--jtls-radius-md);
  padding: 16px;
  gap: 16px;
  margin-bottom: 16px;
}

.jtls-pedagogical-now-icon {
  font-size: 2.2rem;
}

.jtls-pedagogical-now-body {
  flex-grow: 1;
}

.jtls-pedagogical-tag {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--jtls-blue-dark);
}

.jtls-pedagogical-title {
  font-family: var(--jtls-font-title);
  margin: 2px 0 4px;
  font-size: 1.05rem;
  color: var(--jtls-navy);
}

.jtls-pedagogical-desc {
  margin: 0;
  font-size: 0.88rem;
  color: #475569;
}

/* v1.47 (Phase 5) : bachelier santé : encadré « places limitées ou examen d'entrée » mis en avant. */
.jtls-guide-health-notice {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #78350f;
  font-size: 0.95rem;
}
.jtls-guide-health-notice[hidden],
.jtls-guide-health-fallback[hidden] {
  display: none;
}
/* v1.47.2 (Phase 3.3) : encadré de repli (le guide n'en a pas). */
.jtls-guide-health-fallback {
  display: block;
  margin: 0 0 16px;
  background: #fffbeb;
}
.jtls-guide-health-fallback p {
  margin: 0;
}
.jtls-guide-health-box {
  position: relative;
  padding: 12px 14px !important;
  border: 2px solid #f59e0b !important;
  border-radius: 10px;
  background: #fffbeb !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
  scroll-margin-top: 140px;
}
.jtls-guide-health-tag {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
/* v1.47 (Phase 5) : liens officiels sous un guide qui renvoie « aux sites officiels ». */
.jtls-guide-official-links a {
  overflow-wrap: anywhere;
}