/* 🎯 PHASE 3 UX - Styles du Guide Méthodologique & Onboarding */

/* Variables CSS alignées avec la charte graphique SimCrise - CONTRASTE AMÉLIORÉ */
:root {
  /* Palette principale alignée sur index.html */
  --guide-bg: #f7f7fb;           /* Fond identique à index */
  --guide-card: #ffffff;         /* Blanc pur pour les cartes */
  --guide-line: #e7e7ef;         /* Bordures subtiles */
  --guide-text: #1a1a1a;         /* Texte principal - CONTRASTE RENFORCÉ */
  --guide-muted: #4a4a5a;        /* Texte secondaire - CONTRASTE AMÉLIORÉ */
  --guide-dark: #2d2d2d;         /* Texte très sombre pour les titres importants */
  --guide-light-bg: #f5f5f8;     /* Fond gris clair pour encadrés - meilleur contraste */
  --guide-link: #3d4ed8;         /* Liens - contraste élevé sur fond clair */
  --guide-small-text: #333333;   /* Petits textes - contraste renforcé */
  
  /* Couleurs fonctionnelles harmonisées */
  --guide-primary: #5a67d8;      /* Bleu plus doux et professionnel */
  --guide-secondary: #48bb78;    /* Vert plus équilibré */
  --guide-accent: #ed8936;       /* Orange plus raffiné */
  --guide-success: #38a169;      /* Vert succès cohérent */
  --guide-warning: #d69e2e;      /* Jaune/orange attention */
  --guide-danger: #e53e3e;       /* Rouge plus doux */
  
  /* Éléments d'interface */
  --guide-overlay: rgba(28, 28, 40, 0.85);  /* Overlay basé sur --guide-text */
  --guide-shadow: 0 8px 32px rgba(28, 28, 40, 0.12);  /* Ombre plus douce */
  --guide-radius: 12px;          /* Cohérent avec index.html */
  --guide-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === OVERLAY PRINCIPAL DU GUIDE === */
.guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--guide-overlay);
  backdrop-filter: blur(8px);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: var(--guide-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.guide-overlay.active {
  opacity: 1;
  visibility: visible;
}

.guide-modal {
  background: var(--guide-card);
  border-radius: var(--guide-radius);
  box-shadow: var(--guide-shadow);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(30px) scale(0.95);
  transition: var(--guide-transition);
  overflow: hidden;
  border: 1px solid var(--guide-line);
}

.guide-overlay.active .guide-modal {
  transform: translateY(0) scale(1);
}

/* === HEADER DU GUIDE === */
.guide-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--guide-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--guide-card);
  color: var(--guide-text);
  position: relative;
}

.guide-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--guide-primary) 0%, var(--guide-secondary) 100%);
}

.guide-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.guide-close {
  background: var(--guide-line);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--guide-transition);
  color: var(--guide-muted);
  font-size: 16px;
  font-weight: bold;
}

.guide-close:hover {
  background: var(--guide-danger);
  color: white;
  transform: rotate(90deg);
}

/* === CONTENU DU GUIDE === */
.guide-content {
  padding: 28px;
  flex: 1;
  overflow-y: auto;
  line-height: 1.6;
}

.guide-content h3 {
  color: var(--guide-text);
  margin-bottom: 16px;
  font-size: 1.2rem;
  font-weight: 600;
}

.guide-content h4 {
  color: var(--guide-primary);
  margin: 20px 0 12px;
  font-size: 1rem;
  font-weight: 600;
}

.guide-content h5 {
  color: var(--guide-text);
  margin: 16px 0 8px;
  font-size: 0.95rem;
  font-weight: 600;
}

.guide-content p {
  margin-bottom: 16px;
  color: var(--guide-muted);
  line-height: 1.6;
}

.guide-content ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.guide-content li {
  margin-bottom: 8px;
  color: var(--guide-muted);
}

/* === ÉCRAN DE BIENVENUE === */
.welcome-screen {
  text-align: center;
}

.welcome-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: block;
}

