/* ============================================================
   BACK-OFFICE — Styles
   ============================================================
   Interface sobre, fonctionnelle, pensée pour la productivité.
   Mobile-first, CSS vanilla.
   ============================================================ */

/* --- RGAA — Helpers d'accessibilité (utilities) ---
 *
 * .sr-only : cache un texte visuellement tout en le laissant accessible
 * aux lecteurs d'écran. Pattern standard (Bootstrap, GOV.UK, MDN). Sert
 * pour les compléments d'info qui doublent une couleur, une icône emoji
 * ou un astérisque visuel (RGAA 11.9, 11.12, 11.13).
 *
 * .skip-link : lien de saut "Aller au contenu principal", caché hors
 * écran par défaut, révélé au focus clavier (premier Tab). Permet aux
 * utilisateurs clavier de sauter la topbar (RGAA 12.2).
 */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-accent);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 10000;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 4px 0;
  transition: top 0.15s;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

:root {
  /* Palette alignée sur l214.com */
  --color-primary: #212121;        /* Anthracite — texte, titres, boutons */
  --color-primary-light: #32373c;  /* Anthracite clair — survol */
  --color-primary-bg: #eeeeee;     /* Gris très clair — fonds légers */
  --color-accent: #f89b12;         /* Orange L214 — accents, CTA, liens */
  --color-accent-light: #fbb740;   /* Orange clair — survol accent */
  --color-accent-bg: #fff7e6;      /* Orange très pâle — fond accent */
  --color-text: #212121;
  --color-text-light: #555;
  --color-border: #d1d1d1;
  --color-error: #c1121f;
  --color-error-bg: #fdf0f0;
  --color-success: #2e7d32;
  --color-success-bg: #e8f5e9;
  --color-warning: #e76f00;
  --color-warning-bg: #fff3e0;
  --color-bg: #f5f5f5;
  --color-white: #ffffff;
  --radius: 6px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --font-family: "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* --- Écrans (login vs app) --- */
.screen {
  min-height: 100vh;
}

/* ============================================================
   ÉCRAN DE CONNEXION
   ============================================================ */

#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f5f5 0%, #eee 100%);
}

.login-container {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-header h1 {
  font-size: 1.8rem;
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-accent);
  display: inline-block;
  padding-bottom: 0.3rem;
}

.login-header p {
  color: var(--color-text-light);
  font-size: 0.9rem;
}

/* --- Champs de formulaire (réutilisés partout) --- */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.2rem;
  border: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
  text-decoration: none;
}

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

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  width: 100%;
  padding: 0.7rem;
  font-size: 1rem;
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-accent);
}

.btn-small {
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn-outline:hover {
  background: var(--color-bg);
}

/* --- Sélecteur 3 vues (LR-04) : Liste / Kanban / Matrice ---
   Segmented control au-dessus du tableau des candidatures. Chaque
   bouton porte data-view et la classe .active reflète la vue courante.
   Le visuel "actif" reprend les couleurs accent de l'app pour rester
   cohérent avec les pills de filtre. */
.view-switcher {
  display: flex;
  gap: 0;
}
.view-switcher .view-btn {
  border-radius: 0;
  border-right-width: 0;
}
.view-switcher .view-btn:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.view-switcher .view-btn:last-child {
  border-right-width: 1px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.view-switcher .view-btn.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  font-weight: 600;
}
.view-switcher .view-btn.active:hover {
  background: var(--color-accent);
  filter: brightness(0.95);
}

.btn-danger {
  background-color: var(--color-error);
  color: var(--color-white);
}

.btn-danger:hover:not(:disabled) {
  background-color: #a00;
}

/* --- Messages --- */
.message {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.message.error {
  background-color: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

.message.success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.message.warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
}

/* ============================================================
   BARRE DE NAVIGATION
   ============================================================ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.5rem;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-left strong {
  color: var(--color-primary);
  font-size: 1.1rem;
  border-left: 3px solid var(--color-accent);
  padding-left: 0.5rem;
}

/* Sélecteur de profil (super admin) */
.profile-selector {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: inherit;
  background: var(--color-accent-bg);
  color: var(--color-text);
  cursor: pointer;
  max-width: 220px;
}

/* Bandeau d'impersonation */
.impersonate-banner {
  background: var(--color-accent);
  color: #fff;
  text-align: center;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  position: sticky;
  top: 45px;
  z-index: 99;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--color-text-light);
}

/* ============================================================
   CONTENU PRINCIPAL
   ============================================================ */

.app-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* --- Titre de page --- */
.page-title {
  font-size: 1.4rem;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--color-accent);
  padding-left: 0.6rem;
}

