.card .btn.dropdown-toggle#dropdownMenuLink2{
    background-color: #198754;
}

.card-body .newTableAll tr td{
    font-weight:400;
}
.label.label-inline {
    font-weight: bold;
}
.label-recr {
    font-size : 10px;
}

/* Navigation wizard*/

.body-wizard.recruitement-wizard {
    background-color: var(--bkg-color1);
}

.wizard-round.pending-step .wizard-number, .label.label-inline.pending-step{
    color: var(--txt-color3);
}
.wizard-round.validated-step .wizard-number, .label.label-inline.validated-step{
    color: var(--txt-color28);
}
.wizard-round.sent-step .wizard-number, .label.label-inline.sent-step{
    color: var(--txt-color29);
}
.wizard-round.rejected-step .wizard-number, .label.label-inline.rejected-step{
    color: var(--txt-color6);
}

.wizard-round.pending-step, .wizard-one-step.selected-step, .label.label-inline.pending-step {
    background-color: var(--bkg-color12);
}
.wizard-round.validated-step, .label.label-inline.validated-step {
    background-color: var(--bkg-color61);
}
.wizard-round.rejected-step, .label.label-inline.rejected-step {
    background-color: var(--bkg-color60);
}
.wizard-round.sent-step, .label.label-inline.sent-step {
    background-color: var(--bkg-color77);
}
.wizard-one-step.selected-step {
    border-radius: 0.42rem; 
}
.wizard-one-step.selected-step .step-sub-title {
    color: var(--txt-color3);
}
.wizard-left div a::hover {
    text-decoration: none;
}
.wizard-big-text {
    font-weight: bold;
    font-size: 18.4px;
}
.wizard-right > *, .wizard-left > * {
    text-align: left;
}

.wizard .wizard-left a:hover{
    text-decoration: none;
}

.false-input {
    width: 100%;
    background-color: var(--bkg-color1);
    font-weight: 400;
    line-height: 1.5;
    font-size: 1rem;
    height: auto;
    padding: 10px;
    box-shadow: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.wizard input.timepicker {
    height: 36px;
    border: 0;
}
/* Propositions de rendez-vous : `size=10` / `size=5` ne compensent pas le
   padding du thème — les placeholders sortaient rognés (« DD.MM.YYY »,
   « HH:MN »), donc illisibles pour un champ qui attend un format précis. */
.wizard input.datepicker {
    min-width: 8.5rem;
}
.wizard input.timepicker {
    min-width: 5.5rem;
}

/* Autocomplétion adresses */
.addresses-dropdown {
    position: relative;
    display: inline-block;
    min-width: 150px;
}
.addresses-dropdown #addresses {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 1;
    background-color: #f3f6f9;
}
.addresses-dropdown #addresses a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: black;
}
.addresses-dropdown #addresses a:hover {
    background-color: #e4e6ef; cursor: pointer;
}
.addresses-dropdown #address:focus + #addresses, .addresses-dropdown:hover #addresses {
    display: block;
}

/*Dropzone*/
#dropzone.dropzone{
    min-height:auto;
    padding:0;
}
#dropzone .dz-preview, #dropzone .dz-details{
    height: 70px;
    width: 70px;
    padding: 2px;
}
#dropzone .dz-preview{
    margin:0;
}
#dropzone .dz-image{
    height: 70px;
    width: 70px;
}
#dropzone .dz-size, #dropzone .dz-filename{
    font-size: small;
}

