/* ============================================================
   Module entretiens — design system moduloTech.
   Couvre : index/cartes d'entretien, wizard collaborateur
   (interviews/edit) et manager (manager/interviews/show),
   widgets de question (rating, choix, tri-eval, tables, étoiles),
   encarts conseil, lecture (interviews/show + stepper),
   liste manager (manager/interviews/index), commentaires,
   overlays guide/aide, anneau de progression.
   ============================================================ */

/* ===== CARTE D'ENTRETIEN (index / dashboard) ===== */
.interview-card {
  display: flex;
  flex-direction: column;
  transition: border-color 0.16s ease;
}
.interview-card:hover { border-color: #D6D8FC; }

.interview-card__countdown,
.interview-card__closed-banner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--accent);
  background: var(--brand-indigo-tint-2);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
}
.interview-card__countdown--urgent {
  color: var(--status-danger-fg);
  background: var(--status-danger-bg);
}
.interview-card__closed-banner {
  color: var(--status-neutral-fg);
  background: var(--status-neutral-bg);
}

.interview-card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin: 0 0 4px;
}
.interview-card__hint {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: 14px;
}
.interview-card__foot {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-top: 9px;
}
.interview-card__action { margin-top: 16px; }


/* ===== WIZARD (collaborateur + manager) ===== */
.interview-wizard {
  max-width: 1320px;
  margin: 0 auto;
  animation: fadeUp 0.35s ease;
}

.interview-wizard__grid {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.wizard-sidebar {
  position: sticky;
  top: 0;
}

.wizard-panel__campaign {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.wizard-panel__name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.wizard-panel__links {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

/* Petits boutons Guide / Aide */
.wizard-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--accent);
  background: var(--brand-indigo-tint-2);
  border: none;
  border-radius: var(--radius-full);
  padding: 5px 11px;
  cursor: pointer;
  transition: background 0.16s ease;
}
.wizard-help-btn:hover { background: var(--brand-indigo-tint); }
.wizard-help-btn .lucide { width: 13px; height: 13px; }

.wizard-panel__ring {
  text-align: center;
  padding: 14px 0 4px;
}


/* Liste des pages : items pilule, actif = indigo plein */
.wizard-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wizard-page-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-full);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--gray-600);
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}
.wizard-page-item:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}
/* Étape courante : teinte pâle (règle DS « une seule pilule indigo pleine
   par surface : l'action primaire » — l'état ne doit pas imiter le bouton). */
.wizard-page-item.active {
  background: var(--brand-indigo-tint);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}
.wizard-page-item.active:hover { background: var(--brand-indigo-tint); color: var(--accent-hover); }

.wizard-page-item .page-number {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: background 0.16s ease, color 0.16s ease;
}
.wizard-page-item.completed .page-number {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}
.wizard-page-item.active .page-number,
.wizard-page-item.active.completed .page-number {
  background: var(--accent);
  color: #fff;
}

/* Pulsation discrète quand une page vient d'être complétée (JS) */
.page-number.page-pop { transform: scale(1.12); transition: transform 0.2s ease; }

.wizard-panel__divider {
  border: 0;
  border-top: 1px solid var(--gray-150);
  margin: 14px 0;
}

.wizard-panel__note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--accent);
  background: var(--brand-indigo-tint);
  border-radius: var(--radius-md);
  padding: 8px 11px;
  margin-top: 12px;
}

/* Zone de contenu du wizard */
.wizard-content { min-width: 0; }

.wizard-content__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  margin: 4px 0 18px;
}

.wizard-section { margin-bottom: 28px; }

.wizard-section__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0 0 2px;
}
.wizard-section__desc {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: 14px;
}
.wizard-section__desc p { margin-bottom: 4px; }

.wizard-footer-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-150);
}

@media (max-width: 991.98px) {
  .interview-wizard__grid { grid-template-columns: 1fr; }
  .wizard-sidebar { position: static; }
}