.welcome-screen h3 {
  color: var(--guide-text);
  margin-bottom: 16px;
  font-weight: 600;
}

.profile-selection {
  margin: 32px 0;
}

.profile-selection h4 {
  color: var(--guide-text);
  margin-bottom: 20px;
  font-size: 1.1rem;
  font-weight: 600;
}

.profile-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.profile-card {
  padding: 20px;
  border: 1px solid var(--guide-line);
  border-radius: var(--guide-radius);
  cursor: pointer;
  transition: var(--guide-transition);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--guide-card);
}

.profile-card:hover {
  border-color: var(--guide-primary);
  background: var(--guide-bg);
  transform: translateY(-2px);
  box-shadow: var(--guide-shadow);
}

.profile-card.selected {
  border-color: var(--guide-primary);
  background: var(--guide-bg);
  box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.15);
}

.profile-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.profile-info strong {
  display: block;
  color: var(--guide-text); /* Utilise la variable text principale */
  font-size: 1rem;
  margin-bottom: 4px;
  font-weight: 600; /* Renforce la lisibilité */
}

.profile-info p {
  margin: 0;
  color: var(--guide-muted); /* Utilise la variable améliorée */
  font-size: 0.9rem;
  line-height: 1.4;
}

.welcome-options {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
}

/* === ÉCRAN DE COMPLETION === */
.completion-screen {
  text-align: center;
}

.completion-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: block;
}

.next-steps {
  background: var(--guide-light-bg);
  padding: 24px;
  border-radius: var(--guide-radius);
  margin: 24px 0;
  text-align: left;
  border: 1px solid var(--guide-line); /* Ajoute une bordure pour plus de définition */
}

.next-steps h4 {
  margin-top: 0;
  color: var(--guide-dark);
}

.next-steps ul {
  margin: 0;
}

.next-steps li {
  padding: 8px 0;
  border-bottom: 1px solid var(--guide-line);
}

.next-steps li:last-child {
  border-bottom: none;
}

.completion-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
}

/* === FOOTER DU GUIDE === */
.guide-footer {
  padding: 20px 28px;
  border-top: 1px solid var(--guide-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--guide-bg);
}

/* Footer sans boutons sur la première page */
.guide-footer.first-page {
  justify-content: center;
  padding: 12px 28px;
  background: var(--guide-card);
}

.guide-progress {
  color: var(--guide-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.guide-btn {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid var(--guide-line);
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
  transition: var(--guide-transition);
  min-width: 100px;
  background: var(--guide-card);
  color: var(--guide-text);
}

.guide-btn.primary {
  background: var(--guide-primary);
  color: white;
  border-color: var(--guide-primary);
}

.guide-btn.primary:hover:not(:disabled) {
  background: var(--guide-secondary);
  border-color: var(--guide-secondary);
  transform: translateY(-1px);
}

.guide-btn.secondary {
  background: var(--guide-card);
  color: var(--guide-muted);
  border-color: var(--guide-line);
}

.guide-btn.secondary:hover:not(:disabled) {
  background: var(--guide-line);
  color: var(--guide-text);
  transform: translateY(-1px);
}

.guide-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* === BOUTON D'AIDE FLOTTANT === */
.floating-help {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  cursor: pointer;
}

.help-icon {
  width: 56px;
  height: 56px;
  background: var(--guide-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.4rem;
  font-weight: bold;
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
  transition: var(--guide-transition);
  position: relative;
}

.help-icon:hover {
  background: var(--guide-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(90, 103, 216, 0.4);
}

.help-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--guide-primary);
  animation: pulse-animation 2s infinite;
  z-index: -1;
}

@keyframes pulse-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.help-tooltip {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: var(--guide-dark);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
  margin-bottom: 8px;
  opacity: 0;
  visibility: hidden;
  transition: var(--guide-transition);
  pointer-events: none;
}

.help-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 20px;
  border: 5px solid transparent;
  border-top-color: var(--guide-dark);
}

.floating-help:hover .help-tooltip {
  opacity: 1;
  visibility: visible;
}

/* === ÉLÉMENTS EN SURBRILLANCE === */
.guide-highlight {
  position: relative;
  z-index: 9999;
  animation: highlight-pulse 2s infinite;
}

.guide-highlight::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 3px solid var(--guide-accent);
  border-radius: 8px;
  pointer-events: none;
  animation: highlight-border 2s infinite;
}