/* Volet échange avec les responsables */
#div_resp_chat_lateral, #div_recap_lateral{
    position:fixed;
    display:none;
    top:0%;
    right:0%;
    z-index:1049;
    height:100%;
}
#div_resp_chat_lateral h6:first-child, #div_recap_lateral h6:first-child{
    text-align: left;
    margin-left:3%;
}
#div_recap_lateral .collapse-menu2 {
    position: fixed;
    bottom: 0px;
    background: var(--bkg-color1);
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: var(--txt-color10);
    cursor: pointer;
    border-right: 1px var(--bor-color17) solid;
    text-align: left;
    padding-left: 12px;
}
#div_resp_chat_lateral nav, #div_recap_lateral nav, #div_recap_lateral .collapse-menu2{
    width: 300px;
}
#div_resp_chat_lateral .send-msg{
    display: none;
}
#div_resp_chat_lateral nav .div-scroll, #div_recap_lateral nav .div-scroll{
    padding-top:23%;
}
.navtop-hover-keep {
    border-radius: 5px;
    text-decoration: none;
    color: var(--txt-color11);
    font-size: 18px;
}
#a_resp_chat.size_animation:not(.navtop-hover-keep), .unread-message-icon, .wizard-round.sent-step.shake-step, .label.label-inline.shake-step {
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    -moz-animation: shakeme 3s infinite;
    -o-animation: shakeme 3s infinite;
    -webkit-animation: shakeme 3s infinite;
    animation: shakeme 3s infinite;
}
.label.label-inline.shake-step {
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    -moz-animation: shakeme2 3s infinite;
    -o-animation: shakeme2 3s infinite;
    -webkit-animation: shakeme2 3s infinite;
    animation: shakeme2 3s infinite;
}
#a_resp_chat.size_animation:hover {
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
}
.navbar-lateral-panel {
    height: 100%;
    box-shadow: 0px 0px 28px 0px var(--sha-color4);  
}

@media (max-width: 920px) {
    .navbar-lateral-panel.pdevice {
      height: 100%;
      /* width: 285px; */
      overflow-x: hidden;
      overflow-y: auto;
      left: -270px;
    }
}
/* @media (max-width: 769px) {
    .navbar-lateral-panel {
      margin-left: 0px;
    }
}
@media (min-width: 992px) {
    .navbar-lateral-panel {
      width: 220px;
    }
} */
@keyframes shakeme {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
    5% {
        -webkit-transform: scale(0.7);
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        -o-transform: scale(0.7);
    }
    10% {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
    }
    15% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
    }
    20% {
        -webkit-transform: scale(1.65);
        -moz-transform: scale(1.65);
        -ms-transform: scale(1.65);
        -o-transform: scale(1.65);
        color: var(--txt-color11);
      
    }
    30% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
    }
}
@keyframes shakeme2 {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
    5% {
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
    }
    10% {
        -webkit-transform: scale(1.15);
        -moz-transform: scale(1.15);
        -ms-transform: scale(1.15);
        -o-transform: scale(1.15);
    }
    15% {
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
    }
    20% {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
      
    }
    30% {
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
    }
}
.seen {
    background-color: var(--bkg-color28);
}
i.fa.fa-check.seen.check-header, i.fa.fa-check.not-seen.check-header {
    font-size: 20px;
}
a#link-check{
    border:none !important;
    box-shadow: none !important;
}

/*Vue liste*/
.stats-container{
    width:220px;
    min-width:150px;
}
.stats-container .text-left{
    height:unset;
    width:unset;
}
.stats-container .counter{
    font-size:32px;
    line-height:1;
}
.stats-wrapper .stats-container:first-child{
    border-radius:10px 0px 0px 10px;
    -webkit-border-radius:10px 0px 0px 10px;
    -moz-border-radius:10px 0px 0px 10px;
    -ms-border-radius:10px 0px 0px 10px;
    -o-border-radius:10px 0px 0px 10px;
}
.stats-wrapper .stats-container:last-child{
    border-radius:0px 10px 10px 0px;
    -webkit-border-radius:0px 10px 10px 0px;
    -moz-border-radius:0px 10px 10px 0px;
    -ms-border-radius:0px 10px 10px 0px;
    -o-border-radius:0px 10px 10px 0px;
}
.stats-blue, .stats-orange, .stats-green{
    border-radius: .42rem;
    padding: 15px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stats-blue{
    background-color: var(--bkg-color33);
}
.stats-blue .counter, .stats-blue i.fa, .stats-blue .stats-title{
    color: var(--txt-color24) !important;
}
.stats-orange{
    background-color: var(--bkg-color77);
}
.stats-orange .counter, .stats-orange i.fa, .stats-orange .stats-title{
    color: var(--txt-color29) !important;
}
.stats-green{
    background-color: var(--bkg-color61);
    color: var(--txt-color28) !important;
}
.stats-green .counter, .stats-green i.fa, .stats-green .stats-title{
    color: var(--txt-color28) !important;
}
.modal-header h5.modal-title{
    width: 100%;
}

/* Vue pipeline
   Les colonnes étaient figées à 600 px de haut : avec 1 à 3 candidats, chaque
   colonne affichait ~400 px de blanc. Elles s'alignent désormais sur la plus
   haute (align-items:stretch du flex) avec un plancher modeste. */
#flow-view > .row {
    width: 100%;
    flex-wrap: unset;
    overflow-x: auto;
    align-items: stretch;
    padding-bottom: 6px;
    /* Espacement entre colonnes par `gap` et non par une marge sur chaque
       colonne : une marge s'applique aussi aux extrémités et décalait le bord
       gauche du tableau par rapport à la barre d'onglets et aux filtres. */
    gap: 1rem;
    /* Annule les gouttières négatives de .row, qui feraient dépasser la
       première colonne à gauche du bloc. */
    margin-left: 0;
    margin-right: 0;
}
#flow-view .row .col {
    width:300px;
    min-width:300px;
    max-width:300px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
}
#flow-view a#card-link:hover{
    text-decoration: none;
}