/* --- Cartes de session (tableau de bord) --- */
.sessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.session-card {
  background: var(--color-white);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  padding: 1.2rem;
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.session-card:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  border-color: var(--color-accent);
}

.session-card h3 {
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.session-card .meta {
  font-size: 0.85rem;
  color: var(--color-text-light);
}

/* --- Badges de statut --- */
.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-open { background: var(--color-success-bg); color: var(--color-success); }
.badge-closed { background: #f0f0f0; color: #666; }
.badge-draft { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-archived { background: #e8e8e8; color: #999; }

.badge-creator { background: var(--color-accent-bg); color: var(--color-accent); }
.badge-evaluator { background: #e3f2fd; color: #1565c0; }

.badge-retained { background: var(--color-success-bg); color: var(--color-success); }
.badge-rejected { background: var(--color-error-bg); color: var(--color-error); }
.badge-pending { background: var(--color-warning-bg); color: var(--color-warning); }
/* FR-024 historique — la classe .badge-in_progress était utilisée pour le statut
   intermédiaire "En cours". FR-028 a fusionné ce cas dans "Retenu" (statut
   global du candidat), donc cette classe n'est plus appliquée par le code.
   Conservée par sécurité au cas où un cache backend renverrait encore l'ancien
   displayStatus pendant la fenêtre de déploiement. À nettoyer plus tard. */
.badge-in_progress { background: #e8f5e9; color: #2e7d32; }

/* --- Spinner de chargement --- */
.loading {
  text-align: center;
  padding: 3rem;
  color: var(--color-text-light);
}

.spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 0.5rem;
}

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

/* ============================================================
   BARRE DE STATISTIQUES
   ============================================================ */

.stats-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.stat-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.8rem 1.2rem;
  text-align: center;
  flex: 1;
  min-width: 100px;
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-pending { color: var(--color-warning); }
.stat-retained { color: var(--color-success); }
.stat-rejected { color: var(--color-error); }

/* ============================================================
   BARRE DE FILTRES / TRI
   ============================================================ */

.filters-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: 0.6rem 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.filter-group label {
  font-weight: 600;
  color: var(--color-text-light);
}

.filter-group select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
}

/* ============================================================
   TABLEAU DES CANDIDATURES
   ============================================================ */

.table-wrapper {
  overflow-x: auto;
}

.candidates-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.candidates-table th {
  text-align: left;
  padding: 0.7rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-border);
}

.candidates-table td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
  vertical-align: middle;
}

.candidate-row {
  cursor: pointer;
  transition: background-color 0.15s;
}

.candidate-row:hover {
  background-color: var(--color-accent-bg);
}

.candidate-name {
  font-weight: 600;
}

.candidate-email {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.comment-count {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

/* --- Barre de score dans le tableau --- */
.score-cell {
  min-width: 140px;
}

.score-bar-container {
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.2rem;
}

.score-bar {
  height: 100%;
  background: var(--color-accent);
  border-radius: 4px;
  transition: width 0.3s;
}

.score-value {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/* ============================================================
   FICHE CANDIDATURE INDIVIDUELLE
   ============================================================ */

.candidate-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.candidate-meta {
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin-top: 0.3rem;
}

.candidate-meta a {
  color: var(--color-accent);
}

/* --- Score circulaire --- */
.score-big {
  text-align: center;
  flex-shrink: 0;
}

.score-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color-accent) calc(var(--percent) * 1%),
    #eee calc(var(--percent) * 1%)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.score-circle::before {
  content: "";
  width: 60px;
  height: 60px;
  background: var(--color-white);
  border-radius: 50%;
  position: absolute;
}

.score-circle span {
  position: relative;
  z-index: 1;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-accent);
}

.score-detail {
  font-size: 0.8rem;
  color: var(--color-text-light);
  margin-top: 0.3rem;
}

/* --- Sections de la fiche --- */
.detail-section {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-bottom: 1rem;
}

.detail-section h3 {
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-accent);
}

/* --- Lucile #2 — Sidebar flottante en position: fixed ---
 *
 * Pourquoi pas CSS Grid ?
 * Le HTML actuel a un léger déséquilibre de divs accumulé (1 close
 * orpheline historique dans le code). CSS Grid avec un wrapper amplifie
 * le problème en plaçant les blocs orphelins en col 2 par auto-placement,
 * ce qui cassait le rendu (Actions RGPD se retrouvait dans la sidebar).
 *
 * Avec position: fixed, l'aside flotte indépendamment du DOM et n'est
 * pas affectée par les déséquilibres HTML environnants.
 *
 * Le contenu principal reçoit un padding-right (cf. règle :has() plus
 * bas) pour ne pas être masqué par l'aside.
 */
.candidate-detail-sidebar {
  position: fixed;
  top: 4.5rem;  /* sous la topbar */
  /* right: max() : marge mini 1.5rem, mais si la page dépasse 1380px
   * de large, on aligne l'aside avec le bord du wrapper centré. */
  right: max(1.5rem, calc((100vw - 1380px) / 2 + 1.5rem));
  width: 380px;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  /* z-index modéré : sous les modals (z-index 1000) mais au-dessus du
   * contenu standard. */
  z-index: 5;
}

/* Padding-right sur le wrapper pour libérer la place de l'aside.
 * :has() est supporté par tous les navigateurs récents (Chrome 105+,
 * Safari 15.4+, Firefox 121+). Si pas supporté, la règle est ignorée
 * et le contenu passe sous l'aside — dégradation acceptable.
 *
 * padding-right: 440px = 380 (largeur aside) + 60 (gap visuel ~4rem)
 * pour aérer la séparation entre contenu principal et sidebar. */
.app-content:has(.candidate-detail-sidebar) {
  max-width: 1380px;
  padding-right: 440px;
}

/* Mobile / largeur intermédiaire : l'aside redescend en flux normal
 * sous le contenu, position static, pleine largeur. */
@media (max-width: 1200px) {
  .candidate-detail-sidebar {
    position: static;
    width: auto;
    max-height: none;
    overflow-y: visible;
    margin-top: 1rem;
    z-index: auto;
  }

  .app-content:has(.candidate-detail-sidebar) {
    padding-right: 1rem;
  }
}

/* --- Grille de compétences (fiche) --- */
.skills-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.skills-detail-table th {
  text-align: left;
  padding: 0.4rem 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-text-light);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}