/* ===== BLOC QUESTION ===== */
.question-block {
  background: var(--surface-card);
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  margin-bottom: 14px;
  transition: border-color 0.16s ease;
}
.question-block:focus-within { border-color: #D6D8FC; }
.question-block .form-label {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.question-block.question-answered {
  border-color: color-mix(in srgb, var(--status-success-fg) 26%, transparent);
}
.answered-check {
  vertical-align: middle;
  color: var(--status-success-fg);
}

/* Textarea de réponse libre */
.iw-textarea { background: #FCFCFD; }
.iw-textarea:focus { background: #fff; }

/* ===== ENCARTS CONSEIL ===== */
/* Aide contextuelle d'une question */
.question-hint {
  background: var(--status-info-bg);
  border-radius: var(--radius-lg);
  padding: 12px 15px;
  margin-bottom: 14px;
}
.question-hint__header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--status-info-fg);
  margin-bottom: 5px;
}
.question-hint__body {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--gray-700);
}
.question-hint__body span { display: block; }
.question-hint__body span + span { margin-top: 4px; }

.question-hint__eval-legend {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.question-hint__eval-line {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.16s ease, color 0.16s ease;
}
.question-hint__eval-line strong { font-weight: var(--weight-semibold); }
.question-hint__eval-line.active {
  background: #fff;
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

/* Coach tips (vue manager) */
.coach-tip { margin-bottom: 12px; }
.coach-tip__header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--status-info-fg);
  background: var(--status-info-bg);
  border-radius: var(--radius-full);
}
.coach-tip__body {
  margin-top: 8px;
  padding: 12px 15px;
  background: var(--surface-sunken);
  border: 1px solid #ECEEF2;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--gray-700);
}
.coach-tip__body ul { margin: 8px 0 0; padding-left: 1.2rem; }
.coach-tip__body ul li + li { margin-top: 3px; }

.coach-tip--warning .coach-tip__header {
  color: var(--status-warning-fg);
  background: var(--status-warning-bg);
}

.coach-tip__example {
  margin-top: 10px;
  padding: 10px 13px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.coach-tip__example-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.coach-tip__example--good { background: var(--status-success-bg); }
.coach-tip__example--good .coach-tip__example-label { color: var(--status-success-fg); }
.coach-tip__example--bad { background: var(--status-danger-bg); }
.coach-tip__example--bad .coach-tip__example-label { color: var(--status-danger-fg); }

/* Alertes coach contextuelles */
.coach-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  margin-top: 8px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
}
.coach-alert__icon { flex: none; margin-top: 1px; }
.coach-alert--danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.coach-alert--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.coach-alert--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.coach-alert--info { background: var(--status-info-bg); color: var(--status-info-fg); }
.coach-alert--purple { background: var(--status-violet-bg); color: var(--status-violet-fg); }

/* ===== INDICATEUR D'AUTOSAVE ===== */
.autosave-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--gray-500);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.autosave-indicator.saving { opacity: 1; color: var(--status-warning-fg); }
.autosave-indicator.saved {
  opacity: 1;
  color: var(--status-success-fg);
  animation: autosaveFadeOut 2s ease 1s forwards;
}
.autosave-indicator.error { opacity: 1; color: var(--status-danger-fg); }

@keyframes autosaveFadeOut {
  to { opacity: 0; }
}

