/* ============================================================================
   css/accompagnement-individuel.css - Formulaire de demande d'entretien
   individuel (accompagnement-individuel-pro.php), 03/11/2026.
   v2 (03/11/2026) : espaces resserres, ligne code postal / ville / SIREN,
   aides en petit, messages de js/vm-saisie.js.
   Charge par $donneesSupplementairesHeader, donc AVANT custom.css : prefixe
   .main .vm-ei-form (0,3,0) pour passer devant les regles .vm-form de
   custom.css. Jetons seuls, aucun !important, mobile-first, bascule a
   577 px. LF.
   Les classes .vm-saisie-* accompagnent js/vm-saisie.js : a deplacer dans
   custom.css quand un second formulaire chargera ce script.
   ============================================================================ */

.main .vm-ei-form {
    background: var(--vm-blanc);
    border-radius: var(--vm-radius-md);
    box-shadow: var(--vm-shadow-sm);
    padding: var(--vm-space-4) var(--vm-space-3);
    text-align: left;
}

/* ---- Rythme vertical resserre ---- */
.main .vm-ei-form .vm-form-group {
    margin: 0 0 var(--vm-space-3);
}

.main .vm-ei-form .vm-form-row {
    margin: 0;
    column-gap: var(--vm-space-4);
    row-gap: 0;
}

.main .vm-ei-form label {
    margin-bottom: var(--vm-space-1);
}

.main .vm-ei-bloc {
    border: 0;
    margin: 0 0 var(--vm-space-4);
    padding: 0;
    min-width: 0;
}

.main .vm-ei-bloc > legend {
    float: left;
    width: 100%;
    margin: 0 0 var(--vm-space-3);
    padding: 0 0 var(--vm-space-1);
    border-bottom: 1px solid var(--vm-border);
    color: var(--vm-bleu-fonce);
    font-size: var(--vm-fs-lg);
    font-weight: var(--vm-fw-semi);
}

.main .vm-ei-bloc > legend + * {
    clear: both;
}

/* ---- Aides, mentions, champ facultatif ---- */
.main .vm-ei-form .vm-ei-aide {
    margin: var(--vm-space-1) 0 0;
    color: var(--vm-text-muted);
    font-size: var(--vm-fs-xs);
    line-height: 1.35;
}

.main .vm-ei-form .vm-ei-aide[hidden],
.main .vm-ei-form .vm-ei-autre[hidden],
.main .vm-ei-form .vm-saisie-msg[hidden] {
    display: none;
}

.main .vm-ei-bloc > .vm-ei-aide {
    margin: 0 0 var(--vm-space-2);
}

.main .vm-ei-form .vm-ei-mention {
    margin-top: var(--vm-space-3);
}

.main .vm-ei-form .vm-ei-facultatif {
    color: var(--vm-text-muted);
    font-weight: var(--vm-fw-normal);
    font-size: 0.700rem;
}

.main .vm-ei-form .vm-ei-autre {
    margin-top: var(--vm-space-2);
}

/* ---- Informations reprises du compte ---- */
.main .vm-ei-form .vm-ei-prerempli {
    margin: 0 0 var(--vm-space-3);
    padding: var(--vm-space-2) var(--vm-space-3);
    border-left: 3px solid var(--vm-turquoise);
    background: var(--vm-turquoise-pale);
    border-radius: var(--vm-radius-sm);
    color: var(--vm-text);
    font-size: var(--vm-fs-sm);
}

.main .vm-ei-form .vm-ei-prerempli i {
    margin-right: var(--vm-space-1);
    color: var(--vm-bleu);
}

/* ---- Code postal / ville / SIREN : empiles sur mobile, une ligne sur PC ---- */
.main .vm-ei-ligne3 {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--vm-space-4);
}

/* ---- Grille des disponibilites : defile si l'ecran est etroit ---- */
.main .vm-ei-grille-cadre {
    position: relative;
    overflow-x: auto;
    margin: 0 0 var(--vm-space-3);
}

.main .vm-ei-grille {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
    font-size: var(--vm-fs-sm);
}

.main .vm-ei-grille th,
.main .vm-ei-grille td {
    border: 1px solid var(--vm-border);
    padding: var(--vm-space-1);
    text-align: center;
    color: var(--vm-text);
}

.main .vm-ei-grille thead th,
.main .vm-ei-grille tbody th {
    background: var(--vm-bleu-pale);
    color: var(--vm-bleu-fonce);
    font-weight: var(--vm-fw-semi);
    white-space: nowrap;
}

.main .vm-ei-case {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin: 0;
    cursor: pointer;
}

.main .vm-ei-case input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--vm-bleu);
    cursor: pointer;
}

.main .vm-ei-grille td:has(input:checked) {
    background: var(--vm-turquoise-pale);
}