.skills-detail-table td {
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}

.skills-detail-table .skill-category {
  font-weight: 600;
  color: var(--color-accent);
  padding-top: 0.8rem;
  font-size: 0.85rem;
  border-bottom: none;
}

.text-center { text-align: center; }
.text-bold { font-weight: 600; }
.text-light { color: var(--color-text-light); }

/* Barres de niveau (compétences) */
.level-bar-container {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
  width: 80px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4rem;
}

.level-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

.level-1 { background: var(--color-warning); }
.level-2 { background: #f9c74f; }
.level-3 { background: var(--color-success); }

.level-label {
  font-size: 0.8rem;
  color: var(--color-text-light);
  vertical-align: middle;
}

/* --- Questions / Réponses --- */
.qa-block {
  margin-bottom: 1rem;
}

.qa-question {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.qa-answer {
  font-size: 0.9rem;
  color: var(--color-text);
  white-space: pre-line;
  background: var(--color-bg);
  padding: 0.6rem;
  border-radius: 4px;
  border-left: 3px solid var(--color-accent);
}

/* --- Pipeline --- */
.pipeline {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pipeline-step {
  flex: 1;
  min-width: 140px;
  padding: 0.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.pipeline-step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  background: #eee;
  color: #999;
}

.pipeline-retained .pipeline-step-number { background: var(--color-success-bg); color: var(--color-success); }
.pipeline-rejected .pipeline-step-number { background: var(--color-error-bg); color: var(--color-error); }
.pipeline-pending .pipeline-step-number { background: var(--color-warning-bg); color: var(--color-warning); }

.pipeline-step-name {
  font-weight: 600;
  font-size: 0.85rem;
}

.pipeline-step-status {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.pipeline-step-meta {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.pipeline-step-comment {
  font-size: 0.8rem;
  font-style: italic;
  margin-top: 0.3rem;
  color: var(--color-text-light);
}

/* --- Commentaires --- */
.comment {
  padding: 0.8rem;
  margin-bottom: 0.6rem;
  background: var(--color-bg);
  border-radius: var(--radius);
  border-left: 3px solid var(--color-border);
}

.comment-own {
  border-left-color: var(--color-accent);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
}

.comment-date {
  color: var(--color-text-light);
  font-size: 0.8rem;
}

.comment-body {
  font-size: 0.9rem;
  white-space: pre-line;
}

/* Boutons icône (modifier / supprimer) dans les commentaires */
.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  color: var(--color-text-light);
  transition: background-color 0.15s, color 0.15s;
  margin-left: 0.3rem;
}

.btn-icon:hover {
  background-color: var(--color-primary-bg);
  color: var(--color-text);
}

/* RGAA 10.7 — focus visible explicite sur les boutons icônes
 * (déconnexion ⛶ expand, ✕ supprimer, etc.). Le navigateur affiche par
 * défaut un outline subtil qui peut être masqué par le fond — on force
 * un outline contrasté visible. :focus-visible cible seulement le
 * focus clavier (pas le clic souris). */
.btn-icon:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* RGAA 10.7 — focus visible sur les boutons de vote (-3 à +3) qui ont
 * des bordures colorées et fond transparent ; le focus natif est
 * souvent absorbé visuellement par la bordure existante. */
.vote-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* RGAA 10.7 — focus visible sur les boutons (général). Fallback pour
 * tous les <button> sans outline custom. */
.btn:focus-visible,
.btn-small:focus-visible,
.btn-outline:focus-visible,
.btn-danger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-delete-comment:hover {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}

/* ============================================================
   LIGNES DYNAMIQUES (compétences, questions)
   ============================================================ */

.dynamic-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  margin-bottom: 0.4rem;
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid #eee;
}

.dynamic-row input[type="text"],
.dynamic-row input[type="number"],
.dynamic-row textarea {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
}

.dynamic-row input[type="text"]:focus,
.dynamic-row textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-bg);
}

.dynamic-row-vertical {
  flex-direction: column;
  align-items: stretch;
}

.dynamic-row-vertical input[type="text"],
.dynamic-row-vertical textarea {
  width: 100%;
}

/* ============================================================
   MINIATURES DOCUMENTS + MODAL PRÉVISUALISATION
   ============================================================ */

.doc-thumbnails {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.doc-card {
  width: 130px;
  height: 150px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.8rem 0.5rem;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.doc-available {
  cursor: pointer;
  background: var(--color-white);
}

.doc-available:hover {
  border-color: var(--color-accent);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.doc-empty {
  background: var(--color-bg);
  border-style: dashed;
}

.doc-icon {
  font-size: 2.5rem;
  margin-bottom: 0.4rem;
}

.doc-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}

.doc-ext {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-top: 0.2rem;
  padding: 0.1rem 0.4rem;
  background: var(--color-accent-bg);
  border-radius: 3px;
}

.doc-status {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 0.2rem;
}

/* --- Modal de prévisualisation --- */
.doc-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.doc-modal-content {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 900px;
  height: 85vh;
  background: var(--color-white);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.doc-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.doc-modal-body {
  flex: 1;
  overflow: hidden;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
  .app-content {
    padding: 1rem 0.75rem;
  }

  .topbar {
    padding: 0.5rem 0.75rem;
  }

  .sessions-grid {
    grid-template-columns: 1fr;
  }

  .stats-bar {
    gap: 0.5rem;
  }

  .stat-item {
    min-width: 80px;
    padding: 0.5rem;
  }

  .candidate-header {
    flex-direction: column;
  }

  .pipeline {
    flex-direction: column;
  }

  .filters-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   PLAYGROUND — TOUR DE FORMATION INTERACTIF
   ============================================================
   Styles utilisés par playground.js. Aligné sur la charte L214 :
   anthracite + orange. Le bandeau "Mode formation" en haut signale
   visuellement qu'on est dans le tour, sans contraster sauvagement
   avec le reste de l'app.
   ============================================================ */

/* Bandeau orange L214 permanent : signale qu'on est en mode formation.
   Toujours visible, mais discret par rapport au reste de l'UI. */
.playground-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-accent-bg);
  border: 1px solid var(--color-accent);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.playground-banner-sep {
  color: var(--color-accent);
  margin: 0 0.2rem;
}

/* Zone de contenu principale du playground.
   On laisse une marge en bas pour ne pas être masqué par la barre nav. */
.playground-content {
  padding-bottom: 5rem;
}

.playground-step {
  max-width: 720px;
  margin: 0 auto;
}

.playground-step h2 {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

.playground-step p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* --- Form fields à l'intérieur d'une étape : applique les conventions
       L214 (mêmes paddings/border-radius/font que les .form-group) à
       tous les inputs / selects / textareas, qu'ils soient ou non
       dans un .form-group. Évite d'avoir à styler chaque champ inline. */
.playground-step input[type="text"],
.playground-step input[type="email"],
.playground-step input[type="password"],
.playground-step input[type="tel"],
.playground-step input[type="url"],
.playground-step input[type="date"],
.playground-step input[type="number"],
.playground-step textarea,
.playground-step select {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-text);
  transition: border-color 0.2s;
}

.playground-step input:focus,
.playground-step textarea:focus,
.playground-step select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.playground-step textarea {
  resize: vertical;
  min-height: 4rem;
}

/* Sélecteur de candidat : ses boutons réutilisent les classes .btn de
   l'app (.btn .btn-outline .btn-small en état normal, version "active"
   ci-dessous quand le candidat est sélectionné). */
.pg-candidate-btn {
  font-weight: 500;
}

.pg-candidate-btn-active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
}

.pg-candidate-btn-active:hover {
  background-color: var(--color-primary-light);
}

/* Cartes d'upload fictives (étape 5 — aperçu candidat) */
.pg-upload-card:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-bg);
  color: var(--color-primary);
}

/* "Cartes" d'information dans une étape (cas concret, programme, etc.) */
.playground-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}

