/**
 * ZONEMPLOI - SYSTEME DE DESIGN DES ESPACES CONNECTES
 * ==================================================
 * Base commune aux tableaux de bord recruteur et candidat.
 *
 * Les valeurs proviennent du kit Elementor du site (#33, « Kit par défaut »),
 * pour que ces pages ne jurent pas avec le reste de zonemploi.africa :
 *   - primaire   #2563EB      - accent    #61CE70
 *   - secondaire #54595F      - texte     #7A7A7A
 *   - noir       #272727      - fonds     #F8F8F8 / #EEF1FE / #F2F7FF
 *   - police     Source Sans Pro (600 titres / 400 texte / 500 accent)
 *   - boutons    rayon 100px (pilule)
 *
 * Tout est prefixe .zu- et porte par le conteneur .zu-app, afin de ne jamais
 * entrer en conflit avec les styles d'Elementor, de WooCommerce ou de
 * WP Job Manager, qui cohabitent sur ces pages.
 */

.zu-app {
    /* Couleurs du kit */
    --zu-primaire: #2563EB;
    --zu-primaire-fonce: #1D4ED8;
    --zu-primaire-clair: #EFF6FF;
    --zu-primaire-bordure: #DBEAFE;
    --zu-accent: #61CE70;
    --zu-accent-clair: #ECFDF5;
    --zu-noir: #272727;
    --zu-texte: #54595F;
    --zu-texte-doux: #7A7A7A;
    --zu-fond: #F8F8F8;
    --zu-fond-bleu: #EEF1FE;
    --zu-surface: #FFFFFF;
    --zu-bordure: #E6EEFC;
    --zu-bordure-forte: #CBD5E1;

    /* Statuts */
    --zu-succes: #10B981;
    --zu-succes-clair: #ECFDF5;
    --zu-alerte: #F59E0B;
    --zu-alerte-clair: #FFFBEB;
    --zu-danger: #EF4444;
    --zu-danger-clair: #FEF2F2;
    --zu-info: #2563EB;
    --zu-info-clair: #EFF6FF;
    --zu-neutre: #94A3B8;

    /* Formes */
    --zu-rayon: 14px;
    --zu-rayon-sm: 9px;
    --zu-rayon-pilule: 100px;
    --zu-ombre: 0 1px 2px rgba(16, 24, 40, .04);
    --zu-ombre-md: 0 4px 16px rgba(16, 24, 40, .07);
    --zu-ombre-lg: 0 18px 50px rgba(16, 24, 40, .16);

    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--zu-texte);
    font-size: 15px;
    line-height: 1.6;
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 0 60px;
    box-sizing: border-box;
}

/* Tableau de candidatures : beaucoup de colonnes (contact, score, statut,
   date, actions). On sort du gabarit etroit d'Elementor pour retrouver de
   l'air, sans deborder de l'ecran. */
.zu-app.easyrecrute-candidates-wrap {
    max-width: min(1720px, calc(100vw - 48px));
    width: min(1720px, calc(100vw - 48px));
    margin-left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 1024px) {
    .zu-app.easyrecrute-candidates-wrap {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        transform: none;
    }
}

.zu-app *,
.zu-app *::before,
.zu-app *::after { box-sizing: border-box; }

.zu-app h1, .zu-app h2, .zu-app h3, .zu-app h4 {
    font-family: inherit;
    color: var(--zu-noir);
    font-weight: 600;
    margin: 0;
    line-height: 1.25;
}

/* ============================================================
   EN-TETE DE PAGE
   ============================================================ */

.zu-entete {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding: 26px 28px;
    border-radius: var(--zu-rayon);
    /* Degrade repris des couleurs personnalisees du kit Elementor
       (« gradien 1 » #EFF6FF -> « gradien 2 » #DBEAFE). */
    background: linear-gradient(120deg, #EFF6FF 0%, #F2F7FF 45%, #FFFFFF 100%);
    border: 1px solid var(--zu-primaire-bordure);
    overflow: hidden;
}

/* Motif discret dans l'angle, pour que l'en-tete ne soit pas un aplat mort */
.zu-entete::after {
    content: '';
    position: absolute;
    top: -60px; right: -40px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .09), transparent 70%);
    pointer-events: none;
}

.zu-entete > * { position: relative; z-index: 1; }