@keyframes highlight-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@keyframes highlight-border {
  0%, 100% {
    border-color: var(--guide-accent);
    box-shadow: 0 0 0 rgba(243, 156, 18, 0.4);
  }
  50% {
    border-color: var(--guide-warning);
    box-shadow: 0 0 20px rgba(214, 158, 46, 0.6);
  }
}

/* === AIDE CONTEXTUELLE === */
.contextual-help {
  background: var(--guide-light-bg);
  padding: 20px;
  border-radius: var(--guide-radius);
  margin: 16px 0;
  border: 1px solid var(--guide-line);
}

/* === STYLES POUR LES NOUVELLES EXPLICATIONS === */

/* Introduction de simulation */
.simulation-intro {
  margin-bottom: 24px;
}

.role-context {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.role-context h4 {
  margin: 0 0 12px;
  font-size: 1.1rem;
  color: white;
}

.role-context p {
  margin: 0;
  opacity: 0.95;
  line-height: 1.5;
}

/* Timeline des phases */
.simulation-phases h4 {
  color: var(--guide-dark);
  margin-bottom: 16px;
}

.phase-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phase {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--guide-card);
  border-radius: 10px;
  border-left: 4px solid var(--guide-primary);
  border: 1px solid var(--guide-line);
  box-shadow: 0 2px 8px rgba(28, 28, 40, 0.04);
}