/* ===== ÉCHELLE DE NOTATION (pilules, sans emoji) ===== */
.rating-scale {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rating-pill {
  /* Ancre l'input masqué : sans cela il se rattache au bloc racine,
     échappe au rognage de la coque et rend la fenêtre défilable. */
  position: relative;
  flex: 1;
  min-width: 76px;
  text-align: center;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 12px 8px;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.rating-pill:hover { border-color: var(--gray-300); }
.rating-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.rating-pill__value {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--gray-600);
  line-height: 1.2;
  transition: color 0.15s ease;
}
.rating-pill__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-top: 3px;
  line-height: 1.25;
}
.rating-pill:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: #EFF0FF;
}
.rating-pill:has(input:checked) .rating-pill__value,
.rating-pill:has(input:checked) .rating-pill__label { color: var(--accent); }
.rating-pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== CHOIX UNIQUE (cartes radio DS) ===== */
.choice-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.choice-card {
  /* Ancre l'input masqué : sans cela il se rattache au bloc racine,
     échappe au rognage de la coque et rend la fenêtre défilable. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-xl);
  background: #fff;
  padding: 12px 14px;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.choice-card:hover { border-color: var(--gray-300); }
.choice-card input[type="radio"],
.choice-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-card__indicator {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--gray-300);
  background: #fff;
  transition: border 0.15s ease;
}
.choice-card__text {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
.choice-card:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: #EFF0FF;
}
.choice-card:has(input:checked) .choice-card__indicator {
  border: 5.5px solid var(--accent);
}
/* Une case à cocher est carrée et porte une coche ; le cercle reste réservé au
   choix exclusif. La forme annonce à elle seule si l'on peut en choisir
   plusieurs — c'est ce que le rond ne disait pas. */
.choice-card:has(input[type="checkbox"]) .choice-card__indicator { border-radius: 5px; }
.choice-card:has(input[type="checkbox"]:checked) .choice-card__indicator {
  border: 1.5px solid var(--accent);
  background: var(--accent) center/11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.choice-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== TRI-EVAL (cartes sémantiques) ===== */
.tri-eval-modern {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.tri-eval-card {
  /* Ancre l'input masqué : sans cela il se rattache au bloc racine,
     échappe au rognage de la coque et rend la fenêtre défilable. */
  position: relative;
  text-align: center;
  padding: 14px 10px;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-xl);
  background: #fff;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.tri-eval-card:hover { border-color: var(--gray-300); }
.tri-eval-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tri-eval-card__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 7px;
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
}
.tri-eval-card__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}
.tri-eval-card[data-eval-color="red"] .tri-eval-card__icon {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}
.tri-eval-card[data-eval-color="blue"] .tri-eval-card__icon {
  background: var(--brand-indigo-tint);
  color: var(--accent);
}
.tri-eval-card[data-eval-color="green"] .tri-eval-card__icon {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}
.tri-eval-card:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: #EFF0FF;
}
.tri-eval-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Variante compacte du manager : options en pilules empilées.
   Le JS (autosave) pose/enlève la classe .selected. */
.tri-eval-option {
  display: flex;
  align-items: center;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-full);
  background: #fff;
  padding: 7px 13px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--gray-700);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.tri-eval-option:hover { border-color: var(--gray-300); }
.tri-eval-option.selected,
.tri-eval-option:has(input:checked) {
  border-color: var(--accent);
  background: #EFF0FF;
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

/* ===== TABLE GRID (question tableau) ===== */
.table-grid {
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-xl);
  background: #fff;
  overflow: hidden;
}
.table-grid__header {
  display: grid;
  grid-template-columns: var(--table-cols, repeat(3, 1fr));
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--gray-150);
}
.table-grid__header-cell {
  padding: 10px 14px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.table-grid__row {
  display: grid;
  grid-template-columns: var(--table-cols, repeat(3, 1fr));
  border-bottom: 1px solid #F4F5F9;
}
.table-grid__row:last-child { border-bottom: none; }
.table-grid__cell { padding: 10px 14px; }
.table-grid__cell-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: 4px;
}
.table-grid__cell textarea {
  border: none;
  background: transparent;
  width: 100%;
  resize: vertical;
  min-height: 50px;
  padding: 6px 8px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: background 0.16s ease;
}
.table-grid__cell textarea:focus {
  outline: none;
  background: var(--brand-indigo-tint-2);
}

@media (max-width: 767.98px) {
  .tri-eval-modern { grid-template-columns: 1fr; }
  .rating-scale { flex-direction: column; }
  .rating-pill { min-width: 0; }
  .table-grid__header,
  .table-grid__row { grid-template-columns: 1fr; }
  .table-grid__header-cell:not(:first-child) { display: none; }
}