.zu-entete__titre {
    font-size: 30px;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.zu-entete__sous-titre {
    margin: 8px 0 0;
    color: var(--zu-texte);
    font-size: 15px;
}
.zu-entete__sous-titre strong { color: var(--zu-noir); font-weight: 700; }

.zu-entete__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.zu-fil {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: var(--zu-texte-doux);
    text-decoration: none;
    margin-bottom: 12px;
    padding: 5px 0;
    transition: color .16s ease, gap .16s ease;
}
.zu-fil:hover { color: var(--zu-primaire); gap: 11px; }

/* ============================================================
   BOUTONS  (rayon 100px, comme le kit Elementor)
   ============================================================ */

.zu-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: var(--zu-rayon-pilule);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    /* Courbe legerement elastique : le mouvement se sent, sans etre bondissant */
    transition: transform .22s cubic-bezier(.34, 1.4, .64, 1),
                box-shadow .22s ease,
                background-color .18s ease,
                border-color .18s ease,
                color .18s ease;
}

/* Voile clair qui se revele au survol : donne de la matiere au bouton sans
   changer sa couleur de fond, donc sans casser la lisibilite du texte. */
.zu-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
    opacity: 0;
    transition: opacity .18s ease;
}
.zu-btn:hover::after { opacity: 1; }

.zu-btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.zu-btn:disabled, .zu-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.zu-btn:disabled:hover::after, .zu-btn[disabled]:hover::after { opacity: 0; }
.zu-btn:focus-visible { outline: 2px solid var(--zu-primaire); outline-offset: 3px; }

.zu-btn--primaire {
    background: var(--zu-primaire);
    color: #fff;
    box-shadow: 0 1px 2px rgba(37, 99, 235, .22);
}
.zu-btn--primaire:hover {
    background: var(--zu-primaire-fonce);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(37, 99, 235, .55);
}

.zu-btn--fantome {
    background: var(--zu-surface);
    color: var(--zu-texte);
    border-color: var(--zu-bordure-forte);
}
.zu-btn--fantome:hover {
    border-color: var(--zu-primaire);
    color: var(--zu-primaire);
    background: var(--zu-primaire-clair);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .4);
}

.zu-btn--doux { background: var(--zu-primaire-clair); color: var(--zu-primaire); }
.zu-btn--doux:hover {
    background: var(--zu-primaire);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .5);
}

.zu-btn--danger { background: var(--zu-danger-clair); color: var(--zu-danger); }
.zu-btn--danger:hover {
    background: var(--zu-danger);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(239, 68, 68, .5);
}