.phase-number {
  background: var(--guide-primary);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.phase-content strong {
  display: block;
  color: var(--guide-text);
  margin-bottom: 4px;
  font-size: 0.95rem;
  font-weight: 600;
}

.phase-content p {
  margin: 0;
  color: var(--guide-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Catégories de risques */
.risk-guidance {
  background: var(--guide-light-bg);
  padding: 20px;
  border-radius: 8px;
  margin: 16px 0;
  border: 1px solid var(--guide-line);
}

.citizen-risks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.risk-category {
  padding: 12px 16px;
  background: white;
  border-radius: 6px;
  border-left: 3px solid var(--guide-secondary);
}

.risk-category strong {
  color: var(--guide-secondary);
  display: block;
  margin-bottom: 4px;
}

.risk-category p {
  margin: 0;
  color: var(--guide-muted); /* Meilleur contraste */
  font-size: 0.9rem;
}

/* Fonctionnalités d'expérience */
.experience-explanation,
.professional-experience {
  background: var(--guide-light-bg);
  padding: 20px;
  border-radius: 8px;
  margin: 16px 0;
  border: 1px solid var(--guide-line);
}

.experience-features,
.leadership-challenges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}

.feature,
.challenge {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--guide-card);
  border-radius: 10px;
  border: 1px solid var(--guide-line);
}

.feature-icon,
.challenge-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.feature strong,
.challenge strong {
  display: block;
  color: var(--guide-text);
  margin-bottom: 4px;
  font-size: 0.9rem;
  font-weight: 600;
}

.feature p,
.challenge p {
  margin: 0;
  color: var(--guide-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Actions citoyennes et professionnelles */
.citizen-actions,
.professional-actions {
  background: rgba(72, 187, 120, 0.08);
  padding: 16px;
  border-radius: 10px;
  border-left: 4px solid var(--guide-secondary);
  margin-top: 20px;
  border: 1px solid rgba(72, 187, 120, 0.2);
}

.citizen-actions h5,
.professional-actions h5 {
  margin-top: 0;
  color: var(--guide-secondary);
  font-weight: 600;
}

.citizen-actions ul,
.professional-actions ul {
  margin: 8px 0 0;
}

.citizen-actions li,
.professional-actions li {
  margin-bottom: 4px;
  font-size: 0.9rem;
}

/* Débriefing */
.debriefing-explanation,
.expert-debriefing {
  background: var(--guide-light-bg);
  padding: 20px;
  border-radius: 8px;
  margin: 16px 0;
}

.debriefing-features,
.analysis-dimensions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.quick-exit,
.professional-control {
  background: rgba(243, 156, 18, 0.1);
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid var(--guide-accent);
  margin-top: 20px;
}

.quick-exit h5,
.professional-control h5 {
  margin-top: 0;
  color: var(--guide-accent);
}

/* Configuration professionnelle */
.professional-configuration {
  background: var(--guide-light-bg);
  padding: 20px;
  border-radius: 8px;
  margin: 16px 0;
}

.config-categories {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.config-category {
  background: white;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--guide-line);
}

.config-category h5 {
  margin: 0 0 12px;
  color: var(--guide-primary);
}

.config-category ul {
  margin: 0;
  padding-left: 16px;
}

.config-category li {
  margin-bottom: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Formateurs */
.educator-intro {
  background: var(--guide-light-bg);
  padding: 20px;
  border-radius: 8px;
  margin: 16px 0;
}

.educator-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}

.benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid var(--guide-line);
}

.benefit-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.benefit strong {
  display: block;
  color: var(--guide-dark);
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.benefit p {
  margin: 0;
  color: var(--guide-muted);
  font-size: 0.85rem;
}

/* Configuration de session */
.session-setup {
  background: var(--guide-light-bg);
  padding: 20px;
  border-radius: 8px;
  margin: 16px 0;
}

.setup-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--guide-line);
}

.step-number {
  background: var(--guide-danger);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.step strong {
  display: block;
  color: var(--guide-dark);
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.step p {
  margin: 0;
  color: var(--guide-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.formation-types {
  background: rgba(231, 76, 60, 0.1);
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid var(--guide-danger);
  margin-top: 20px;
}

.formation-types h5 {
  margin-top: 0;
  color: var(--guide-danger);
}

/* Mode correction */
.correction-mode {
  background: var(--guide-light-bg);
  padding: 20px;
  border-radius: 8px;
  margin: 16px 0;
}

.correction-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.debriefing-tips {
  background: rgba(231, 76, 60, 0.1);
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid var(--guide-danger);
  margin-top: 20px;
}

.debriefing-tips h5 {
  margin-top: 0;
  color: var(--guide-danger);
}

/* Recommandations expertes */
.expert-recommendations {
  background: rgba(52, 152, 219, 0.1);
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid var(--guide-primary);
  margin-top: 20px;
}

.expert-recommendations h5 {
  margin-top: 0;
  color: var(--guide-primary);
}

/* Dimension d'analyse */
.dimension {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid var(--guide-line);
}

.dimension-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.dimension strong {
  display: block;
  color: var(--guide-dark);
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.dimension p {
  margin: 0;
  color: var(--guide-muted);
  font-size: 0.85rem;
}

/* === AMÉLIORATION CONTRASTE ET LISIBILITÉ === */
/* Renforcement du contraste pour les éléments difficiles à lire */

/* Petits textes et descriptions */
.guide-content p, 
.guide-content li,
.profile-info p,
.feature-description,
.challenge-description {
  color: var(--guide-small-text) !important;
  font-weight: 400;
}

/* Liens et éléments interactifs */
.guide-content a,
.contextual-help a {
  color: var(--guide-link) !important;
  text-decoration: underline;
  font-weight: 500;
}

.guide-content a:hover,
.contextual-help a:hover {
  color: var(--guide-primary) !important;
  text-decoration: none;
}

/* Texte d'aide et instructions */
.help-text,
.instruction-text,
.guide-hint {
  color: var(--guide-text) !important;
  font-weight: 500;
  line-height: 1.5;
}

/* Amélioration des contrastes pour les éléments d'état */
.guide-step-info {
  color: var(--guide-dark) !important;
  font-weight: 600;
}

/* Textes dans les encadrés colorés */
.risk-category strong,
.feature strong,
.challenge strong {
  color: var(--guide-dark) !important;
}

/* Amélioration des encadrés d'information */
.contextual-help,
.next-steps,
.risk-guidance,
.experience-explanation,
.professional-experience {
  background: var(--guide-light-bg) !important;
  border: 1px solid var(--guide-line) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Force un contraste élevé pour tous les textes dans les encadrés */
.contextual-help *,
.next-steps *,
.risk-guidance *,
.experience-explanation *,
.professional-experience * {
  color: var(--guide-text) !important;
}

.contextual-help h4,
.next-steps h4,
.risk-guidance h4,
.experience-explanation h4,
.professional-experience h4 {
  color: var(--guide-dark) !important;
  font-weight: 600;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
  .phase-timeline {
    gap: 8px;
  }
  
  .phase {
    padding: 12px;
    flex-direction: column;
    text-align: center;
  }
  
  .phase-number {
    align-self: center;
  }
  
  .experience-features,
  .leadership-challenges,
  .debriefing-features,
  .analysis-dimensions,
  .correction-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .feature,
  .challenge {
    padding: 12px;
  }
  
  .config-categories {
    gap: 16px;
  }
  
  .setup-steps {
    gap: 12px;
  }
  
  .step {
    padding: 12px;
    flex-direction: column;
    text-align: center;
  }
  
  .step-number {
    align-self: center;
  }
}

.help-section {
  margin-bottom: 20px;
}

.help-section:last-child {
  margin-bottom: 0;
}

.help-tips {
  background: rgba(46, 204, 113, 0.1);
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid var(--guide-secondary);
  margin-top: 16px;
}

.help-tips h5 {
  margin-top: 0;
  color: var(--guide-secondary);
}

.help-tips ul {
  margin: 8px 0 0;
}

/* === GUIDE DE DURÉE === */
.duration-guide {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.duration-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--guide-line);
}

.duration-badge {
  padding: 8px 16px;
  border-radius: 20px;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 80px;
  text-align: center;
}

.duration-badge.citizen {
  background: var(--guide-secondary);
}

.duration-badge.professional {
  background: var(--guide-primary);
}

.duration-badge.educator {
  background: var(--guide-danger);
}

.duration-item div {
  flex: 1;
}

.duration-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--guide-dark);
}

.duration-item p {
  margin: 0;
  color: var(--guide-muted);
  font-size: 0.9rem;
}

/* === INDICATEUR DE PROGRESSION UTILISATEUR === */
.user-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(52, 152, 219, 0.2);
  z-index: 9998;
  opacity: 0;
  transition: var(--guide-transition);
}

.user-progress.visible {
  opacity: 1;
}

.user-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--guide-primary);
  transition: width 0.6s ease;
  width: var(--progress, 0%);
}

/* === AMÉLIORATIONS DES INFOBULLES EXISTANTES === */
.info-icon {
  position: relative;
  z-index: 100;
}

.info-icon:hover .tooltip {
  z-index: 10001;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .guide-modal {
    margin: 16px;
    max-height: calc(100vh - 32px);
  }

  .guide-header {
    padding: 20px 24px 16px;
  }

  .guide-header h2 {
    font-size: 1.25rem;
  }

  .guide-content {
    padding: 24px 20px;
  }

  .guide-footer {
    padding: 16px 20px;
    flex-direction: column;
    gap: 16px;
  }

  .guide-footer .guide-progress {
    order: -1;
  }

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

  .profile-card {
    padding: 16px;
    gap: 12px;
  }

  .profile-icon {
    font-size: 1.5rem;
  }

  .welcome-options,
  .completion-actions {
    flex-direction: column;
    align-items: center;
  }

  .welcome-options button,
  .completion-actions button {
    width: 100%;
    max-width: 240px;
  }

  .floating-help {
    bottom: 16px;
    right: 16px;
  }

  .help-icon {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  .help-tooltip {
    right: -10px;
    font-size: 0.8rem;
  }

  .duration-item {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .duration-badge {
    min-width: auto;
    align-self: center;
  }
}

@media (max-width: 480px) {
  .guide-modal {
    margin: 8px;
    max-height: calc(100vh - 16px);
  }

  .guide-header,
  .guide-content,
  .guide-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .guide-header h2 {
    font-size: 1.3rem;
  }

  .profile-card {
    padding: 12px;
    gap: 10px;
  }

  .contextual-help,
  .help-section,
  .help-tips {
    padding: 16px 12px;
  }

  .guide-nav-btn,
  .guide-close-btn {
    padding: 10px 16px;
    font-size: 0.9rem;
    min-height: 44px;
  }
}

/* Very small screens - 360px and below */
@media (max-width: 360px) {
  .guide-modal {
    margin: 4px;
    max-height: calc(100vh - 8px);
  }

  .guide-header,
  .guide-content,
  .guide-footer {
    padding: 12px;
  }

  .phase-timeline {
    gap: 6px;
  }

  .profile-card {
    padding: 8px;
    gap: 8px;
  }

  .profile-card h4 {
    font-size: 1rem;
  }
}

/* === ANIMATIONS D'ENTRÉE === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.guide-overlay.active .guide-modal {
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-card {
  animation: fadeInScale 0.3s ease;
}

.profile-card:nth-child(1) { animation-delay: 0.1s; }
.profile-card:nth-child(2) { animation-delay: 0.2s; }
.profile-card:nth-child(3) { animation-delay: 0.3s; }
.profile-card:nth-child(4) { animation-delay: 0.4s; }

/* === ACCESSIBILITÉ === */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .help-pulse {
    animation: none;
  }

  .guide-highlight {
    animation: none;
  }

  .guide-highlight::before {
    animation: none;
  }
}

/* === INDICATEUR DE DÉFILEMENT === */
.scroll-indicator {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  background: var(--guide-primary);
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10001;
}

.scroll-indicator.show {
  opacity: 1;
  right: -35px;
}

.scroll-indicator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--guide-primary);
}

