/* ============================================================================
   Simulateur ATS (/outils/simulateur-ats) : zone de dépôt, verdict, contrôles,
   aperçu « ce que le logiciel lit ». Complète cv-tool.css (héros, boutons, cartes).
   Couleurs : variables du site (charte), pas de teinte en dur hors vert/orange/rouge d'état.
   ========================================================================= */

/* ----- visuel du héros : colonne des contrôles, à droite de la feuille ----- */
.ats-hero-controles { display: flex; flex-direction: column; gap: .45rem; padding: .35rem .1rem; }
.ats-hero-verdict {
  align-self: flex-start; margin-bottom: .2rem; padding: .25rem .6rem; border-radius: 999px;
  background: #dcfce7; color: #166534; font-size: .7rem; font-weight: 800;
}
.ats-hero-ligne { position: relative; padding-inline-start: 1.25rem; font-size: .68rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ats-hero-ligne::before { position: absolute; inset-inline-start: 0; top: 0; font-weight: 800; }
.ats-hero-ligne.is-ok::before { content: "✓"; color: #16a34a; }
.ats-hero-ligne.is-non::before { content: "✕"; color: #ea580c; }

/* Champ fichier caché mais accessible (le « .sr-only » de Tailwind n'est pas garanti dans le CSS compilé). */
.ats-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

/* ----- zone de dépôt ----- */
.ats-depot {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 2.2rem 1.25rem; border: 2px dashed var(--border); border-radius: 1rem;
  background: var(--card-bg); text-align: center; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.ats-depot:hover, .ats-depot.is-survol { border-color: var(--accent); }
.ats-depot:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.ats-depot-icone { font-size: 2rem; line-height: 1; }
.ats-depot-titre { margin: 0; font-size: 1rem; font-weight: 800; color: var(--fg); }
.ats-depot-aide { margin: 0; font-size: .82rem; color: var(--muted); }
.ats-depot-bouton {
  margin-top: .25rem; padding: .6rem 1.4rem; border: 0; border-radius: .75rem;
  background: var(--accent); color: #fff; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.ats-depot-bouton:hover { background: var(--accent-dark); }
.ats-confidentialite { margin: .7rem 0 0; font-size: .78rem; color: var(--muted); text-align: center; }

/* ----- erreurs et attente ----- */
.ats-erreur {
  margin: 1rem 0 0; padding: .8rem 1rem; border: 1px solid #fecaca; border-radius: .75rem;
  background: #fef2f2; color: #991b1b; font-size: .875rem;
}
.ats-attente { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; font-size: .9rem; color: var(--muted); }
.ats-attente i {
  width: 1.1rem; height: 1.1rem; border: 2.5px solid var(--accent-soft); border-top-color: var(--accent);
  border-radius: 50%; animation: ats-rotation .8s linear infinite;
}
@keyframes ats-rotation { to { transform: rotate(360deg); } }

/* ----- barre de progression (envoi réel puis analyse) ----- */
.ats-progression { padding: 1.4rem 1.3rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card-bg); }
.ats-progression-entete { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; font-size: .9rem; font-weight: 700; color: var(--fg); }
.ats-progression-pourcent { color: var(--accent); font-variant-numeric: tabular-nums; }
.ats-progression-piste { height: .7rem; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.ats-progression-barre {
  position: relative; height: 100%; border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, var(--accent), var(--titre-bleu, var(--accent)) 60%, var(--orange, var(--accent)));
  transition: width .25s ease-out;
}
/* Reflet qui glisse sur la barre : signale que le travail continue même quand le pourcentage ralentit. */
.ats-progression-barre::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-100%); animation: ats-reflet 1.3s ease-in-out infinite;
}
@keyframes ats-reflet { to { transform: translateX(100%); } }
.ats-progression-fichier { margin: .7rem 0 0; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .ats-progression-barre { transition: none; }
  .ats-progression-barre::after { animation: none; display: none; }
}

/* ----- résultat : verdict et compteur ----- */
.ats-resultat { margin-top: 1.5rem; display: grid; gap: 1rem; }
.ats-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; padding: 1.1rem 1.2rem; border-radius: 1rem; border: 1px solid var(--border); background: var(--card-bg); }
.ats-verdict-pastille { padding: .4rem .95rem; border-radius: 999px; font-size: .95rem; font-weight: 800; }
.ats-verdict.is-good    .ats-verdict-pastille { background: #dcfce7; color: #166534; }
.ats-verdict.is-improve .ats-verdict-pastille { background: #ffedd5; color: #9a3412; }
.ats-verdict.is-risk    .ats-verdict-pastille { background: #fee2e2; color: #991b1b; }
.ats-verdict-compteur { font-size: .9rem; color: var(--muted); }
.ats-verdict-fichier { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }

/* ----- liste des contrôles ----- */
.ats-controles { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.ats-controle { padding: .9rem 1.05rem; border: 1px solid var(--border); border-inline-start: 4px solid var(--border); border-radius: .8rem; background: var(--card-bg); }
.ats-controle.is-blocking { border-inline-start-color: #dc2626; }
.ats-controle.is-improve  { border-inline-start-color: #ea580c; }
.ats-controle.is-info     { border-inline-start-color: #d97706; }
.ats-controle.is-passed   { border-inline-start-color: #16a34a; }
.ats-controle.is-na       { opacity: .75; }
.ats-controle-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; }
.ats-controle-titre { margin: 0; font-size: .92rem; font-weight: 800; color: var(--fg); }
.ats-controle-etat { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.is-blocking .ats-controle-etat { color: #dc2626; }
.is-improve  .ats-controle-etat { color: #ea580c; }
.is-info     .ats-controle-etat { color: #d97706; }
.is-passed   .ats-controle-etat { color: #16a34a; }
.is-na       .ats-controle-etat { color: var(--muted); }
.ats-controle p { margin: .3rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.ats-controle p strong { color: var(--fg); }

/* ----- appels à l'action (sous le résultat) ----- */
.ats-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.ats-cta-secondaire { font-size: .875rem; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.ats-cta-secondaire:hover { color: var(--accent-dark); }
@media (max-width: 479px) { .ats-cta .outils-bouton { width: 100%; } }

/* ----- notes et invitation ----- */
.ats-notes { margin: 0; padding: 0 0 0 1.1rem; font-size: .82rem; line-height: 1.55; color: var(--muted); }
.ats-notes li + li { margin-top: .3rem; }

/* ----- aperçu « ce que le logiciel lit » ----- */
.ats-apercu { border: 1px solid var(--border); border-radius: 1rem; background: var(--card-bg); overflow: hidden; }
.ats-apercu-titre { margin: 0; padding: .85rem 1.1rem .15rem; font-size: .95rem; font-weight: 800; color: var(--fg); }
.ats-apercu-aide { margin: 0; padding: 0 1.1rem .6rem; font-size: .8rem; color: var(--muted); }
.ats-apercu pre {
  margin: 0; padding: 1rem 1.1rem; max-height: 24rem; overflow: auto;
  border-top: 1px solid var(--border); font-size: .8rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); background: transparent;
}
.ats-apercu pre:empty::before { content: "Aucun texte n'a pu être extrait de ce fichier."; color: var(--muted); font-style: italic; }