.playground-card h3 {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

/* Variante "info" : fond orange doux pour les encarts pédagogiques.
   Aligné sur la palette L214 (--color-accent-bg + texte primary). */
.playground-card-info {
  background: var(--color-accent-bg);
  border-color: var(--color-accent);
  border-left-width: 4px;
  color: var(--color-primary);
  font-size: 0.88rem;
}

/* Barre de navigation collée en bas de l'écran.
   Toujours accessible : on peut quitter ou avancer depuis n'importe
   où dans le contenu de l'étape, sans devoir scroller. */
.playground-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 2px solid var(--color-primary);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 99;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.playground-progress {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.playground-nav-buttons {
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 600px) {
  .playground-navbar {
    padding: 0.6rem 1rem;
    flex-direction: column;
    align-items: stretch;
  }
  .playground-progress {
    text-align: center;
  }
  .playground-nav-buttons {
    justify-content: space-between;
  }
}

/* ============================================================
   CENTRE D'AIDE
   ============================================================
   Mise en page : menu latéral + zone de contenu, à la marked.js
   Le rendu Markdown utilise des balises HTML standard (h1, p, ul,
   etc.) — on les style ici pour qu'elles soient lisibles.
   ============================================================ */

.help-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1rem;
  align-items: flex-start;
}

.help-menu {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.7rem;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.help-menu input[type="text"] {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}

.help-menu-section {
  margin-bottom: 0.8rem;
}

.help-menu-section h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
}

.help-menu-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-menu-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-text);
  font-family: inherit;
  transition: background-color 0.15s;
}

