/**
 * ZONEMPLOI - RESTITUTION DE LA DECISION
 * ======================================
 * Feuille AUTONOME, chargee des deux cotes : administration et espace
 * recruteur.
 *
 * Elle n'emprunte rien a zonemploi-admin.css ni a zonemploi-ui.css. C'est
 * volontaire : le meme balisage est rendu dans deux contextes qui ne
 * partagent ni prefixe ni variables, et le faire dependre de l'un des deux
 * aurait donne un panneau correct d'un cote, nu de l'autre.
 *
 * Toutes les valeurs sont donc ecrites en dur, avec un prefixe zd- qui
 * n'existe nulle part ailleurs.
 */

/* ============================================================
   RESUME DANS LA LISTE
   ============================================================ */

.zd-motif {
    font-size: 12.5px;
    line-height: 1.5;
    color: #54595F;
}
.zd-motif strong { color: #1E293B; font-weight: 700; }
.zd-motif--rejet { color: #991B1B; }

.zd-discret { font-size: 11.5px; color: #64748B; }

.zd-puce {
    display: inline-block;
    padding: 2px 9px;
    margin-bottom: 4px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.zd-puce--ia    { background: #EDE9FE; color: #5B21B6; }
.zd-puce--avant { background: #FEF2F2; color: #991B1B; }
.zd-puce--apres { background: #ECFDF5; color: #065F46; }

/* ============================================================
   PANNEAU DE DETAIL
   ============================================================ */

.zd-panneau {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: #54595F;
}
.zd-panneau h2 { margin: 0 0 16px; font-size: 19px; font-weight: 600; color: #1E293B; }
.zd-panneau h3 { margin: 22px 0 10px; font-size: 15px; font-weight: 600; color: #1E293B; }

.zd-bloc__entete {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.zd-bloc__bloc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 13px 15px;
    border: 1px solid #E6EEFC;
    border-radius: 12px;
    background: #F8FAFC;
}
.zd-bloc__valeur { font-size: 25px; font-weight: 700; line-height: 1.15; color: #1E293B; }
.zd-bloc__valeur small { font-size: 13px; font-weight: 500; color: #64748B; }
.zd-bloc__valeur--texte { font-size: 16px; }
.zd-bloc__libelle { font-size: 12px; font-weight: 600; color: #54595F; }

.zd-avis {
    padding: 13px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 13.5px;
    line-height: 1.6;
}
.zd-avis strong { display: block; margin-bottom: 2px; }
.zd-avis p { margin: 7px 0 0; }

.zd-avis--rejet  { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.zd-avis--ia     { background: #F5F3FF; border: 1px solid #DDD6FE; color: #5B21B6; }
.zd-avis--neutre { background: #F8FAFC; border: 1px solid #E6EEFC; color: #54595F; }

.zd-avis .zd-discret { color: inherit; opacity: .75; }

.zd-bloc__bascule { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* ============================================================
   TABLEAU DES CRITERES
   ============================================================ */

.zd-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.zd-tableau th,
.zd-tableau td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid #E6EEFC;
    vertical-align: middle;
}
.zd-tableau thead th {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #64748B;
    background: #F8FAFC;
    border-bottom: 1px solid #CBD5E1;
}
.zd-tableau tbody tr:last-child td { border-bottom: 0; }
.zd-num { text-align: right; }

/* Colonne de numerotation : aussi etroite que possible, chiffres a chasse fixe
   pour que les unites et les dizaines s'alignent en colonne, et grisee — c'est
   un repere pour designer une ligne, pas une donnee du dossier. */
.zd-rang {
    width: 1%;
    white-space: nowrap;
    color: #94A3B8;
    font-variant-numeric: tabular-nums;
}

/* Un critere evalue qui n'a rien rapporte reste affiche, en retrait : savoir
   qu'il a ete pris en compte vaut mieux que de le voir disparaitre. */
.zd-ligne-nulle { opacity: .5; }

.zd-barre-cellule { min-width: 90px; width: 22%; }
.zd-barre {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: #E6EEFC;
    overflow: hidden;
}
.zd-barre span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #2563EB;
}

.zd-bloc__pied {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #E6EEFC;
    font-size: 11.5px;
    color: #64748B;
}

@media (max-width: 640px) {
    /*
     * Colonne repliee sur petit ecran.
     *
     * La regle visait « th:nth-child(2) », donc une POSITION. L'ajout de la
     * colonne de numerotation en tete l'aurait fait masquer « Critère » au lieu
     * de la colonne prevue, sans que rien ne le signale. Elle designe donc
     * maintenant la colonne par une classe, qui la suit ou qu'elle aille.
     *
     * Le comportement est rigoureusement celui d'avant : c'est bien la meme
     * colonne qui disparait.
     */
    .zd-tableau th.zd-col-repliable,
    .zd-tableau td.zd-col-repliable { display: none; }
    .zd-bloc__valeur { font-size: 21px; }
}

/* ============================================================
   COMPARAISON DES DEUX NOTES
   ============================================================
   Le moteur applique des regles, l'IA lit un CV. Les afficher cote a cote
   rend l'ecart lisible d'un coup d'oeil — c'est lui qui renseigne, pas
   chacune des notes prise isolement.
   ------------------------------------------------------------ */

.zd-comparaison {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .6);
}
.zd-comparaison__note {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 62px;
    padding: 6px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #E6EEFC;
}
.zd-comparaison__note--ia { border-color: #DDD6FE; background: #F5F3FF; }
.zd-comparaison__valeur { font-size: 22px; font-weight: 700; line-height: 1.05; color: #1E293B; }
.zd-comparaison__libelle {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: #64748B;
}
.zd-comparaison__lecture {
    flex: 1 1 220px;
    margin: 0 !important;
    font-size: 12.5px;
    line-height: 1.55;
}

@media (max-width: 520px) {
    .zd-comparaison { gap: 10px; }
    .zd-comparaison__lecture { flex-basis: 100%; }
}

/* --- Pieces du dossier et recoupements --- */

.zd-pieces { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.zd-pieces li {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 8px 12px; border: 1px solid #E6EEFC; border-radius: 8px; background: #F8FAFC;
}
.zd-piece__type {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: #3730A3; background: #EEF2FF; padding: 2px 8px; border-radius: 100px; white-space: nowrap;
}
.zd-piece__intitule { font-size: 13.5px; font-weight: 600; color: #1E293B; }

.zd-verdict {
    display: inline-block; padding: 2px 9px; border-radius: 100px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.zd-verdict--ok     { background: #ECFDF5; color: #065F46; }
.zd-verdict--ko     { background: #FEF2F2; color: #991B1B; }
.zd-verdict--neutre { background: #F1F5F9; color: #475569; }

/* Requalification vers le REJET : la puce bleue « IA » se lisait comme une
   bonne nouvelle à côté d'un candidat écarté. Le rouge dit le sens. */
.zd-puce--ia-rejet {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #B91C1C;
}

/* Progression de la réévaluation.
   La barre avance au rythme des candidatures réellement traitées, et le
   journal nomme chacune : sur une offre à cent candidatures l'opération dure
   plusieurs minutes, et sans ce retour rien ne distingue un traitement en
   cours d'un traitement bloqué. */
.zrv__progression { margin: 14px 0 0; }
.zrv__progression[hidden] { display: none; }

.zrv__barre {
    height: 6px;
    background: #E2E8F0;
    border-radius: 999px;
    overflow: hidden;
}
.zrv__barre span {
    display: block;
    height: 100%;
    width: 0;
    background: #2563EB;
    border-radius: 999px;
    transition: width .3s ease;
}
@media (prefers-reduced-motion: reduce) { .zrv__barre span { transition: none; } }

.zrv__compte {
    margin: 8px 0 0;
    font-size: .88rem;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

.zrv__journal {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}
.zrv__ligne {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 12px;
    font-size: .85rem;
    border-bottom: 1px solid #F1F5F9;
}
.zrv__ligne:last-child { border-bottom: 0; }
.zrv__ligne-nom  { font-weight: 500; }
.zrv__ligne-etat { color: #64748B; white-space: nowrap; }
.zrv__ligne--rejete .zrv__ligne-etat { color: #B91C1C; }
.zrv__ligne--erreur { background: #FEF2F2; }
.zrv__ligne--erreur .zrv__ligne-etat { color: #B91C1C; }

/* Exigence du recruteur, sous l'intitulé d'un critère personnalisé.
   Ces critères font parfois dix lignes : on en montre le début, le reste
   se lit dans l'offre. */
.zd-exigence {
    display: block;
    margin-top: 3px;
    font-size: .78rem;
    line-height: 1.45;
    color: #64748B;
    font-style: italic;
}

/* Verdict de l'IA sur un critère personnalisé. */
.zd-verdict {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid;
}
.zd-verdict--ok      { background: #E8F1EC; border-color: #A8CDBA; color: #2C6149; }
.zd-verdict--partiel { background: #FDF6E6; border-color: #E8CE8A; color: #8A6316; }
.zd-verdict--non     { background: #FAEDEB; border-color: #E4B0A8; color: #9E3B2E; }
.zd-verdict--inconnu { background: #F1F5F9; border-color: #CBD5E1; color: #64748B; }

/* La preuve relevée dans le dossier : c'est ce qui permet au recruteur de
   vérifier au lieu de croire. */
.zd-preuve {
    display: block;
    margin-top: 5px;
    padding-left: 9px;
    border-left: 2px solid #CBD5E1;
    font-size: .8rem;
    line-height: 1.5;
    color: #475569;
}