.main .vm-ei-bloc.has-erreur .vm-ei-grille {
    outline: 2px solid var(--vm-rose);
    outline-offset: 2px;
}

.main .vm-ei-accord {
    display: block;
    color: var(--vm-text);
    font-weight: var(--vm-fw-normal);
}

.main .vm-ei-accord input {
    margin-right: var(--vm-space-2);
    accent-color: var(--vm-bleu);
}

/* ---- Messages de js/vm-saisie.js ---- */
.main .vm-ei-form .vm-saisie-msg {
    margin: var(--vm-space-1) 0 0;
    font-size: var(--vm-fs-xs);
    color: var(--vm-text);
}

.main .vm-ei-form .vm-saisie-msg--erreur {
    color: var(--vm-text);
    border-left: 3px solid var(--vm-rose);
    padding-left: var(--vm-space-2);
}

.main .vm-ei-form .vm-saisie-msg--info {
    border-left: 3px solid var(--vm-bleu);
    padding-left: var(--vm-space-2);
}

.main .vm-ei-form .vm-saisie-sugg {
    padding: 0;
    border: 0;
    background: none;
    color: var(--vm-bleu);
    font-weight: var(--vm-fw-semi);
    text-decoration: underline;
    cursor: pointer;
}

.main .vm-ei-form .vm-saisie-sugg:focus-visible {
    outline: 2px solid var(--vm-bleu);
    outline-offset: 2px;
}

.main .vm-ei-form .vm-saisie-compteur {
    margin: var(--vm-space-1) 0 0;
    color: var(--vm-text-muted);
    font-size: var(--vm-fs-xs);
    text-align: right;
}

.main .vm-ei-form .vm-saisie-compteur.is-court {
    color: var(--vm-text);
    font-weight: var(--vm-fw-semi);
}

@media (min-width: 577px) {
    .main .vm-ei-form {
        padding: var(--vm-space-5) var(--vm-space-6);
    }

    .main .vm-ei-ligne3 {
        grid-template-columns: 9rem minmax(0, 1fr) 13rem;
    }

    .main .vm-ei-form .vm-form-row,
    .main .vm-ei-ligne3 {
        align-items: start;
    }
}

/* ============================================================================
   QUESTIONNAIRE DE PREPARATION (form-preparation-entretien.php, v3, 03/11/2026)
   Chaque question : un bloc numerote, des choix (cases en grille ou menu),
   une precision libre.
   ============================================================================ */
.main .vm-ei-q__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    margin-right: var(--vm-space-1);
    border-radius: 50%;
    background: var(--vm-bleu);
    color: var(--vm-blanc);
    font-size: var(--vm-fs-sm);
    vertical-align: middle;
}

.main .vm-ei-q__groupe {
    border: 0;
    margin: 0 0 var(--vm-space-3);
    padding: 0;
    min-width: 0;
}

.main .vm-ei-q__groupe > legend {
    margin: 0 0 var(--vm-space-1);
    padding: 0;
    border: 0;
    color: var(--vm-bleu-fonce);
    font-size: var(--vm-fs-sm);
    font-weight: var(--vm-fw-semi);
}

.main .vm-ei-q__cases {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vm-space-1) var(--vm-space-3);
}

.main .vm-ei-form .vm-ei-q__case {
    display: flex;
    align-items: flex-start;
    gap: var(--vm-space-2);
    margin: 0;
    padding: var(--vm-space-1) var(--vm-space-2);
    border: 1px solid var(--vm-border);
    border-radius: var(--vm-radius-sm);
    color: var(--vm-text);
    font-size: var(--vm-fs-sm);
    font-weight: var(--vm-fw-normal);
    line-height: 1.35;
    cursor: pointer;
}

.main .vm-ei-q__case input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--vm-bleu);
}

.main .vm-ei-q__case:has(input:checked) {
    border-color: var(--vm-bleu);
    background: var(--vm-bleu-pale);
}

.main .vm-ei-q__case:has(input:focus-visible) {
    outline: 2px solid var(--vm-bleu);
    outline-offset: 2px;
}

@media (min-width: 577px) {
    .main .vm-ei-q__cases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Inscrite sur VanillaMilk ? (formulaire de demande, 03/11/2026) */
.main .vm-ei-inscrite {
    display: grid;
    gap: var(--vm-space-1) var(--vm-space-4);
}
@media (min-width: 577px) {
    .main .vm-ei-inscrite { grid-template-columns: repeat(3, auto); justify-content: start; }
}
.main #inscrite-connexion[hidden] { display: none; }

/* Liens sous « Qu'avez-vous deja en place ? » (questionnaire, 03/11/2026).
   Un bloc par case cochee ; deux colonnes des 577 px. */
.main .vm-ei-liens {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--vm-space-4);
    margin-top: var(--vm-space-3);
}
.main .vm-ei-liens > .vm-ei-prerempli { grid-column: 1 / -1; }
.main .vm-ei-lien[hidden] { display: none; }
.main .vm-ei-lien .vm-form-group { margin-bottom: var(--vm-space-3); }
@media (min-width: 577px) {
    .main .vm-ei-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Outil + lien de reservation : sur toute la largeur, cote a cote. */
    .main .vm-ei-lien[data-vm-lien-bloc="rdv"] {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 var(--vm-space-4);
    }
}