/* Animation de défilement en cours */
.guide-content.scrolling {
  position: relative;
}

.guide-content.scrolling::before {
  content: '📜';
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1.2rem;
  opacity: 0.7;
  animation: scroll-icon-pulse 1s ease;
  z-index: 100;
}

@keyframes scroll-icon-pulse {
  0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.7; transform: scale(1); }
}

/* Focus visible pour la navigation clavier */
.guide-btn:focus,
.guide-close:focus,
.profile-card:focus {
  outline: 2px solid var(--guide-primary);
  outline-offset: 2px;
}

/* === INDICATEURS DE CHARGEMENT === */
.loading-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--guide-primary);
  font-size: 0.9rem;
}

.loading-spinner .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(52, 152, 219, 0.2);
  border-left: 2px solid var(--guide-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Conteneur du spinner - ne doit pas tourner */
.loading-spinner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

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

/* === AMÉLIORATIONS ACCESSIBILITÉ ET FOCUS === */

/* Focus visible pour l'accessibilité */
.guide-btn:focus,
.profile-card:focus,
.guide-close:focus {
  outline: 2px solid var(--guide-primary);
  outline-offset: 2px;
}

/* Amélioration du contraste pour les éléments interactifs */
.guide-btn:focus:not(:disabled) {
  box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.25);
}

/* Animation d'apparition pour les modals */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.guide-overlay.active .guide-modal {
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Micro-interactions pour une meilleure UX */
.phase:hover {
  transform: translateX(4px);
  border-left-width: 6px;
}

.feature:hover,
.challenge:hover {
  background: var(--guide-bg);
  border-color: var(--guide-primary);
}

/* Amélioration des couleurs pour les liens */
a {
  color: var(--guide-primary);
  text-decoration: none;
}

a:hover {
  color: var(--guide-secondary);
  text-decoration: underline;
}

/* Responsive amélioré pour très petits écrans */
@media (max-width: 360px) {
  .guide-modal {
    margin: 10px;
    max-width: calc(100vw - 20px);
  }
  
  .profile-cards {
    grid-template-columns: 1fr;
  }
  
  .guide-header {
    padding: 16px 20px 12px;
  }
  
  .guide-content {
    padding: 20px;
  }
  
  .guide-footer {
    padding: 16px 20px;
  }
}