/* --- En-tête de colonne : ordre + libellé + compteur sur une seule ligne ---
   Le `.graycard.card-title` global impose height:120px, d'où le trou entre le
   titre et la première carte. On ne réutilise plus card-title ici. */
.eb-pipe-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .5rem .7rem;
    border-bottom: 1px solid var(--bor-color12, #e2e8f0);
    margin-bottom: .6rem;
}
.eb-pipe-step {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bkg-color12, #eef2f7);
    color: var(--txt-color3, #64748b);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.eb-pipe-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.eb-pipe-count {
    flex: 0 0 auto;
    /* Le `.badge` du socle vaut #222 en thème sombre, soit la couleur du fond
       de colonne : la pastille disparaissait. Teinte de l'accent, lisible sur
       fond clair comme sur fond sombre. */
    background: color-mix(in srgb, var(--txt-color26, #2563eb) 16%, transparent);
    color: var(--txt-color26, #2563eb);
    font-weight: 700;
}
.eb-pipe-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0 .25rem .5rem;
    /* Zone de dépôt utilisable même quand la colonne est vide. */
    min-height: 90px;
}
.eb-pipe-empty {
    margin: auto 0;
    text-align: center;
    color: var(--txt-color3, #94a3b8);
    font-size: .8rem;
}

/* --- Carte candidat --- */
.eb-pipe-card {
    position: relative;
    background-color: var(--bkg-color108);
    border: 1px solid var(--bor-color12, #e2e8f0);
    /* padding-right réservé à la poignée : sans lui, le nom passerait dessous
       et l'alignement du texte varierait d'une carte à l'autre. */
    padding: .55rem 1.6rem .55rem .65rem;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.eb-pipe-card:hover {
    border-color: var(--txt-color26, #2563eb);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* --- Poignée de glisser-déposer --- */
.eb-pipe-grip {
    position: absolute;
    top: .35rem;
    right: .2rem;
    width: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .2rem 0;
    color: var(--txt-color3, #94a3b8);
    cursor: grab;
    /* Visible en permanence, en retrait : une poignée révélée au seul survol
       n'est pas découvrable — et n'existe pas du tout au doigt. */
    opacity: .35;
    transition: opacity .12s ease;
    touch-action: none;
}
.eb-pipe-card:hover .eb-pipe-grip,
.eb-pipe-grip:focus-visible {
    opacity: 1;
}
.eb-pipe-grip:active {
    cursor: grabbing;
}

/* --- États de glisser (SortableJS) --- */
.eb-pipe-ghost {
    /* Emplacement de dépôt prévisualisé. */
    opacity: .45;
    border-style: dashed;
    border-color: var(--txt-color26, #2563eb);
    background: color-mix(in srgb, var(--txt-color26, #2563eb) 8%, transparent);
}
.eb-pipe-chosen {
    border-color: var(--txt-color26, #2563eb);
}
.eb-pipe-drag {
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
/* Pendant un glisser, toutes les colonnes se signalent comme cibles. */
.eb-pipe-dragging .eb-pipe-body {
    outline: 2px dashed var(--bor-color12, #cbd5e1);
    outline-offset: 2px;
    border-radius: .4rem;
}
/* Enregistrement en cours : la carte est posée mais pas encore confirmée. */
.eb-pipe-saving {
    opacity: .55;
    pointer-events: none;
}
.eb-pipe-link,
.eb-pipe-link:hover {
    display: block;
    text-decoration: none;
}
.eb-pipe-name {
    display: block;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: .3rem;
}
/* inline-block + white-space:normal : en inline pur, un libellé sur 2 lignes
   coupait le fond de la pastille en deux fragments décalés ; sans le
   white-space, le libellé long débordait de la colonne. */
.eb-pipe-status.label.label-inline {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
    padding: 2px 8px;
}
.eb-pipe-date {
    display: block;
    margin-top: .35rem;
    font-size: .72rem;
    color: var(--txt-color3, #94a3b8);
}

/* =========================================================================
   Fiche candidat (vue superviseur)
   ========================================================================= */

/* Les 2 colonnes s'alignent d'elles-mêmes : remplace le script qui forçait
   `.wizard.row` à la hauteur du viewport (700 px de blanc sur grand écran). */
.recruitement-wizard .wizard.row {
    align-items: stretch;
}

/* En-tête candidat : photo + identité + contact, alignés à gauche comme le
   reste de la colonne. Le nom seul, centré, ne disait ni depuis quand la
   candidature existe ni comment joindre la personne. */
.eb-recr-candidate-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 1.25rem;
    border-bottom: 1px solid var(--bor-color12, #e2e8f0);
    margin-bottom: 1rem;
    /* `.wizard-right` est un flex column en align-items:center : sans ces deux
       règles, le bandeau se réduit à la largeur de son contenu et se centre,
       donc ni son bord gauche ni son filet ne tombent sur ceux du formulaire
       en dessous (qui, lui, est en w-100). */
    align-self: stretch;
    width: 100%;
}
.eb-recr-candidate-photo {
    width: 72px;
    height: 72px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--bkg-color12, #eef2f7);
}
.eb-recr-candidate-id {
    min-width: 0;
}
.eb-recr-candidate-id .h5 {
    display: block;
    margin-bottom: .25rem;
}
.eb-recr-candidate-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    font-size: .8rem;
    color: var(--txt-color3, #64748b);
}
.eb-recr-candidate-meta a {
    color: inherit;
}
.eb-recr-candidate-meta i {
    opacity: .7;
    margin-right: .2rem;
}
@media (max-width: 575.98px) {
    .eb-recr-candidate-head {
        flex-direction: column;
        text-align: center;
        gap: .5rem;
    }
    .eb-recr-candidate-meta {
        justify-content: center;
    }
}

/* Candidature sans étape : phrase d'explication sous le bloc de navigation. */
.eb-recr-nav-hint {
    margin: .75rem .5rem 0;
    font-size: .8rem;
    color: var(--txt-color3, #64748b);
}

/* --- Formulaire sans étape : le pipeline rendait une page vide --- */
.eb-pipe-noflow {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--txt-color3, #64748b);
}
.eb-pipe-noflow i {
    font-size: 2rem;
    opacity: .35;
}
@media (max-width: 992px) {
    #supervisor-view.body-wizard.recruitement-wizard .wizard.row{
        overflow: visible !important;
        display: block;
    }
}
#recr-register-btn {
    background-color: var(--bkg-color6);
}
#recr-register-btn:hover {
    background-color: var(--bs-btn-hover-bg);
}
.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: -30px;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}
.separator:not(:empty)::before {
    margin-right: .25em;
}
.separator:not(:empty)::after {
    margin-left: .25em;
}

.step-btn {
    min-width: 180px;
}

.input-group-text.ombre_btn.sous_niveau_button {
    border-color:currentcolor currentcolor black;
    border-style: none none solid;
    border-width: medium medium 2px;
    border-image: none 100% / 1 / 0 stretch;
    border-radius: 0px;
}

.custom-form {
    width:100%;

}

#scrollingDiv {
    max-height: 75vh;
    overflow-y: scroll;
    width: 100%;
}
div:has(#scrollingDiv){
    padding-right: 0px !important;
}

/* Réordonnancement champs (SortableJS sur tbody) */
#form_options .drag-handle {
    touch-action: none;
    user-select: none;
}

/* Stepper édition formulaire (Configuration / Paramétrage fusionnés) */
.form-config-recrutement-card .recrutement-form-stepper {
    position: relative;
    z-index: 2;
}
.form-config-recrutement-card .recrutement-form-stepper .stepper-item.recrutement-step-active .stepper-icon {
    box-shadow: 0 0 0 2px var(--txt-color26);
}

/* #9906 — Carrousel visuel des rendez-vous automatiques */
.eb-rdv-track {
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 2px;
}
.eb-rdv-card {
    min-width: 160px;
    flex: 0 0 auto;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    margin: 0;
}
.eb-rdv-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
}
.eb-rdv-card .eb-rdv-date { font-size: 1.05rem; }
.eb-rdv-card .eb-rdv-hour { font-size: 1.5rem; }

/* #9906 — Drag & drop pipeline */
#flow-view .graycard { transition: background-color 0.15s ease; min-height: 120px; }
#flow-view .graycard.eb-dragover { background-color: rgba(13, 110, 253, 0.08); outline: 2px dashed rgba(13, 110, 253, 0.4); }
#flow-view [id^='recrutement_'] { transition: opacity 0.15s ease; }
#flow-view [id^='recrutement_'].eb-dragging { opacity: 0.4; }

/* #9906 — Layout type login.php pour la page formulaire (image à gauche) */
.eb-form-split { min-height: 100vh; }
.eb-form-split-img {
    background-size: cover;
    background-position: center;
    min-height: 40vh;
}
@media (min-width: 992px) {
    .eb-form-split-img { min-height: 100vh; }
}

/* #10253 — Supervisor view (Liste) : alignement du contenu avec #menu.mc-tabs-bar.
   La barre de tabs principale (mc-tabs-bar) a margin: 0 16px → contenu visible
   à parent+16px. Le supervisor view enchaîne plusieurs container-fluid + row
   imbriqués et une <ul class='nav m-3 ...stats-container-new'> (m-3 = 1rem).
   Cumul des décalages → tuiles "à traiter / En cours / ..." à parent+28px, et
   toolbar à parent+~31px, soit ~12-15px à droite de la barre des tabs. */
.recrutement-supervisor-view.container-fluid {
    /* Padding 16px pour coller au margin: 0 16px de mc-tabs-bar. */
    padding-left: 16px;
    padding-right: 16px;
}
.recrutement-supervisor-view > .row {
    /* Annule la negative margin -0.75rem du .row : on veut les enfants
       à l'intérieur du padding 16px et pas qui débordent. */
    margin-left: 0;
    margin-right: 0;
}
.recrutement-supervisor-view .stats-container-new {
    /* La fonction globale write_stats_containers_group impose `m-3` (1rem)
       sur tous les côtés. On retire le côté horizontal pour que la ligne
       de stats soit flush avec le parent (et donc avec mc-tabs-bar). */
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Le parent .row est display:flex donc une simple width:100% ne suffit
       pas — l'UL hérite d'un flex:0 0 auto et reste à sa largeur de contenu
       (somme des tuiles + gaps, ~54px avant le bord droit du bloc tabs).
       flex:1 1 auto force l'UL à s'étendre sur toute la largeur du row,
       et les tuiles (flex:1 1 0) se répartissent l'espace supplémentaire. */
    flex: 1 1 auto;
    min-width: 0;
}
.recrutement-supervisor-view > #toolbar.container-fluid {
    /* Le toolbar est un container-fluid imbriqué : on retire son padding
       horizontal pour rester aligné sur le bord du parent. */
    padding-left: 0;
    padding-right: 0;
}
body.eb-has-topbar-v2 .recrutement-supervisor-table .fixed-table-toolbar {
    /* Global eBrigade applique `body.eb-has-topbar-v2 .fixed-table-toolbar
       { padding: 4px 16px !important }` mais une autre règle (vraisemblablement
       dans bootstrap-table.min.css) écrase `padding-right:0 !important`. La
       search, justify-content:flex-end, va donc jusqu'au bord droit du wrapper
       (~16px au-delà du bord droit du bloc stats / mc-tabs-bar). On reprend
       le sélecteur `body.eb-has-topbar-v2 ...` pour matcher la spécificité
       du global avec en plus notre classe scope (= specificity 0,3,1) et on
       force padding-right:16px. */
    padding-right: 16px !important;
}
.recrutement-supervisor-table .fixed-table-toolbar .search {
    /* La toolbar bootstrap-table est display:flex avec .search en dernier
       enfant et flex:1 1 auto → le wrapper s'étend (~1180px) mais l'input
       (300px) reste collé à GAUCHE du wrapper, donc visuellement à côté du
       column-picker au lieu d'être à droite du tableau.
       justify-content:flex-end aligne l'input sur le bord droit du wrapper
       (= bord droit du toolbar = bord droit du tableau).
       Note : on cible .recrutement-supervisor-table (classe ajoutée via
       BootstrapTablePerso::setClassDiv) au lieu de .recrutement-supervisor-view
       parce que bootstrap-table.js sort le wrapper de table de notre <div>
       et le re-rend en sibling — la chaîne ancêtre est cassée à l'exécution. */
    justify-content: flex-end;
}

/* #10253 — Paramétrage Recrutement : alignement des cards avec #menu.mc-tabs-bar.
   Le row a déjà son negative-margin qui colle au bord du form (lui-même
   aligné avec mc-tabs-bar), mais col-sm-6 ajoute un padding gutter de 0.75rem
   qui décale le bord visible des cards (gauche de la 1ère, droite de la dernière)
   de ~15px par rapport au bloc des tabs. On annule ce padding extérieur.
   Gutter intérieur conservé (1rem) pour garder un espace propre entre les 2 cards. */
.recrutement-params-row {
    --bs-gutter-x: 1rem;
}
.recrutement-params-row > [class*='col-']:first-child {
    padding-left: 0;
}
.recrutement-params-row > [class*='col-']:last-child {
    padding-right: 0;
}
@media (max-width: 575.98px) {
    /* En stacked (xs), on supprime les paddings horizontaux pour
       que toutes les cards soient flush avec le bloc tabs. */
    .recrutement-params-row > [class*='col-'] {
        padding-left: 0;
        padding-right: 0;
    }
}

/* #10253 — Dark mode pour la card "Motifs de refus" dans l'édition de
   formulaire. dashboard-modern.css applique
   `body.eb-has-topbar-v2 .table thead th { background:#E2E8F0 !important; ... }`
   sans variante dark → en thème sombre on a un thead clair (presque blanc)
   sur un fond de card sombre, avec un texte gris foncé peu lisible. On
   re-cible la même règle scopée à `.form-motifs-recrutement-card` et on
   utilise les variables CSS eBrigade pour suivre le thème.
   Note : on ne touche PAS au fix global pour éviter toute régression sur
   les ~100 autres tables de l'app qui peuvent dépendre de cet aspect clair
   (ex : pages exports/print, vues legacy). */
html.dark .form-motifs-recrutement-card table thead th {
    /* Note sur les variables eBrigade en dark mode :
       --txt-color6 = #d20019 (rouge, à éviter pour du texte d'en-tête)
       --txt-color3 = #a7a7a7 (gris muted, parfait pour des en-têtes)
       --bor-color12 = #303030 (bordure sombre)
       Les hex fallbacks correspondent au schéma slate de dashboard-modern.css. */
    background: #1e293b !important;
    color: var(--txt-color3, #94a3b8) !important;
    border-bottom: 1px solid var(--bor-color12, #334155) !important;
}
html.dark .form-motifs-recrutement-card .card-body {
    /* La règle Bootstrap `.table { color: var(--bs-table-color); }` met
       le texte du tableau à #212529 (noir) en dark mode → invisible sur
       fond sombre. On force la couleur de texte de la card pour que les
       lignes vides / textes hors `.form-control` restent lisibles. */
    color: var(--txt-color3, #e2e8f0);
}
html.dark .form-motifs-recrutement-card table {
    color: var(--txt-color3, #e2e8f0) !important;
}
/* #12099 — Paramétrage d'un formulaire (editForm) : grille de réglages commune.
   Avant, chaque card composait ses lignes à sa façon (largeurs de colonne
   implicites, interrupteurs tantôt collés au libellé tantôt en float:right,
   aides en 3 markups différents) → aucun alignement d'une card à l'autre.
   Toutes les lignes passent désormais par settingRow() / settingSwitch(). */
.eb-recr-settings > tbody > tr > td {
    padding: .4rem 0;
    vertical-align: middle;
}
.eb-recr-settings > tbody > tr > td.eb-recr-label {
    width: 40%;
    padding-right: 1rem;
    vertical-align: top;
    padding-top: .75rem;
}
.eb-recr-settings > tbody > tr > td.eb-recr-control {
    width: 60%;
}
/* Ligne « pleine largeur » : libellé au-dessus du contrôle (éditeurs, textarea
   longs) — un label à gauche laisserait le contrôle trop étroit. */
.eb-recr-settings > tbody > tr > td.eb-recr-stacked > label {
    display: block;
    margin-bottom: .35rem;
}
.eb-recr-settings label {
    margin-bottom: 0;
}
/* Interrupteur : aligné sur le début de la colonne contrôle, comme les inputs.
   (les moyens de paiement utilisaient float:right → 2 alignements distincts) */
.eb-recr-switch {
    float: none;
    margin: 0;
    font-size: 13px;
    line-height: 12px;
}
/* Précision sous un contrôle. Reste lisible en thème sombre (--txt-color3). */
.eb-recr-hint {
    display: block;
    margin-top: .3rem;
    color: var(--txt-color3, #64748b);
    font-size: .78rem;
    line-height: 1.35;
}
.eb-recr-sublabel {
    display: block;
    margin-bottom: .2rem;
    color: var(--txt-color3, #64748b);
}
/* Les 2 selects empilés d'Avant / Après recrutement. */
.eb-recr-stackfields {
    display: flex;
    flex-direction: column;
}
.eb-recr-narrow {
    max-width: 120px;
}
/* Sous-bloc d'une card (ex : Don dans « Cotisation et paiement »). */
.eb-recr-subsection {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--bor-color12, #e2e8f0);
}
.eb-recr-subtitle {
    font-weight: 600;
    margin-bottom: .25rem;
}
/* État vide d'une card sans tableau (Rendez-vous automatique sans créneau). */
.eb-recr-empty {
    color: var(--txt-color3, #64748b);
    font-size: .85rem;
    padding: .5rem 0;
}
@media (max-width: 767.98px) {
    /* En colonne étroite, libellé au-dessus du contrôle : 40/60 rendrait les
       champs inutilisables. */
    .eb-recr-settings > tbody > tr > td.eb-recr-label,
    .eb-recr-settings > tbody > tr > td.eb-recr-control {
        display: block;
        width: 100%;
        padding-right: 0;
    }
    .eb-recr-settings > tbody > tr > td.eb-recr-label {
        padding-top: .5rem;
        padding-bottom: .2rem;
    }
}

/* =========================================================================
   #12099bis — Paramétrage d'un formulaire : bandeau d'identité + onglets.
   La page empilait 12 cards de même poids sur ~3 700 px, sans jamais dire
   quel formulaire on éditait.
   ========================================================================= */

/* --- Bandeau d'identité (réutilise .eb-hero de dashboard-modern.css) -----
   Pas d'align-items ici : .eb-hero centre déjà en desktop et repasse en
   flex-start sous 768 px. Le redéfinir cassait l'alignement mobile. */
.eb-recr-hero-title {
    font-size: 1.05rem;
    line-height: 1.3;
}
.eb-recr-hero-untitled {
    font-style: italic;
    opacity: .7;
}
.eb-recr-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .35rem;
}
.eb-recr-hero-badges .label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
}
.eb-recr-badge-on {
    background: color-mix(in srgb, var(--eb-success, #16a34a) 14%, transparent);
    color: var(--eb-success, #16a34a);
}
.eb-recr-badge-off {
    background: color-mix(in srgb, var(--eb-warning, #f59e0b) 16%, transparent);
    color: var(--eb-warning, #b45309);
}
.eb-recr-badge-neutral {
    background: var(--eb-surface-hover, #eef2f7);
    color: var(--eb-text-secondary, #64748b);
}
.eb-recr-hero-link {
    flex-shrink: 0;
    white-space: nowrap;
}

/* --- Barre d'onglets ----------------------------------------------------
   Le conteneur reprend les classes de sous-onglets du produit
   (.table-nav.table-tabs.sub-tabs) : styles, scroll horizontal mobile et
   auto-init tab-scroll sont hérités, rien de custom à maintenir ici. */
.eb-recr-tabs {
    margin-bottom: 1rem;
}
.eb-recr-tabs .nav-link {
    white-space: nowrap;
}
/* Le premier bloc d'un onglet colle sinon à la barre. */
.tab-content > .tab-pane > .recrutement-params-row:first-child {
    margin-top: .25rem;
}

/* ==========================================================================
   Organisation ▸ Module ▸ Recrutement — responsables d'étapes
   --------------------------------------------------------------------------
   Tout est préfixé par `.eb-recrut`, la classe posée sur le conteneur de
   l'écran : cette feuille est chargée par le module et reste dans le <head>
   pendant toute la session SPA, un sélecteur nu s'appliquerait ensuite aux
   écrans suivants.
   Remplace un `newTableAll` par formulaire (5 colonnes dont une vide, une
   sous-table imbriquée par personne) par une liste d'étapes : chaque étape
   porte son numéro, son libellé, son bouton d'ajout, puis les personnes.
   ========================================================================== */
.eb-recrut .eb-notice { margin-bottom: 12px; }
.eb-recrut .eb-recrut-card { margin-bottom: 12px; }

.eb-recrut .ebrs-orphan { font-weight: 400; opacity: .6; font-size: 12px; }

.eb-recrut .ebrs-steps { display: flex; flex-direction: column; gap: 10px; }

.eb-recrut .ebrs-step {
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm, 8px);
    background: var(--eb-surface);
    overflow: hidden;
}
.eb-recrut .ebrs-step__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--eb-surface-hover);
    border-bottom: 1px solid var(--eb-border);
}
/* Le numéro d'ordre était noyé dans le libellé (« 1 - Recrutement ») : sorti en
   pastille, il donne la séquence du parcours d'un coup d'œil. */
.eb-recrut .ebrs-step__num {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--eb-primary-light);
    color: var(--eb-primary);
    font-size: 11.5px;
    font-weight: 700;
}
.eb-recrut .ebrs-step__label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--eb-text);
    min-width: 0;
    overflow-wrap: anywhere;
}
.eb-recrut .ebrs-add { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }

.eb-recrut .ebrs-people { display: flex; flex-direction: column; }
.eb-recrut .ebrs-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-top: 1px solid var(--eb-border);
}
.eb-recrut .ebrs-person:first-child { border-top: 0; }
/* Le responsable hérité n'est pas nommé ici : il est rendu en retrait pour ne
   pas se lire comme une décision prise sur cette organisation. */
.eb-recrut .ebrs-person.is-inherited { opacity: .72; }
.eb-recrut .ebrs-person.is-inherited .ebrs-avatar { filter: grayscale(100%); }

.eb-recrut .ebrs-person__id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 220px; }
.eb-recrut .ebrs-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
/* `min-width:0` obligatoire : sans lui l'ellipse du nom et de l'e-mail ne se
   déclenche jamais dans un conteneur flex. */
.eb-recrut .ebrs-person__txt { min-width: 0; }
.eb-recrut .ebrs-person__name { font-size: 13.5px; font-weight: 600; color: var(--eb-text); line-height: 1.3; }
.eb-recrut .ebrs-person__org {
    display: flex; align-items: center; gap: 6px;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--eb-text-secondary);
}
.eb-recrut .ebrs-badge {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--eb-surface-hover);
    border: 1px solid var(--eb-border);
    font-size: 10px;
    font-weight: 600;
    text-transform: lowercase;
}

.eb-recrut .ebrs-person__contact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 200px;
}
.eb-recrut .ebrs-contact {
    display: flex; align-items: center; gap: 6px;
    min-width: 0;
    font-size: 12px;
    color: var(--eb-text-secondary);
}
.eb-recrut .ebrs-contact i { color: var(--eb-text-muted); font-size: 11px; flex: 0 0 auto; }

.eb-recrut .ebrs-person__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.eb-recrut .ebrs-person__actions form { margin: 0; }

/* Une étape sans personne ne rendait que des cellules vides : rien ne disait
   si c'était un oubli ou un écran qui n'avait pas fini de charger. */
.eb-recrut .ebrs-none {
    display: flex; align-items: center; gap: 9px;
    padding: 12px;
    font-size: 12.5px;
    color: var(--eb-text-secondary);
}
.eb-recrut .ebrs-none i { font-size: 15px; color: var(--eb-text-muted); }

@media (max-width: 575.98px){
    .eb-recrut .ebrs-person { flex-wrap: wrap; gap: 8px 12px; }
    .eb-recrut .ebrs-person__actions { margin-left: 0; }
}