/* ============================================================================
   css/bo-admin-entretien-indiv.css - Suivi des entretiens individuels
   (bo-admin-entretien-indiv.php), 03/11/2026. Charge apres vm-tokens.css,
   backoffice.css et bo-admin.css. Jetons seuls, aucun !important. LF.
   ============================================================================ */

.bo-ei-page { background: var(--vm-gris-fond); color: var(--vm-text); font-family: var(--vm-font-base); margin: 0; }
.bo-ei-wrap { max-width: 1100px; margin: 0 auto; padding: var(--vm-space-4) var(--vm-space-3) var(--vm-space-8); }
.bo-ei-h1 { color: var(--vm-bleu-fonce); font-size: var(--vm-fs-2xl); margin: var(--vm-space-4) 0; }
.bo-ei-h2 { color: var(--vm-bleu-fonce); font-size: var(--vm-fs-lg); margin: 0 0 var(--vm-space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--vm-space-2); }

.bo-ei-carte { background: var(--vm-blanc); border: 1px solid var(--vm-border); border-radius: var(--vm-radius-md); padding: var(--vm-space-4); margin: 0 0 var(--vm-space-4); }
.bo-ei-aide { color: var(--vm-text-muted); font-size: var(--vm-fs-sm); margin: var(--vm-space-2) 0; }

.bo-ei-alerte { background: var(--vm-rose-pale); border-left: 4px solid var(--vm-rose); padding: var(--vm-space-3); border-radius: var(--vm-radius-sm); }
.bo-ei-ok { background: var(--vm-vert-pale); border-left: 4px solid var(--vm-vert); padding: var(--vm-space-3); border-radius: var(--vm-radius-sm); }

/* Statuts */
.bo-ei-statut { display: inline-block; font-size: var(--vm-fs-xs); font-weight: var(--vm-fw-semi); padding: 2px var(--vm-space-2); border-radius: var(--vm-radius-pill); background: var(--vm-bleu-pale); color: var(--vm-bleu-fonce); white-space: nowrap; }
.bo-ei-statut--nouvelle { background: var(--vm-jaune-pale); }
.bo-ei-statut--confirmee { background: var(--vm-orange-pale); }
.bo-ei-statut--payee { background: var(--vm-turquoise-pale); }
.bo-ei-statut--realisee, .bo-ei-statut--cloturee { background: var(--vm-vert-pale); }
.bo-ei-statut--annulee { background: var(--vm-gris-fond); color: var(--vm-text-muted); }

/* A faire */
.bo-ei-todo { list-style: none; margin: 0; padding: 0; }
.bo-ei-todo li { padding: var(--vm-space-2) var(--vm-space-3); border-left: 4px solid var(--vm-border); margin: 0 0 var(--vm-space-2); background: var(--vm-gris-fond); border-radius: var(--vm-radius-sm); }
.bo-ei-todo li.is-proche { border-left-color: var(--vm-orange); background: var(--vm-orange-pale); }
.bo-ei-todo li.is-retard { border-left-color: var(--vm-rose); background: var(--vm-rose-pale); }

/* Onglets */
.bo-ei-onglets { display: flex; flex-wrap: wrap; gap: var(--vm-space-2); margin: 0 0 var(--vm-space-3); }
.bo-ei-onglet { padding: var(--vm-space-1) var(--vm-space-3); border: 1px solid var(--vm-border); border-radius: var(--vm-radius-pill); background: var(--vm-blanc); color: var(--vm-bleu); text-decoration: none; font-size: var(--vm-fs-sm); }
.bo-ei-onglet.is-actif { background: var(--vm-bleu); border-color: var(--vm-bleu); color: var(--vm-blanc); }

/* Liste */
.bo-ei-table { width: 100%; border-collapse: collapse; font-size: var(--vm-fs-sm); }
.bo-ei-table th, .bo-ei-table td { text-align: left; padding: var(--vm-space-2); border-bottom: 1px solid var(--vm-border); vertical-align: top; }
.bo-ei-table th { color: var(--vm-bleu-fonce); }