.help-menu-item:hover {
  background: var(--color-bg);
}

.help-menu-item-active {
  background: var(--color-accent-bg);
  color: var(--color-accent);
  font-weight: 600;
}

.help-menu-footer {
  border-top: 1px solid var(--color-border);
  padding-top: 0.6rem;
  margin-top: 0.6rem;
}

/* Zone de contenu (article rendu depuis Markdown) */
.help-content {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  min-height: 400px;
  line-height: 1.6;
}

.help-content h1 {
  font-size: 1.5rem;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
  margin-top: 0;
}

.help-content h2 {
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}

.help-content h3 {
  font-size: 1rem;
  color: var(--color-primary);
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
}

.help-content p {
  margin-bottom: 0.8rem;
}

.help-content ul,
.help-content ol {
  margin: 0.5rem 0 0.8rem 1.5rem;
}

.help-content li {
  margin-bottom: 0.3rem;
}

.help-content code {
  background: var(--color-bg);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.88em;
  color: var(--color-accent);
}

.help-content pre {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.8rem;
  overflow-x: auto;
  margin: 0.8rem 0;
}

.help-content pre code {
  background: transparent;
  padding: 0;
  color: var(--color-text);
}

.help-content a {
  color: var(--color-accent);
  text-decoration: underline;
}