/* ===== TABLE STACKED (objectifs) ===== */
.table-stacked {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.table-stacked__row {
  background: var(--surface-sunken);
  border: 1px solid #ECEEF2;
  border-radius: var(--radius-xl);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.table-stacked__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.table-stacked__label {
  display: flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.table-stacked__field textarea { resize: vertical; min-height: 60px; }
.table-stacked__field .form-control,
.table-stacked__field .form-select { background: #fff; }
.table-stacked__error {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 9px 12px;
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
  border-radius: var(--radius-md);
  line-height: 1.4;
}
.table-stacked__actions {
  display: flex;
  justify-content: flex-end;
}
.table-stacked__readonly .small { font-size: var(--text-sm); }

/* Surface enfoncée générique du module (remplace glass-inset) */
.iw-inset {
  background: var(--surface-sunken);
  border: 1px solid #ECEEF2;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

/* ===== ÉTOILES (note /5) ===== */
.star-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
}
.star-rating__star {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: transform 0.16s ease;
}
.star-rating__star svg { width: 20px; height: 20px; }
.star-rating__star:hover { transform: scale(1.1); }
.star-rating__star:focus { outline: none; }
.star-rating__star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.star-rating__star.active { color: #E8A33D; }
.star-rating__star.active svg { fill: #E8A33D; stroke: #E8A33D; }
.star-rating__star.inactive { color: var(--gray-200); }
.star-rating__star.inactive svg { fill: var(--gray-150); stroke: var(--gray-300); }
.star-rating--readonly { gap: 2px; padding: 0; }
.star-rating--readonly .star-rating__star { cursor: default; padding: 0; }
.star-rating--readonly .star-rating__star:hover { transform: none; }
.star-rating--readonly .star-rating__star svg { width: 16px; height: 16px; }

/* ===== ANNEAU DE PROGRESSION (fin, indigo) ===== */
.progress-ring-wrapper {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 96px;
}
.progress-ring__progress {
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.6s ease;
}
.progress-ring__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1;
}
.progress-ring__percentage {
  font-size: 22px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.progress-ring__unit {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  margin-left: 1px;
}

/* ===== LECTURE (interviews/show) ===== */
/* Stepper d'avancement du process (pattern du prototype) */
/* Le nombre d'étapes est décidé par InterviewProgressQuery : la grille s'y
   adapte au lieu de le figer.

   Les trois rangées — repère, libellé, mention — sont communes à toutes les
   colonnes : un libellé qui passe sur deux lignes pousse alors les mentions
   de toutes les étapes, au lieu de décaler la sienne seule. D'où le
   `display: contents` sur l'étape, qui livre ses trois enfants à la grille
   du parent. */
.iw-stepper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: auto auto auto;
  padding: 24px 26px;
}
.iw-stepper__step { display: contents; }
.iw-stepper__track { display: flex; align-items: center; }
.iw-stepper__dot {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #DDE0E6;
}
.iw-stepper__line {
  flex: 1;
  height: 2px;
  background: var(--gray-200);
}
.iw-stepper__step:last-child .iw-stepper__line { display: none; }
.iw-stepper__label {
  margin-top: 12px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.iw-stepper__hint {
  font-size: var(--text-xs);
  color: #B5BAC4;
  margin-top: 2px;
}
.iw-stepper__step.is-done .iw-stepper__dot {
  background: var(--accent);
  border-color: var(--accent);
}
.iw-stepper__step.is-done .iw-stepper__line { background: var(--accent); }
.iw-stepper__step.is-done .iw-stepper__label {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
.iw-stepper__step.is-current .iw-stepper__dot {
  border: 5px solid var(--accent);
  box-shadow: 0 0 0 5px var(--brand-indigo-tint);
}
.iw-stepper__step.is-current .iw-stepper__label,
.iw-stepper__step.is-current .iw-stepper__hint {
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

@media (max-width: 767.98px) {
  .iw-stepper {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-rows: none;
    gap: 12px;
    padding: 18px 20px;
  }
  /* En colonne, chaque étape redevient un bloc : ses trois parties se
     suivent, au lieu de s'éparpiller sur trois rangées de la grille. */
  .iw-stepper__step { display: block; }
  .iw-stepper__line { display: none; }
  .iw-stepper__label { margin-top: 6px; }
}

/* Question / réponse en lecture */
.iw-answer {
  padding: 13px 0 10px;
  border-top: 1px solid #F4F5F9;
}
/* Dans la vue manager, la classe .question-block est conservée pour le JS
   (indicateur d'autosave) : on neutralise son rendu carte. */
.iw-answer.question-block {
  background: transparent;
  border: none;
  border-top: 1px solid #F4F5F9;
  border-radius: 0;
  padding: 13px 0;
  margin-bottom: 0;
}
.iw-answer__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--gray-500);
  margin-bottom: 4px;
}
.iw-answer__empty {
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}
.iw-answer p:last-child { margin-bottom: 0; }

.iw-signature {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--status-success-fg);
  font-size: var(--text-base);
  margin-bottom: 6px;
}
.iw-signature:last-child { margin-bottom: 0; }

.signature-checkbox { font-size: var(--text-base); }

/* ===== LISTES MANAGER (manager/interviews/index) ===== */
.mgr-row__progress {
  width: 110px;
  flex: none;
}
.mgr-row--disabled { opacity: 0.6; }

/* ===== COMMENTAIRES DE SECTION (vue manager) ===== */
.iw-comments {
  background: var(--surface-sunken);
  border: 1px solid #ECEEF2;
  border-radius: var(--radius-xl);
  padding: 16px 18px;
  margin-top: 16px;
}
.iw-comments__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.comment-entry {
  background: #fff;
  border: 1px solid var(--gray-150);
  border-left: 3px solid #D6D8FC;
  border-radius: var(--radius-md);
  padding: 10px 13px;
  margin-bottom: 8px;
}
.comment-entry p { font-size: var(--text-sm); }

.manager-comment-send {
  width: 36px;
  height: 36px;
  flex: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D6D8FC;
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--accent);
  transition: background 0.16s ease, color 0.16s ease;
}
.manager-comment-send:hover { background: var(--accent); color: #fff; }

/* ===== OVERLAYS GUIDE / AIDE ===== */
.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 26, 34, 0.34);
  animation: welcomeFadeIn 0.3s ease;
  padding: 16px;
  overflow-y: auto;
}

/* Les noms welcomeFadeIn / welcomeFadeOut sont posés en style inline
   par les contrôleurs welcome-overlay et help-overlay : ne pas renommer. */
@keyframes welcomeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes welcomeFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.welcome-card {
  background: #fff;
  border: 1px solid var(--gray-150);
  border-radius: 24px;
  padding: 34px 38px;
  max-width: 600px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  text-align: center;
  box-shadow: var(--shadow-panel-strong);
}
.welcome-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--brand-indigo-tint);
  color: var(--accent);
  margin-bottom: 14px;
}
.welcome-card h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.welcome-card__intro {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: 20px;
}
.welcome-card__structure {
  background: var(--surface-sunken);
  border: 1px solid #ECEEF2;
  border-radius: var(--radius-xl);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.welcome-card__structure h6 {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin-bottom: 12px;
}
.welcome-card__pages {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.welcome-card__page {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.welcome-card__page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.welcome-card__duration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: 0;
}
.welcome-card__tips {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  text-align: left;
}
.welcome-card__tips li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
  font-size: var(--text-base);
  line-height: 1.5;
}
.welcome-card__tips li i {
  flex: none;
  color: var(--accent);
  margin-top: 2px;
}
.welcome-card__cta { padding: 12px 32px; }

@media (max-width: 575.98px) {
  .welcome-card { padding: 22px 20px; }
}

/* ===== ENTRETIEN PROFESSIONNEL — page focus & admin ===== */
.pro-focus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
/* Formulaire compact en ligne, encore utilisé par le référentiel métiers. */
.pro-plan-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* Colonne « Dernier entretien ». La date porte l'information, la ligne
   au-dessous dit d'où elle vient — un entretien signé, une référence saisie,
   ou l'embauche à défaut. Sans cette origine, deux dates identiques dans la
   colonne n'ont pas du tout la même valeur. */
/* Le tableau de suivi tient sur une ligne par collaborateur : les dates et
   les noms ne se coupent pas, c'est la page qui défile si nécessaire. */
.pro-track th { white-space: nowrap; }
.pro-track__who { min-width: 0; }
.pro-track__name { font-weight: var(--weight-semibold); white-space: nowrap; }
.pro-track__job { font-size: var(--text-sm); color: var(--gray-500); white-space: nowrap; }
.pro-track__due { white-space: nowrap; }
/* La date et le statut qu'elle produit se lisent ensemble : les séparer en
   deux colonnes obligeait à faire l'aller-retour pour comprendre l'une. */
.pro-track__due-date { margin-right: 8px; color: var(--text-primary); }
.pro-track__running {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pro-ref { min-width: 230px; }
.pro-ref__done { font-size: var(--text-sm); color: var(--text-primary); }
.pro-ref__text { flex: 1; min-width: 0; }
.pro-ref__value {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
}
.pro-ref__value--missing { color: var(--status-warning-fg); }
.pro-ref__origin {
  display: block;
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-top: 1px;
}
.pro-ref__edit {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  margin: -4px -8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
/* Le crayon ne se montre qu'au survol : soixante-dix icônes en permanence
   feraient plus de bruit que d'aide. Lucide remplace le <i> par un <svg> :
   le sélecteur doit viser les deux, sinon l'icône reste affichée. */
.pro-ref__edit i,
.pro-ref__edit svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--gray-400);
  opacity: 0;
  transition: opacity 0.16s ease;
}
.pro-ref__edit:hover {
  background: var(--gray-50, #FAFAFC);
  border-color: var(--gray-200);
}
.pro-ref__edit:hover i,
.pro-ref__edit:hover svg,
.pro-ref__edit:focus-visible i,
.pro-ref__edit:focus-visible svg { opacity: 1; }
.pro-ref__form {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pro-ref__form .ds-date { flex: 1; min-width: 140px; }
.pro-guide-editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  background: #FCFCFD;
}

/* Encart de conseils : des pistes de réflexion, pas un champ. Le traitement
   visuel doit dire « à lire », pas « à remplir ». */
.question-help {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--gray-50);
  border: 1px dashed var(--gray-200);
}
.question-help__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--gray-700);
}
.question-help__item .lucide {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
  color: var(--gray-400);
}

/* Liste du périmètre dans le guide de l'entretien professionnel : elle occupe
   la place que la structure en quatre pages tient dans le guide annuel. */
.welcome-card__scope {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  text-align: left;
}
.welcome-card__scope li {
  position: relative;
  padding-left: 18px;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}
.welcome-card__scope li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Encart conseil en tête de section : il remplace le paragraphe d'intention
   qui se confondait avec les questions. */
.wizard-section__tip { margin-bottom: var(--space-5); }

/* Tableau de conclusion de l'entretien professionnel : la rubrique tient une
   colonne étroite, la synthèse prend tout le reste. */
.conclusion-table { margin-bottom: 0; }
.conclusion-table th {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  vertical-align: middle;
}
.conclusion-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.conclusion-table tbody th { width: 32%; }
.conclusion-table td { padding-right: 0; }
.conclusion-table textarea { resize: vertical; }

/* Conclusion en lecture : plus de champs, du texte — la colonne de gauche
   garde sa largeur pour que les deux vues se superposent mentalement. */
.conclusion-table--read td { vertical-align: top; padding-top: 12px; }
.conclusion-table--read td p { margin-bottom: 0; }