/* Fiche */
.bo-ei-fiche { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: var(--vm-space-1) var(--vm-space-3); margin: 0; }
.bo-ei-fiche dt { font-weight: var(--vm-fw-semi); color: var(--vm-bleu-fonce); }
.bo-ei-fiche dd { margin: 0; overflow-wrap: anywhere; }
.bo-ei-lien { width: 100%; max-width: 520px; font-size: var(--vm-fs-xs); padding: 2px var(--vm-space-1); }

.bo-ei-suivi { margin: 0 0 var(--vm-space-3); padding-left: var(--vm-space-5); }
.bo-ei-suivi li { margin: 0 0 var(--vm-space-1); }

/* Emails */
.bo-ei-mail, .bo-ei-details { border: 1px solid var(--vm-border); border-radius: var(--vm-radius-sm); padding: var(--vm-space-2) var(--vm-space-3); margin: 0 0 var(--vm-space-3); }
.bo-ei-mail > summary, .bo-ei-details > summary { cursor: pointer; font-weight: var(--vm-fw-semi); color: var(--vm-bleu-fonce); }
.bo-ei-fait { font-weight: var(--vm-fw-normal); color: var(--vm-vert); font-size: var(--vm-fs-sm); }
.bo-ei-objet { margin: var(--vm-space-3) 0 var(--vm-space-2); }
.bo-ei-corps { width: 100%; font-family: inherit; font-size: var(--vm-fs-sm); line-height: 1.5; padding: var(--vm-space-2); border: 1px solid var(--vm-border); border-radius: var(--vm-radius-sm); }

/* Boutons et formulaires */
.bo-ei-boutons, .bo-ei-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--vm-space-2); margin: var(--vm-space-2) 0; }
.bo-ei-form-action { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--vm-space-2); margin: 0; padding: var(--vm-space-2); border: 1px dashed var(--vm-border); border-radius: var(--vm-radius-sm); }
.bo-ei-form-action label, .bo-ei-edition label, .bo-ei-inline label { display: flex; flex-direction: column; gap: 2px; font-size: var(--vm-fs-sm); color: var(--vm-bleu-fonce); }
.bo-ei-form-action label.bo-ei-case { flex-direction: row; align-items: center; gap: var(--vm-space-1); }
.bo-ei-edition input, .bo-ei-edition select, .bo-ei-edition textarea, .bo-ei-form-action input[type="text"], .bo-ei-form-action input[type="url"], .bo-ei-form-action input[type="datetime-local"], .bo-ei-inline textarea { font: inherit; font-size: var(--vm-fs-sm); padding: var(--vm-space-1) var(--vm-space-2); border: 1px solid var(--vm-border); border-radius: var(--vm-radius-sm); }
.bo-ei-edition textarea, .bo-ei-inline textarea { width: 100%; }
.bo-ei-edition > label, .bo-ei-inline > label { margin: var(--vm-space-2) 0; }
.bo-ei-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--vm-space-2); border: 0; padding: 0; margin: var(--vm-space-2) 0; }
.bo-ei-grille legend { font-weight: var(--vm-fw-semi); color: var(--vm-bleu-fonce); margin-bottom: var(--vm-space-2); }

.bo-ei-btn { display: inline-flex; align-items: center; gap: var(--vm-space-1); padding: var(--vm-space-2) var(--vm-space-3); border: 1px solid var(--vm-bleu); border-radius: var(--vm-radius-pill); background: var(--vm-blanc); color: var(--vm-bleu); font: inherit; font-size: var(--vm-fs-sm); font-weight: var(--vm-fw-semi); text-decoration: none; cursor: pointer; }
.bo-ei-btn--plein { background: var(--vm-bleu); color: var(--vm-blanc); }
.bo-ei-btn--vert { border-color: var(--vm-vert); color: var(--vm-bleu-fonce); background: var(--vm-vert-pale); }
.bo-ei-btn--rouge { border-color: var(--vm-rose); color: var(--vm-bleu-fonce); background: var(--vm-rose-pale); }
.bo-ei-btn:focus-visible, .bo-ei-onglet:focus-visible { outline: 3px solid var(--vm-bleu-fonce); outline-offset: 2px; }

/* Envoi par le site (03/11/2026) : apercu de l'email et donnees manquantes. */
.bo-ei-apercu { display: block; width: 100%; height: 520px; border: 1px solid var(--vm-border); border-radius: var(--vm-radius-sm); background: var(--vm-blanc); }
.bo-ei-manque { margin: var(--vm-space-2) 0; padding: var(--vm-space-2) var(--vm-space-3); border-left: 4px solid var(--vm-rose); background: var(--vm-rose-pale); color: var(--vm-bleu-fonce); font-size: var(--vm-fs-sm); }
.bo-ei-envoi .bo-ei-btn[disabled] { opacity: .6; cursor: wait; }