.help-content a:hover {
  color: var(--color-accent-light);
}

.help-content strong {
  color: var(--color-primary);
}

@media (max-width: 800px) {
  .help-layout {
    grid-template-columns: 1fr;
  }
  .help-menu {
    position: static;
    max-height: none;
  }
}

/* ============================================================
   AIDES CONTEXTUELLES — petit ? cliquable + bulle d'info
   ============================================================ */

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-accent-bg);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-family);
  cursor: help;
  margin-left: 0.3rem;
  vertical-align: middle;
  user-select: none;
  transition: background-color 0.15s, color 0.15s;
}

.help-icon:hover,
.help-icon:focus {
  background: var(--color-accent);
  color: var(--color-white);
  outline: none;
}

.help-tooltip {
  position: absolute;
  z-index: 9999;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  max-width: 320px;
  font-size: 0.85rem;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  color: var(--color-text);
}

.help-tooltip strong {
  color: var(--color-primary);
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  .help-tooltip {
    max-width: calc(100vw - 20px);
  }
}

/* ============================================================
   TOASTS — notifications éphémères non bloquantes
   ============================================================
   Empilées en bas à droite. Générées par showToast() (core.js).
   z-index au-dessus de la barre de comparaison (100) et des modales. */
#toast-container {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: min(360px, calc(100vw - 2.4rem));
  /* Le conteneur ne capte pas les clics (laisse passer vers l'UI dessous)... */
  pointer-events: none;
}

.toast {
  /* ...mais chaque toast oui, pour permettre le clic sur « fermer ». */
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.4;
  border-left: 4px solid var(--color-accent);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-success { border-left-color: var(--color-success); }
.toast-error   { border-left-color: var(--color-error); }
.toast-info    { border-left-color: var(--color-accent); }

.toast-close {
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
  opacity: 0.8;
}

.toast-close:hover { opacity: 1; }

.toast-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Accessibilité : pas d'animation de translation si l'utilisateur a demandé
   de réduire les animations (RGAA / prefers-reduced-motion). */
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.2s ease; transform: none; }
  .toast-visible { transform: none; }
}