.zu-btn--succes { background: var(--zu-succes); color: #fff; }
.zu-btn--succes:hover {
    background: #059669; color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(16, 185, 129, .55);
}

.zu-btn--sm { padding: 8px 16px; font-size: 13px; }
.zu-btn--icone { padding: 9px; width: 38px; height: 38px; border-radius: 50%; }

/* ------------------------------------------------------------------
   GARANTIE DE CONTRASTE
   ------------------------------------------------------------------
   Ces pages cohabitent avec Elementor, WooCommerce, le theme Hello et
   l'ancienne feuille du plugin, qui posent tous des regles sur a, button et
   .button — parfois en !important. Sans ces declarations, un bouton se
   retrouvait avec un fond bleu ET un texte bleu, ou blanc sur blanc.
   La couleur du texte des boutons est donc verrouillee.
   ------------------------------------------------------------------ */

/* Le FOND doit etre verrouille en meme temps que le texte.
   Le kit Elementor du site declare :

       .elementor-kit-33 button, ... { background-color: #FFFFFF;
                                       color: var(--e-global-color-primary); }

   Ce selecteur vaut (0,1,1) et bat `.zu-btn--primaire` (0,1,0) : le fond bleu
   du bouton etait remplace par du blanc. Comme la regle ci-dessous forcait le
   texte en blanc sans toucher au fond, on obtenait du blanc sur blanc — et
   uniquement sur les <button>, jamais sur les <a>, ce qui rendait le defaut
   difficile a rapprocher de sa cause.

   `.zu-app .zu-btn--primaire` vaut (0,2,0) et passe donc devant sans avoir a
   surenchener ; la variante avec `button.` couvre les rares boutons rendus
   hors du conteneur .zu-app. */

.zu-app a.zu-btn--primaire,
.zu-app button.zu-btn--primaire,
.zu-app input.zu-btn--primaire,
.zu-app .zu-btn--primaire,
.zu-app .zu-btn--primaire:visited,
button.zu-btn--primaire,
input.zu-btn--primaire {
    color: #fff !important;
    background-color: var(--zu-primaire, #2563EB) !important;
    border-color: var(--zu-primaire, #2563EB) !important;
}
.zu-app .zu-btn--primaire:hover,
.zu-app .zu-btn--primaire:focus,
button.zu-btn--primaire:hover,
button.zu-btn--primaire:focus {
    color: #fff !important;
    background-color: var(--zu-primaire-fonce, #1D4ED8) !important;
    border-color: var(--zu-primaire-fonce, #1D4ED8) !important;
}

.zu-app a.zu-btn--succes,
.zu-app button.zu-btn--succes,
.zu-app .zu-btn--succes,
.zu-app .zu-btn--succes:visited,
button.zu-btn--succes {
    color: #fff !important;
    background-color: var(--zu-succes, #10B981) !important;
    border-color: var(--zu-succes, #10B981) !important;
}
.zu-app .zu-btn--succes:hover,
.zu-app .zu-btn--succes:focus,
button.zu-btn--succes:hover,
button.zu-btn--succes:focus {
    color: #fff !important;
    background-color: #059669 !important;
    border-color: #059669 !important;
}

/* Le kit impose aussi `border-color: var(--e-global-color-primary)` a tous les
   <button> : sans reprise explicite, un bouton discret se retrouvait cercle de
   bleu vif. La bordure est donc verrouillee au meme titre que le fond. */

.zu-app a.zu-btn--fantome,
.zu-app button.zu-btn--fantome,
.zu-app .zu-btn--fantome,
.zu-app .zu-btn--fantome:visited,
button.zu-btn--fantome {
    color: var(--zu-texte) !important;
    background-color: var(--zu-surface, #fff) !important;
    border-color: var(--zu-bordure-forte, #CBD5E1) !important;
}
.zu-app .zu-btn--fantome:hover,
.zu-app .zu-btn--fantome:focus,
button.zu-btn--fantome:hover,
button.zu-btn--fantome:focus {
    color: var(--zu-primaire) !important;
    background-color: var(--zu-primaire-clair, #EFF6FF) !important;
    border-color: var(--zu-primaire, #2563EB) !important;
}

.zu-app a.zu-btn--doux,
.zu-app button.zu-btn--doux,
.zu-app .zu-btn--doux,
.zu-app .zu-btn--doux:visited,
button.zu-btn--doux {
    color: var(--zu-primaire) !important;
    background-color: var(--zu-primaire-clair, #EFF6FF) !important;
    border-color: transparent !important;
}
.zu-app .zu-btn--doux:hover,
.zu-app .zu-btn--doux:focus,
button.zu-btn--doux:hover,
button.zu-btn--doux:focus {
    color: #fff !important;
    background-color: var(--zu-primaire, #2563EB) !important;
    border-color: var(--zu-primaire, #2563EB) !important;
}

.zu-app .zu-btn--danger,
button.zu-btn--danger {
    color: var(--zu-danger) !important;
    background-color: var(--zu-danger-clair, #FEF2F2) !important;
    border-color: transparent !important;
}
.zu-app .zu-btn--danger:hover,
button.zu-btn--danger:hover {
    color: #fff !important;
    background-color: var(--zu-danger, #EF4444) !important;
    border-color: var(--zu-danger, #EF4444) !important;
}

/* L'ancienne feuille forcait un fond bleu sur ces boutons : on rend la main
   au systeme de design, sinon « Voir le CV » sortait bleu sur bleu. */
.zu-app .easyrecrute-view-cv,
.zu-app .easyrecrute-view-letter,
.zu-app .easyrecrute-note-internal { background-image: none; }

/* Les tuiles servant de filtre restent lisibles au survol et une fois
   selectionnees : seuls la bordure et le halo changent, jamais le fond. */
.zu-app button.zu-tuile,
.zu-app button.zu-tuile:hover,
.zu-app button.zu-tuile:focus,
.zu-app button.zu-tuile.active {
    background: var(--zu-surface) !important;
    color: var(--zu-texte) !important;
}
.zu-app button.zu-tuile.active {
    border-color: var(--zu-tuile-teinte);
    box-shadow: 0 0 0 3px rgba(var(--zu-tuile-halo), .18);
}
.zu-app button.zu-tuile.active .selection-indicator { display: block !important; }
.zu-app button.zu-tuile .zu-tuile__valeur { color: var(--zu-noir); }
.zu-app button.zu-tuile--succes .zu-tuile__valeur { color: var(--zu-succes); }
.zu-app button.zu-tuile--alerte .zu-tuile__valeur { color: #B45309; }
.zu-app button.zu-tuile--danger .zu-tuile__valeur { color: var(--zu-danger); }

/* Respecte le reglage systeme "reduire les animations" */
@media (prefers-reduced-motion: reduce) {
    .zu-btn, .zu-tuile, .zu-tableau tbody tr, .zu-carte { transition: none !important; }
    .zu-btn:hover, .zu-tuile:hover { transform: none !important; }
}

/* ============================================================
   CARTES ET SECTIONS
   ============================================================ */

.zu-carte {
    background: var(--zu-surface);
    border: 1px solid var(--zu-bordure);
    border-radius: var(--zu-rayon);
    box-shadow: var(--zu-ombre);
}

.zu-carte__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-bottom: 1px solid var(--zu-bordure);
}

.zu-carte__titre { font-size: 17px; }
.zu-carte__corps { padding: 20px; }

/* ============================================================
   TUILES D'INDICATEURS
   ============================================================ */

.zu-tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.zu-tuile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px 22px 18px;
    background: var(--zu-surface);
    border: 1px solid var(--zu-bordure);
    border-radius: var(--zu-rayon);
    box-shadow: var(--zu-ombre);
    text-decoration: none;
    overflow: hidden;
    /* La teinte du filet superieur est reprise par le halo au survol : une
       seule variable a changer par variante. */
    --zu-tuile-teinte: var(--zu-primaire);
    --zu-tuile-halo: 37, 99, 235;
    transition: border-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.34, 1.2, .64, 1);
}

/* Filet de couleur en haut, qui s'epaissit au survol */
.zu-tuile::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--zu-tuile-teinte);
    transition: height .25s ease;
}

/* Voile diffus dans l'angle : donne du volume sans alourdir */
.zu-tuile::after {
    content: '';
    position: absolute;
    top: -40%; right: -25%;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--zu-tuile-halo), .10), transparent 68%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.zu-tuile:hover::before { height: 5px; }
.zu-tuile:hover::after { opacity: 1; }

a.zu-tuile:hover,
button.zu-tuile:hover {
    border-color: rgba(var(--zu-tuile-halo), .35);
    box-shadow: 0 14px 30px -12px rgba(var(--zu-tuile-halo), .38);
    transform: translateY(-3px);
}
button.zu-tuile { border-width: 1px; }
button.zu-tuile[aria-pressed="true"] {
    border-color: var(--zu-tuile-teinte);
    box-shadow: 0 0 0 3px rgba(var(--zu-tuile-halo), .16);
}

.zu-tuile__valeur {
    font-size: 32px;
    font-weight: 700;
    color: var(--zu-noir);
    line-height: 1.02;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.zu-tuile__libelle { font-size: 13px; color: var(--zu-texte-doux); font-weight: 500; }
.zu-tuile__note { font-size: 12px; font-weight: 600; margin-top: 2px; }

.zu-tuile--succes { --zu-tuile-teinte: var(--zu-succes); --zu-tuile-halo: 16, 185, 129; }
.zu-tuile--succes .zu-tuile__valeur { color: var(--zu-succes); }
.zu-tuile--alerte { --zu-tuile-teinte: var(--zu-alerte); --zu-tuile-halo: 245, 158, 11; }
.zu-tuile--alerte .zu-tuile__valeur { color: #B45309; }
.zu-tuile--alerte .zu-tuile__note { color: #9A3412; }
.zu-tuile--danger { --zu-tuile-teinte: var(--zu-danger); --zu-tuile-halo: 239, 68, 68; }
.zu-tuile--danger .zu-tuile__valeur { color: var(--zu-danger); }
.zu-tuile--danger .zu-tuile__note { color: #991B1B; }
.zu-tuile--neutre { --zu-tuile-teinte: var(--zu-neutre); --zu-tuile-halo: 148, 163, 184; }

/* ============================================================
   BARRE D'OUTILS ET CHAMPS
   ============================================================ */

.zu-outils {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--zu-surface);
    border: 1px solid var(--zu-bordure);
    border-radius: var(--zu-rayon);
    box-shadow: var(--zu-ombre);
    margin-bottom: 16px;
}

.zu-champ, .zu-select {
    padding: 10px 16px;
    border: 1px solid var(--zu-bordure-forte);
    border-radius: var(--zu-rayon-pilule);
    font-family: inherit;
    font-size: 14px;
    color: var(--zu-texte);
    background: var(--zu-surface);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.zu-champ:hover, .zu-select:hover { border-color: var(--zu-primaire); }
.zu-champ:focus, .zu-select:focus {
    outline: none;
    border-color: var(--zu-primaire);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .13);
}
.zu-champ::placeholder { color: #A8B3C4; }

/* Chevron dessine plutot que la fleche native, pour un rendu identique
   sur tous les navigateurs */
.zu-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A7A7A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.zu-recherche { flex: 1; min-width: 220px; }
.zu-outils__droite { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   ETIQUETTES
   ============================================================ */

.zu-etiq {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: var(--zu-rayon-pilule);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.zu-etiq--succes { background: var(--zu-succes-clair); color: #065F46; }
.zu-etiq--alerte { background: var(--zu-alerte-clair); color: #9A3412; }
.zu-etiq--danger { background: var(--zu-danger-clair); color: #991B1B; }
.zu-etiq--info   { background: var(--zu-info-clair); color: #1E40AF; }
.zu-etiq--neutre { background: var(--zu-fond); color: var(--zu-texte); }
.zu-etiq--violet { background: #EDE9FE; color: #5B21B6; }

.zu-point { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* ============================================================
   TABLEAU
   ============================================================ */

.zu-tableau { width: 100%; border-collapse: collapse; font-size: 14px; }

.zu-tableau thead th {
    text-align: left;
    padding: 13px 16px;
    background: var(--zu-fond);
    color: var(--zu-texte-doux);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--zu-bordure);
    white-space: nowrap;
}
.zu-tableau thead th:first-child { border-top-left-radius: var(--zu-rayon); }
.zu-tableau thead th:last-child { border-top-right-radius: var(--zu-rayon); }
.zu-tableau thead th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.zu-tableau thead th a:hover { color: var(--zu-primaire); }

.zu-tableau tbody td { padding: 16px; border-bottom: 1px solid var(--zu-bordure); vertical-align: middle; }
.zu-tableau tbody tr:last-child td { border-bottom: 0; }

/* Survol de ligne : fond tres leger + liseré bleu a gauche, pose en
   box-shadow interne pour ne pas decaler le contenu d'un pixel. */
.zu-tableau tbody tr {
    transition: background-color .16s ease, box-shadow .16s ease;
}
.zu-tableau tbody tr:hover {
    background: linear-gradient(90deg, var(--zu-primaire-clair), rgba(239, 246, 255, .35));
    box-shadow: inset 3px 0 0 var(--zu-primaire);
}
.zu-tableau tbody tr:hover .zu-titre-cellule { color: var(--zu-primaire); }

/* Les actions d'une ligne n'apparaissent pleinement qu'au survol, pour alleger
   la lecture quand on parcourt la liste. Toujours visibles au clavier et sur
   les ecrans tactiles, ou il n'y a pas de survol. */
@media (hover: hover) and (min-width: 861px) {
    .zu-tableau tbody td .zu-btn--fantome { opacity: .6; transition: opacity .16s ease, transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
    .zu-tableau tbody tr:hover .zu-btn--fantome,
    .zu-tableau tbody td .zu-btn--fantome:focus-visible { opacity: 1; }
}

.zu-num { text-align: right; }
.zu-titre-cellule { font-weight: 600; color: var(--zu-noir); text-decoration: none; }
.zu-titre-cellule:hover { color: var(--zu-primaire); }
.zu-meta { font-size: 12.5px; color: var(--zu-texte-doux); margin-top: 3px; }

/* ============================================================
   ETAT VIDE
   ============================================================ */

.zu-vide { padding: 56px 24px; text-align: center; }
.zu-vide__icone { font-size: 42px; line-height: 1; margin-bottom: 12px; opacity: .35; }
.zu-vide__titre { font-size: 18px; margin-bottom: 6px; }
.zu-vide__texte { color: var(--zu-texte-doux); margin: 0 auto 18px; max-width: 440px; }

/* ============================================================
   MENU D'ACTIONS
   ============================================================ */

.zu-menu { position: relative; display: inline-block; }

.zu-menu__declencheur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--zu-bordure);
    background: var(--zu-surface);
    color: var(--zu-texte-doux);
    cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
.zu-menu__declencheur:hover,
.zu-menu__declencheur[aria-expanded="true"] { background: var(--zu-primaire); border-color: var(--zu-primaire); color: #fff; }

/* La liste est masquee tant qu'elle est rangee dans la fiche. Elle n'apparait
   qu'une fois deplacee dans la fenetre d'actions — voir job-dashboard.php, qui
   deplace le bloc plutot que de le recopier, pour ne pas dupliquer les
   formulaires POST et leurs nonces. */
.zu-menu__liste { display: none; }
.zu-modale__corps > .zu-menu__liste { display: grid; gap: 4px; }

/* Les actions qui modifient une offre sont des formulaires POST (voir le
   garde-fou dans job-dashboard.php) : le formulaire ne doit pas rompre
   l'alignement vertical du menu. */
.zu-menu__form { margin: 0; padding: 0; display: block; }

/* Les actions de consultation sont des <a>, celles qui modifient l'offre sont
   des <button> dans un formulaire POST. Le kit Elementor ne stylise que les
   <button> — `border-style: solid` et `border-color: primary`, en (0,1,1) —
   d'ou une bordure bleue sur « Marquer comme pourvue », « Dupliquer » et
   « Supprimer », et rien sur les autres. Les deux selecteurs ci-dessous
   passent devant : `.zu-app .zu-menu__item` vaut (0,2,0) pour le cas normal,
   `button.zu-menu__item` (0,1,1) couvre un rendu hors conteneur. */
.zu-app .zu-menu__item,
button.zu-menu__item,
a.zu-menu__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--zu-texte);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .14s ease, color .14s ease, padding-left .14s ease;
}
.zu-app .zu-menu__item:hover,
.zu-app .zu-menu__item:focus-visible,
button.zu-menu__item:hover,
button.zu-menu__item:focus,
a.zu-menu__item:hover,
a.zu-menu__item:focus {
    background: var(--zu-primaire-clair);
    color: var(--zu-primaire);
    padding-left: 15px;
    text-decoration: none;
    border: 0;
    box-shadow: none;
}
.zu-app .zu-menu__item--danger,
button.zu-menu__item--danger { color: #B91C1C; }
.zu-app .zu-menu__item--danger:hover,
.zu-app .zu-menu__item--danger:focus-visible,
button.zu-menu__item--danger:hover,
button.zu-menu__item--danger:focus { background: var(--zu-danger-clair); color: var(--zu-danger); }

/* --- Fenetre des actions --- */

/* Un menu contextuel tenait sur 210 px ; une fenetre a la place du pointeur a
   besoin d'air, mais pas de 940 px pour huit lignes de texte. */
.zu-modale--actions .zu-modale__boite {
    max-width: 460px;

    /* Centrage vertical.
       .zu-modale aligne ses boites en flex-start, ce qui convient aux fenetres
       longues — le CV, le detail d'une decision — qui doivent commencer en haut
       et defiler. Celle des actions tient en huit lignes : collee au bord
       superieur, elle paraissait perdue.

       Des marges automatiques plutot qu'align-items: center : elles absorbent
       l'espace libre quand il y en a, et se replient a zero quand il n'y en a
       plus. Un centrage par align-items, lui, rogne le haut d'une fenetre plus
       grande que l'ecran, et les premieres actions deviendraient inatteignables
       sur un petit ecran. */
    margin-top: auto;
    margin-bottom: auto;
}
.zu-modale--actions .zu-modale__corps { padding: 12px; }

.zu-modale__surtitre {
    margin: 0 0 3px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--zu-texte-doux);
}
.zu-modale__titre {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--zu-noir);
}

/* Dans la fenetre, chaque action devient une ligne pleine largeur, assez haute
   pour etre visee sans hesitation — y compris au doigt. */
.zu-modale--actions .zu-menu__item {
    padding: 13px 14px;
    font-size: 14.5px;
    border-radius: var(--zu-rayon-sm);
}
.zu-modale--actions .zu-menu__item:hover,
.zu-modale--actions .zu-menu__item:focus-visible { padding-left: 18px; }

/* L'action destructrice est separee du reste : on ne clique pas
   « Supprimer » en visant « Dupliquer ». */
.zu-modale--actions .zu-menu__form:has(.zu-menu__item--danger) {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--zu-bordure);
}

/* ============================================================
   PAGINATION
   ============================================================ */

.zu-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 4px 0;
    font-size: 14px;
    color: var(--zu-texte-doux);
}
.zu-pagination__liens { display: flex; gap: 6px; align-items: center; }
.zu-pagination__liens a,
.zu-pagination__liens span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 11px;
    border-radius: var(--zu-rayon-pilule);
    border: 1px solid var(--zu-bordure);
    color: var(--zu-texte);
    text-decoration: none;
    font-size: 14px;
}
.zu-pagination__liens a:hover { border-color: var(--zu-primaire); color: var(--zu-primaire); }
.zu-pagination__liens .est-actif { background: var(--zu-primaire); border-color: var(--zu-primaire); color: #fff; font-weight: 600; }

/* Pagination native de WP Job Manager (template pagination.php), rhabillee */
.zu-pagination__liens .job-manager-pagination { margin: 0; }
.zu-pagination__liens .job-manager-pagination ul,
.zu-pagination__liens .page-numbers {
    display: flex; gap: 6px; align-items: center;
    list-style: none; margin: 0; padding: 0; border: 0;
}
.zu-pagination__liens .page-numbers li { margin: 0; border: 0; }
.zu-pagination__liens .page-numbers li .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 11px;
    border-radius: var(--zu-rayon-pilule);
    border: 1px solid var(--zu-bordure);
    color: var(--zu-texte);
    text-decoration: none;
    font-size: 14px;
    background: var(--zu-surface);
}
.zu-pagination__liens .page-numbers li a.page-numbers:hover { border-color: var(--zu-primaire); color: var(--zu-primaire); }
.zu-pagination__liens .page-numbers li .page-numbers.current {
    background: var(--zu-primaire); border-color: var(--zu-primaire); color: #fff; font-weight: 600;
}

/* ============================================================
   MODALE
   ============================================================ */

.zu-modale {
    position: fixed; inset: 0; z-index: 99999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 16px;
    overflow-y: auto;
    background: rgba(39, 39, 39, .55);
    backdrop-filter: blur(3px);
}
.zu-modale.est-ouvert { display: flex; }

.zu-modale__boite {
    position: relative;
    background: var(--zu-surface);
    border-radius: var(--zu-rayon);
    width: 100%;
    max-width: 940px;
    box-shadow: var(--zu-ombre-lg);
    animation: zu-apparition .18s ease-out;
}
@keyframes zu-apparition { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.zu-modale__entete {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 22px; border-bottom: 1px solid var(--zu-bordure);
}
.zu-modale__corps { padding: 22px; max-height: 72vh; overflow-y: auto; }
.zu-modale__pied { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--zu-bordure); }

.zu-modale__fermer {
    background: none; border: 0; font-size: 26px; line-height: 1;
    color: var(--zu-neutre); cursor: pointer; padding: 0 4px;
}
.zu-modale__fermer:hover { color: var(--zu-noir); }

/* ============================================================
   DIVERS
   ============================================================ */

.zu-chargement { text-align: center; padding: 40px 0; color: var(--zu-texte-doux); }

.zu-spinner {
    display: inline-block; width: 34px; height: 34px;
    border: 3px solid var(--zu-bordure);
    border-top-color: var(--zu-primaire);
    border-radius: 50%;
    animation: zu-rotation .8s linear infinite;
}
@keyframes zu-rotation { to { transform: rotate(360deg); } }

.zu-alerte {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 16px; border-radius: var(--zu-rayon-sm);
    font-size: 14px; margin-bottom: 16px;
}
.zu-alerte--info { background: var(--zu-info-clair); border: 1px solid var(--zu-primaire-bordure); color: #1E40AF; }
.zu-alerte--alerte { background: var(--zu-alerte-clair); border: 1px solid #FED7AA; color: #9A3412; }
.zu-alerte--danger { background: var(--zu-danger-clair); border: 1px solid #FECACA; color: #991B1B; }
.zu-alerte--succes { background: var(--zu-succes-clair); border: 1px solid #A7F3D0; color: #065F46; }

.zu-barre { height: 6px; border-radius: 999px; background: var(--zu-bordure); overflow: hidden; }
.zu-barre span { display: block; height: 100%; border-radius: 999px; background: var(--zu-primaire); transition: width .3s; }

.zu-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

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

@media (max-width: 1024px) {
    .zu-app { padding-left: 14px; padding-right: 14px; }
    .zu-entete__titre { font-size: 24px; }
}

@media (max-width: 860px) {
    .zu-outils { flex-direction: column; align-items: stretch; }
    .zu-outils__droite { margin-left: 0; }
    .zu-recherche { min-width: 0; }
    .zu-champ, .zu-select, .zu-btn { width: 100%; }
    .zu-outils__droite .zu-btn { width: auto; flex: 1; }

    /* Le tableau devient une pile de cartes */
    .zu-tableau, .zu-tableau tbody, .zu-tableau tr, .zu-tableau td { display: block; width: 100%; }
    .zu-tableau thead { display: none; }
    .zu-tableau tbody tr {
        background: var(--zu-surface);
        border: 1px solid var(--zu-bordure);
        border-radius: var(--zu-rayon);
        margin-bottom: 12px;
        padding: 6px 0;
        box-shadow: var(--zu-ombre);
    }
    .zu-tableau tbody tr:hover { background: var(--zu-surface); }
    .zu-tableau tbody td { border-bottom: 0; padding: 9px 16px; display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
    .zu-tableau tbody td::before {
        content: attr(data-libelle);
        font-size: 12px; font-weight: 600; color: var(--zu-texte-doux);
        text-transform: uppercase; letter-spacing: .03em;
        flex: 0 0 40%;
    }
    .zu-tableau tbody td > * { text-align: right; margin-left: auto; }
    .zu-tableau tbody td.zu-cellule-pleine { display: block; }
    .zu-tableau tbody td.zu-cellule-pleine::before { display: block; margin-bottom: 5px; }
    .zu-tableau tbody td.zu-cellule-pleine > * { text-align: left; margin-left: 0; }
    .zu-num { text-align: left; }
}

@media print {
    .zu-outils, .zu-entete__actions, .zu-menu, .zu-pagination, .zu-modale { display: none !important; }
    .zu-app { max-width: none; padding: 0; }
    .zu-carte, .zu-tuile { box-shadow: none; break-inside: avoid; }
}

/* ============================================================
   LISTE EN FICHES
   ============================================================
   Remplace le tableau pour lister les offres et les candidatures.

   Un tableau impose la meme grille a toutes les lignes : la colonne la plus
   large gagne, et toutes les autres trainent son vide. Une fiche s'organise
   en trois zones — identite a gauche, chiffres au centre, actions a droite —
   et ne prend que la place dont elle a besoin.
   ------------------------------------------------------------ */

.zu-liste { display: flex; flex-direction: column; gap: 8px; }

.zu-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    padding: 13px 16px 13px 18px;
    background: var(--zu-surface);
    border: 1px solid var(--zu-bordure);
    border-radius: var(--zu-rayon);
    box-shadow: var(--zu-ombre);
    transition: border-color .18s ease, box-shadow .22s ease, transform .22s ease;
}
.zu-item:hover {
    border-color: var(--zu-primaire-bordure);
    box-shadow: var(--zu-ombre-md);
    transform: translateY(-1px);
}

/* Filet de couleur qui rappelle le statut, sans ajouter de colonne. */
.zu-item::before {
    content: '';
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--zu-neutre);
}
.zu-item--succes::before { background: var(--zu-succes); }
.zu-item--alerte::before { background: var(--zu-alerte); }
.zu-item--danger::before { background: var(--zu-danger); }
.zu-item--info::before   { background: var(--zu-info); }
.zu-item--violet::before { background: #7C3AED; }

.zu-item__identite { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.zu-item__titre-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.zu-item__titre {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--zu-noir);
    text-decoration: none;
    /* Un titre long ne doit ni pousser les chiffres hors de la fiche, ni
       s'etaler sur trois lignes : il se coupe proprement. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.zu-item__titre:hover { color: var(--zu-primaire); text-decoration: underline; }

.zu-item__meta { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--zu-texte-doux); }
.zu-item__restaurer { margin-top: 6px; }

/* --- Chiffres --- */

.zu-item__chiffres { display: flex; align-items: center; gap: 10px; }

.zu-chiffre {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 104px;
    padding: 7px 12px;
    border-radius: var(--zu-rayon);
    background: var(--zu-fond);
    text-decoration: none;
    text-align: center;
    transition: background-color .16s ease, color .16s ease;
}
.zu-chiffre--lien:hover { background: var(--zu-primaire-clair); }
.zu-chiffre--lien:hover .zu-chiffre__valeur { color: var(--zu-primaire); }
.zu-chiffre--muet { background: transparent; }

.zu-chiffre__valeur { font-size: 19px; font-weight: 700; line-height: 1.1; color: var(--zu-noir); }
.zu-chiffre__valeur--texte { font-size: 13.5px; font-weight: 600; }
.zu-chiffre__libelle { font-size: 11.5px; line-height: 1.3; color: var(--zu-texte-doux); }

.zu-etiq--xs { padding: 1px 7px; font-size: 10.5px; }

.zu-item__actions { display: flex; align-items: center; justify-content: flex-end; }

@media (max-width: 900px) {
    .zu-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        padding: 14px;
    }
    .zu-item__chiffres {
        grid-column: 1 / -1;
        justify-content: flex-start;
        border-top: 1px solid var(--zu-bordure);
        padding-top: 10px;
    }
    .zu-item__titre { white-space: normal; }
}

/* ============================================================
   DENSITE
   ============================================================
   Les ecrans de gestion se lisent en balayant : plus il y a de lignes
   visibles sans defiler, plus ils sont utiles. Ces valeurs resserrent
   l'en-tete, les tuiles et la barre d'outils sans rien retirer.
   ------------------------------------------------------------ */

.zu-app { padding-top: 14px; padding-bottom: 14px; }

.zu-entete { margin-bottom: 16px; padding: 18px 22px; }
.zu-entete__titre { font-size: 25px; }
.zu-entete__sous-titre { font-size: 14px; }

.zu-tuiles { gap: 10px; margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.zu-tuile { padding: 13px 15px 12px; gap: 2px; }
.zu-tuile__valeur { font-size: 26px; }
.zu-tuile__libelle { font-size: 12.5px; }

.zu-outils { padding: 10px 12px; margin-bottom: 12px; gap: 8px; }

.zu-alerte { padding: 11px 14px; margin-bottom: 12px; }

.zu-carte { margin-bottom: 12px; }

.zu-pagination { margin-top: 14px; }