/* Cloche et boite de reception du workflow d'intervention interne.
   Volontairement ici et non en .razor.css : le bundle CSS isole de Blazor
   (VisiteCommercialeForm.Front.styles.css) n'est pas reference dans index.html,
   donc tout fichier .razor.css du projet est sans effet. */
/* Cloche de notifications. Reprend les variables de marque definies dans app.css
   (--gf-red, --gf-white, --gf-black) pour rester coherente avec la barre utilisateur. */

.notif-bell {
    position: relative;
}

.btn-notif-bell {
    background-color: transparent;
    border: none;
    /* Place a droite et en haut pour la pastille : elle tient DANS le bouton, aucun
       conteneur du header ne peut la rogner (constate le 2026-10-14 : « 5 » coupe). */
    padding: 0.55rem 0.85rem 0.25rem 0.4rem;
    overflow: visible;
    position: relative;
    line-height: 1;
    color: var(--gf-red, #c61e26);
    opacity: 0.7;
    transition: transform 150ms ease, opacity 150ms ease;
}

.btn-notif-bell:hover,
.btn-notif-bell:focus {
    transform: scale(1.1);
    opacity: 1;
}

.btn-notif-bell:focus-visible {
    outline: 2px solid var(--gf-red, #c61e26);
    outline-offset: 2px;
    border-radius: 4px;
}

.btn-notif-bell.has-unread {
    opacity: 1;
}

.btn-notif-bell i {
    font-size: 1.35rem;
}

/* Pastille du nombre de non-lues. */
.notif-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: var(--gf-red, #c61e26);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 18px;
    pointer-events: none;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px #fff;
}

.notif-panel {
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 0;
    background-color: #fff;
    border: 1px solid #e3dedd;
    border-radius: 8px;
    box-shadow: 0 8px 28px -12px rgba(27, 20, 22, 0.35);
    overflow: hidden;
}

.notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #ece7e6;
}

.notif-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: #1b1416;
}

.notif-mark-all {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    color: var(--gf-red, #c61e26);
    text-decoration: underline;
    cursor: pointer;
}

.notif-head-actions { display: inline-flex; align-items: center; gap: 12px; }
.notif-vider { display: inline-flex; align-items: center; gap: 4px; color: #6e6265; }
.notif-vider i { font-size: 0.8rem !important; }
.notif-vider:hover { color: var(--gf-red, #c61e26); }

/* Confirmation de « Vider » */
.notif-confirm {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 14px; background: #fdf2f3; border-bottom: 1px solid #f3d5d8;
    font-size: 0.82rem; color: #5b1a20;
}
.notif-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.notif-confirm-non, .notif-confirm-oui {
    border-radius: 6px; padding: 4px 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.notif-confirm-non { background: #fff; border: 1px solid #e3dedd; color: #1b1416; }
.notif-confirm-oui { background: var(--gf-red, #c61e26); border: 1px solid var(--gf-red, #c61e26); color: #fff; }
.notif-confirm-non:disabled, .notif-confirm-oui:disabled { opacity: .6; cursor: default; }

.notif-empty {
    padding: 22px 14px;
    text-align: center;
    color: #7a6e71;
    font-size: 0.86rem;
}

.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Le panneau ne doit jamais depasser l'ecran d'un telephone : au-dela, il defile. */
    max-height: 60vh;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid #f2eeed;
    text-align: left;
    cursor: pointer;
}

.notif-item:hover,
.notif-item:focus {
    background-color: #faf7f6;
}

.notif-item.unread {
    background-color: #fdf3f3;
}

.notif-item.unread:hover {
    background-color: #fbeceb;
}

.notif-icon {
    flex: none;
    font-size: 1rem;
    color: var(--gf-red, #c61e26);
    margin-top: 2px;
}

.notif-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notif-item-title {
    font-weight: 600;
    font-size: 0.86rem;
    color: #1b1416;
}

/* Le libelle client + ville peut etre long : il passe a la ligne au lieu d'etre coupe. */
.notif-item-text {
    font-size: 0.82rem;
    color: #55494c;
    overflow-wrap: anywhere;
}

.notif-item-date {
    font-size: 0.72rem;
    color: #8a7d80;
}

/* =====================================================================
   Ecrans du workflow d'intervention interne
   (/interventions/mine et /interventions/affectation)
   Concus d'abord pour le telephone du technicien : cibles tactiles larges,
   une seule colonne, aucun defilement horizontal.
   ===================================================================== */

.itv-page {
    max-width: 780px;
    margin-inline: auto;
    padding-inline: 16px;
    padding-block: 16px 48px;
}

.itv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.itv-h1 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: #1b1416;
}

.itv-refresh {
    background: none;
    border: 1px solid #e0d9d8;
    border-radius: 6px;
    width: 38px;
    height: 38px;
    flex: none;
    color: #55494c;
    cursor: pointer;
}

.itv-refresh:disabled { opacity: 0.5; cursor: default; }

/* ---------- onglets ---------- */
.itv-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    border-bottom: 1px solid #ece7e6;
}

.itv-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #7a6e71;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.itv-tab.actif {
    color: var(--gf-red, #c61e26);
    border-bottom-color: var(--gf-red, #c61e26);
}

.itv-tab-count {
    background-color: var(--gf-red, #c61e26);
    color: #fff;
    border-radius: 9px;
    padding: 0 6px;
    font-size: 0.7rem;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}

/* ---------- etats ---------- */
.itv-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 16px;
    text-align: center;
    color: #7a6e71;
    font-size: 0.9rem;
}

.itv-state i { font-size: 1.6rem; opacity: 0.6; }
.itv-state-error { color: #a3242b; }

.itv-flash {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.88rem;
    margin-bottom: 12px;
}

.itv-flash.succes { background-color: #e7f4ec; color: #17603d; }
.itv-flash.erreur { background-color: #fbeceb; color: #a3242b; }

/* ---------- liste ---------- */
.itv-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.itv-card {
    background-color: #fff;
    border: 1px solid #e6dedd;
    border-radius: 8px;
    overflow: hidden;
}

/* Bande rouge sur la tranche : l'urgence se lit sans avoir a lire. */
.itv-card.urgent { border-left: 3px solid var(--gf-red, #c61e26); }

.itv-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.itv-card-head.statique { cursor: default; }

.itv-card-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.itv-client {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1b1416;
    overflow-wrap: anywhere;
}

.itv-tag-urgent {
    display: inline-block;
    margin-left: 6px;
    background-color: var(--gf-red, #c61e26);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: 2px;
}

.itv-sub {
    font-size: 0.83rem;
    color: #6e6265;
    overflow-wrap: anywhere;
}

.itv-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 3px;
    font-size: 0.76rem;
    color: #8a7d80;
}

.itv-statut {
    padding: 1px 7px;
    border-radius: 3px;
    font-weight: 600;
    background-color: #f0ebea;
    color: #55494c;
}

.itv-statut-affectee { background-color: #fdf0d9; color: #8a5a10; }
.itv-statut-vue { background-color: #e4eefb; color: #1f4f8b; }
.itv-statut-en_route,
.itv-statut-en_cours { background-color: #e7f4ec; color: #17603d; }
.itv-statut-en_pause { background-color: #fff4e5; color: #9a5b00; }
.itv-statut-rapport_finalise,
.itv-statut-envoyee_x3,
.itv-statut-cloturee { background-color: #eceaf5; color: #4a3f80; }

.itv-tech { display: inline-flex; align-items: center; gap: 4px; }
.itv-chevron { flex: none; color: #a1959a; margin-top: 3px; }

/* ---------- detail ---------- */
.itv-card-body {
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Cible tactile pleine largeur : c'est l'action principale du technicien. */
.itv-itineraire {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 7px;
    background-color: #fdf3f3;
    border: 1px solid #f2d9d9;
    color: #1b1416;
    text-decoration: none;
}

.itv-itineraire:hover { background-color: #fbeceb; }
.itv-itineraire > i:first-child { font-size: 1.2rem; color: var(--gf-red, #c61e26); flex: none; }
.itv-itineraire span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.itv-itineraire strong { font-size: 0.9rem; }
.itv-itineraire small { font-size: 0.78rem; color: #6e6265; overflow-wrap: anywhere; }
.itv-itineraire-ext { font-size: 0.8rem; color: #a1959a; flex: none; }

.itv-details { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.itv-details > div { display: flex; flex-direction: column; gap: 1px; }
.itv-details dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8a7d80; font-weight: 600; }
.itv-details dd { margin: 0; font-size: 0.88rem; color: #1b1416; overflow-wrap: anywhere; }
.itv-tel { margin-left: 8px; color: var(--gf-red, #c61e26); }

/* ---------- affectation ---------- */
.itv-affect {
    display: flex;
    gap: 8px;
    padding: 0 14px 12px;
    align-items: center;
}

.itv-select {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #ddd4d3;
    border-radius: 6px;
    font-size: 0.88rem;
    background-color: #fff;
    color: #1b1416;
}

.itv-btn-affecter {
    flex: none;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background-color: var(--gf-red, #c61e26);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 92px;
}

.itv-btn-affecter:disabled { background-color: #d8cfce; cursor: default; }

/* Le couple liste + bouton passe sur deux lignes sur les petits ecrans. */
@media (max-width: 420px) {
    .itv-affect { flex-wrap: wrap; }
    .itv-btn-affecter { width: 100%; }
}

/* =====================================================================
   Pieces jointes d'intervention (composant InterventionAttachments)
   ===================================================================== */

.pj {
    border: 1px solid #ece7e6;
    border-radius: 7px;
    background-color: #fbf9f8;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pj-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.pj-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6e6265;
}

.pj-count {
    background-color: #e6dedd;
    color: #55494c;
    border-radius: 9px;
    padding: 0 6px;
    font-size: 0.7rem;
    line-height: 16px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* Un <label> et non un <button> : il enveloppe l'InputFile masque, et le clic
   sur le label ouvre le selecteur de fichiers sans JavaScript. */
.pj-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 6px;
    background-color: var(--gf-red, #c61e26);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}

.pj-add.occupe { background-color: #d8cfce; cursor: default; }

.pj-erreur {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    background-color: #fbeceb;
    color: #a3242b;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.pj-vide {
    font-size: 0.82rem;
    color: #8a7d80;
    padding: 4px 0;
}

.pj-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pj-item {
    display: flex;
    align-items: center;
    gap: 9px;
    background-color: #fff;
    border: 1px solid #ece7e6;
    border-radius: 6px;
    padding: 8px 10px;
}

.pj-icone {
    flex: none;
    font-size: 1.15rem;
    color: var(--gf-red, #c61e26);
}

.pj-infos {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

/* Un nom de fichier scanne est souvent tres long : il est tronque plutot que
   de pousser les boutons hors de l'ecran du telephone. */
.pj-nom {
    font-size: 0.85rem;
    color: #1b1416;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pj-meta {
    font-size: 0.73rem;
    color: #8a7d80;
    font-variant-numeric: tabular-nums;
}

.pj-btn {
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid #e0d9d8;
    border-radius: 6px;
    background-color: #fff;
    color: #55494c;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.pj-btn:hover { background-color: #f6f2f1; }
.pj-btn:disabled { opacity: 0.5; cursor: default; }
.pj-btn-suppr:hover { background-color: #fbeceb; color: #a3242b; border-color: #f2d9d9; }

/* =====================================================================
   Parcours terrain : avancement et corrections du technicien
   ===================================================================== */

.itv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Cibles larges : ces boutons sont pressés avec des gants, dans un atelier. */
.itv-action {
    flex: 1 1 auto;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid #e0d9d8;
    border-radius: 7px;
    background-color: #fff;
    color: #1b1416;
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
}

.itv-action:hover { background-color: #f6f2f1; }

.itv-action--primaire {
    background-color: var(--gf-red, #c61e26);
    border-color: var(--gf-red, #c61e26);
    color: #fff;
}

.itv-action--primaire:hover { background-color: #a91a21; }

/* Annulation (2026-10-27) : geste définitif, rouge au trait pour ne pas se confondre avec « Remplir le rapport ». */
.itv-action--danger {
    border-color: var(--gf-red, #c61e26);
    color: var(--gf-red, #c61e26);
}

.itv-action--danger:hover { background-color: #fdeeee; }

.itv-action:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- corrections terrain ---------- */
.ct {
    border: 1px solid #ece7e6;
    border-radius: 7px;
    background-color: #fbf9f8;
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.ct-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ct-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6e6265;
}

.ct-verrou {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #8a7d80;
    background-color: #efeae9;
    border-radius: 4px;
    padding: 2px 7px;
}

.ct-note {
    font-size: 0.78rem;
    color: #8a7d80;
    margin: 0;
    line-height: 1.4;
}

/* Client corrigeable par le centre (2026-10-22) */
.ct-client-actuel {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #2b2325;
}
.ct-note--alerte {
    color: #9a3412;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 6px 8px;
}

.ct-champ {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ct-champ > label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a7d80;
}

.ct-input {
    padding: 9px 10px;
    border: 1px solid #ddd4d3;
    border-radius: 6px;
    font-size: 0.9rem;
    background-color: #fff;
    color: #1b1416;
    width: 100%;
}

.ct-input:disabled { background-color: #f2eeed; color: #8a7d80; }

.ct-vide {
    font-size: 0.82rem;
    color: #8a7d80;
    padding: 2px 0;
}

.ct-articles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-article {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #fff;
    border: 1px solid #ece7e6;
    border-radius: 6px;
    padding: 7px 9px;
}

.ct-article-nom {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.ct-article-nom strong { font-size: 0.84rem; color: #1b1416; }

.ct-article-nom small {
    font-size: 0.75rem;
    color: #8a7d80;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-qte {
    flex: none;
    width: 66px;
    padding: 6px 8px;
    border: 1px solid #ddd4d3;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ct-suppr {
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid #e0d9d8;
    border-radius: 6px;
    background-color: #fff;
    color: #8a7d80;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.ct-suppr:hover { background-color: #fbeceb; color: #a3242b; border-color: #f2d9d9; }

.ct-ajout { margin-top: 6px; }

.ct-flash {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.ct-flash.succes { background-color: #e7f4ec; color: #17603d; }
.ct-flash.erreur { background-color: #fbeceb; color: #a3242b; }

.ct-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 7px;
    background-color: var(--gf-red, #c61e26);
    color: #fff;
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
}

.ct-btn:disabled { background-color: #d8cfce; cursor: default; }

/* ---------- activation des alertes push ---------- */
.notif-push {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid #ece7e6;
    background-color: #faf7f6;
}

.notif-push-etat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #6e6265;
    min-width: 0;
}

.notif-push-refus { color: #8a5a10; line-height: 1.35; }

.notif-push-btn {
    flex: none;
    padding: 4px 11px;
    border: 1px solid #ddd4d3;
    border-radius: 5px;
    background-color: #fff;
    color: #55494c;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.notif-push-btn.actif {
    background-color: var(--gf-red, #c61e26);
    border-color: var(--gf-red, #c61e26);
    color: #fff;
}

.notif-push-btn:disabled { opacity: 0.5; cursor: default; }

/* =====================================================================
   Validation des interventions par le chef de centre

   Ecran de decision : il doit se lire vite et ne pas laisser d'ambiguite
   sur ce qui est definitif. Le rouge est donc reserve au classement sans
   suite, et le bouton de validation est le seul plein.
   ===================================================================== */

/* Statuts introduits par l'etape de validation. Meme grammaire que les autres :
   violet pour ce qui est acquis, gris barre pour ce qui est arrete. */
.itv-statut-validee { background-color: #e7f4ec; color: #17603d; }
.itv-statut-annulee { background-color: #f2e8e9; color: #8a2f36; }

.val-intro {
    margin: 0 0 14px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #6b5f62;
}

.val-bloc {
    border-top: 1px solid #ece7e6;
    padding-top: 12px;
    margin-top: 12px;
}

.val-bloc:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.val-bloc-titre {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #2f2a2b;
}

.val-sous-titre {
    margin: 12px 0 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #55494c;
}

/* Deux colonnes des qu'il y a la place ; une seule sur telephone, ou une
   grille serree rendrait les valeurs illisibles. */
.val-dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px 18px;
    margin: 0;
}

.val-dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border-bottom: 1px dotted #efeae9;
}

.val-dl dt {
    font-size: 0.82rem;
    color: #7b6e71;
    font-weight: 500;
}

.val-dl dd {
    margin: 0;
    font-size: 0.88rem;
    color: #2f2a2b;
    text-align: right;
    word-break: break-word;
}

.val-travaux,
.val-texte {
    margin: 6px 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #3c3436;
    white-space: pre-wrap;
}

.val-vide {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: #8b7f82;
    font-style: italic;
}

.val-pdf {
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 7px 13px;
    border-radius: 5px;
    background: #f4efee;
    color: #C61E26;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}

.val-pdf:hover,
.val-pdf:focus { background: #ece5e4; color: #a6171e; }

.val-decision { padding-bottom: 4px; }

.val-avert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 10px;
    padding: 9px 11px;
    border-radius: 5px;
    background: #fdf2f2;
    color: #8a2f36;
    font-size: 0.85rem;
    line-height: 1.45;
}

.val-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #55494c;
}

.val-motif {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd5d4;
    border-radius: 5px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
}

.val-motif:focus {
    outline: 2px solid #C61E26;
    outline-offset: 1px;
    border-color: #C61E26;
}

.val-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.val-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.val-btn:disabled { opacity: 0.55; cursor: default; }

.val-btn-valider { background: #17603d; color: #fff; }
.val-btn-valider:hover:not(:disabled) { background: #114d31; }

.val-btn-annuler { background: #C61E26; color: #fff; }
.val-btn-annuler:hover:not(:disabled) { background: #a6171e; }

.val-btn-neutre { background: #fff; color: #55494c; border-color: #ddd5d4; }
.val-btn-neutre:hover:not(:disabled) { background: #f6f2f1; }

@media (min-width: 620px) {
    .val-dl { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 479px) {
    .val-btn { width: 100%; }
}

/* Affectation figee (rapport finalise) : on remplace le selecteur par une ligne
   d'explication plutot que de le griser sans un mot. */
.itv-affect--figee {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7b6e71;
    font-size: 0.85rem;
    font-style: italic;
}

/* Pastille « n a valider » dans le menu. Rouge : c'est du travail qui bloque la facturation. */
.nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: auto;
    border-radius: 10px;
    background: #C61E26;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

/* Etat X3 sur les cartes du suivi. L'echec seul est en rouge : il demande une action. */
.itv-x3 { display: inline-flex; align-items: center; gap: 4px; color: #4a3f80; }
.itv-x3--echec { color: #C61E26; font-weight: 600; }

/* Anciennete dans la file de validation. */
.itv-depuis { display: inline-flex; align-items: center; gap: 4px; color: #8a5a10; }

/* Renvoi au technicien : ambre partout — c'est du travail a reprendre, pas une erreur. */
.itv-tag-renvoi {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 3px;
    background-color: #fdf0d9;
    color: #8a5a10;
    font-weight: 600;
}

.itv-renvoi {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    padding: 9px 11px;
    border-radius: 5px;
    background: #fdf0d9;
    color: #6b4a0c;
    font-size: 0.85rem;
    line-height: 1.45;
}

.itv-renvoi i { color: #b7791f; margin-top: 2px; }

.val-renvoi {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    padding: 8px 11px;
    border-radius: 5px;
    background: #fdf0d9;
    color: #6b4a0c;
    font-size: 0.85rem;
    line-height: 1.45;
}

.val-renvoi i { color: #b7791f; margin-top: 2px; }

.val-avert--renvoi { background: #fdf0d9; color: #6b4a0c; }
.val-avert--renvoi i { color: #b7791f; }

.val-btn-renvoyer { background: #b7791f; color: #fff; }
.val-btn-renvoyer:hover:not(:disabled) { background: #96621a; }

/* ---------- Tactile : ecrans au doigt (telephones, tablettes) ----------
   `pointer: coarse` cible les appareils tactiles sans toucher au rendu PC a la souris.
   Deux regles : des cibles d'au moins 44 px (recommandation Apple et Android), et des
   champs a 16 px minimum pour que Safari iOS ne zoome pas au focus. */
@media (pointer: coarse) {
    .itv-refresh, .pj-btn, .ct-suppr { width: 44px; height: 44px; }
    .ct-qte { min-height: 44px; width: 78px; }
    .pj-add, .notif-push-btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .notif-mark-all { padding: 10px 8px; }
    .notif-confirm-non, .notif-confirm-oui { min-height: 44px; padding: 8px 16px; }
    .val-btn, .itv-action, .ct-btn, .itv-btn-affecter { min-height: 44px; }
    .itv-select, .ct-input, .val-motif { min-height: 44px; }
    .itv-select, .ct-input, .ct-qte, .val-motif { font-size: 16px; }
}

/* Messages de retour : sur un petit ecran, on y fait defiler la page (voir js/ui.js) ;
   le defilement doux ne doit pas gener les personnes qui l'ont desactive. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Cloche dans la barre mobile (a cote du bouton menu) ---------- */
.mobile-bell { display: flex; align-items: center; margin-left: auto; margin-right: 6px; }
.mobile-bell .btn-notif-bell { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 992px) { .mobile-bell { display: none; } }

/* ---------- Lecteur PDF integre (js/pdf.js) : mobile, iPad, PWA ---------- */
body.gfpdf-ouvert { overflow: hidden; }
.gfpdf {
    position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column;
    background: #2b2626; color: #fff;
}
.gfpdf-barre {
    display: flex; align-items: center; gap: 6px; flex: none;
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px; background: #1b1416;
}
.gfpdf-titre { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfpdf-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
    border: 1px solid rgba(255,255,255,.25); border-radius: 8px; background: rgba(255,255,255,.08);
    color: #fff; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.gfpdf-btn--icone { width: 44px; padding: 0; justify-content: center; }
.gfpdf-btn:active { background: rgba(255,255,255,.18); }
.gfpdf-pages {
    flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 8px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.gfpdf-page { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.4); border-radius: 2px; max-width: 100%; }
.gfpdf-attente { padding: 40px 12px; font-size: 0.9rem; color: #ddd; }

/* ---------- Catalogue negoce HTML (js/catalogue.js) : meme habillage que le lecteur PDF ---------- */
.gfcat-cadre { display: block; flex: 1; min-height: 0; width: 100%; border: 0; background: #dfe0e2; }

/* ---------- Donnees locales et saisies non enregistrees ---------- */
.itv-flash.info { background-color: #eef3fb; color: #1f4f8b; }
.itv-flash .itv-flash-action { margin-left: auto; }

/* ---------- Validation : vue « codes Praxedo » du rapport ---------- */
.val-praxedo { margin-top: 10px; border: 1px solid #ece7e6; border-radius: 6px; background: #faf7f6; font-size: 0.8rem; }
.val-praxedo__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #ece7e6; font-weight: 600; }
.val-praxedo__manque { color: #a3242b; font-weight: 600; }
.val-praxedo__ok { color: #17603d; font-weight: 600; }
.val-praxedo__table { width: 100%; border-collapse: collapse; }
.val-praxedo__table th { text-align: left; font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: #55494c; padding: 4px 10px; width: 38%; vertical-align: top; border-top: 1px solid #f1ecea; }
.val-praxedo__table td { padding: 4px 10px; border-top: 1px solid #f1ecea; word-break: break-word; vertical-align: top; }
.val-praxedo__json-head { padding: 8px 10px; border-top: 1px solid #ece7e6; }
.val-praxedo__json { margin: 0; padding: 10px; max-height: 60vh; overflow: auto; background: #1b1416; color: #f3efee; font-size: 0.72rem; line-height: 1.4; border-radius: 0 0 6px 6px; white-space: pre; }

/* ---------- Administration : deploiement progressif (Praxedo / Mixte / Dataflex complet) ---------- */
.dp-page { max-width: 1400px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.dp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.dp-h1 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 700; color: #1b1416; display: flex; align-items: center; gap: 10px; }
.dp-intro { margin: 0; max-width: 820px; font-size: 0.88rem; color: #55494c; line-height: 1.45; }
.dp-head-actions { display: flex; align-items: center; gap: 8px; }
.dp-periode { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #55494c; }
.dp-select { padding: 7px 28px 7px 10px; border: 1px solid #ddd4d3; border-radius: 6px; background: #fff; font: inherit; font-size: 0.88rem; min-height: 40px; }
.dp-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 6px; border: 1px solid #C61E26; background: #C61E26; color: #fff; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.dp-btn:disabled { opacity: .45; cursor: default; }
.dp-btn--ghost { background: #fff; color: #55494c; border-color: #ddd4d3; }
.dp-alerte { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 6px; background: #fdf0d9; color: #6b4a0c; font-size: 0.85rem; margin-bottom: 10px; line-height: 1.45; }
.dp-alerte code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }
.dp-flash { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 6px; font-size: 0.88rem; margin-bottom: 10px; }
.dp-flash--ok { background: #e7f4ec; color: #17603d; }
.dp-flash--err { background: #fbeceb; color: #a3242b; }
/* Garde-fou du retour en arrière (409) : panneau de confirmation, pas un simple message */
.dp-conflit { border: 1px solid #e8b4b8; border-left: 4px solid #C61E26; background: #fff6f5; color: #4a1b1f; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; font-size: 0.88rem; line-height: 1.45; animation: dpFadeUp .25s ease both; }
.dp-conflit-titre { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; color: #a3242b; margin-bottom: 4px; }
.dp-conflit-titre .bi { font-size: 1.1rem; }
.dp-conflit-texte { margin: 0 0 6px; }
.dp-conflit-liste { margin: 0 0 8px 18px; padding: 0; }
.dp-conflit-liste li { margin: 2px 0; }
.dp-conflit-aide { margin: 0 0 10px; font-size: 0.8rem; color: #7b5559; }
.dp-conflit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-btn--forcer { background: #fff; color: #a3242b; border-color: #C61E26; }
.dp-btn--forcer:not(:disabled):hover { background: #C61E26; color: #fff; }
@keyframes dpFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dp-conflit { animation: none; } }
.dp-state { padding: 30px; text-align: center; color: #7b6e71; }
.dp-state--err { color: #a3242b; }
.dp-resume { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dp-pill { padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: #f0ebea; color: #55494c; }
.dp-pill--mixte { background: #fdf0d9; color: #8a5a10; }
.dp-pill--interne { background: #e7f4ec; color: #17603d; }
.dp-pill--x3 { background: #eceaf5; color: #4a3f80; }
.dp-table-wrap { overflow-x: auto; border: 1px solid #ece7e6; border-radius: 8px; background: #fff; }
.dp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 900px; }
.dp-table th { text-align: left; padding: 10px 12px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: #7b6e71; border-bottom: 1px solid #ece7e6; background: #faf7f6; }
.dp-table td { padding: 10px 12px; border-bottom: 1px solid #f1ecea; vertical-align: top; }
.dp-row--modifie td { background: #fffaf0; }
.dp-row--interne .dp-code { color: #17603d; }
.dp-row--mixte .dp-code { color: #8a5a10; }
.dp-agence { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.dp-code { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.dp-libelle { color: #1b1416; }
.dp-source { font-size: 0.72rem; color: #a1959a; }
.dp-pilotes { min-width: 280px; }
.dp-techs { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-tech { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid #e0d9d8; border-radius: 999px; background: #fff; cursor: pointer; font-size: 0.8rem; min-height: 34px; }
.dp-tech--pilote { border-color: #17603d; background: #e7f4ec; color: #17603d; }
.dp-tech--inactif { opacity: .5; }
.dp-tech small { color: #8b7f82; font-family: ui-monospace, Consolas, monospace; }
.dp-compte { display: block; margin-top: 6px; font-size: 0.75rem; color: #7b6e71; }
.dp-vide { color: #8b7f82; font-style: italic; }
.dp-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.dp-stats { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.dp-stat { font-variant-numeric: tabular-nums; font-weight: 600; }
.dp-stat--interne { color: #17603d; }
.dp-stat--praxedo { color: #55494c; }
.dp-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 120px; }
.dp-note { margin: 12px 0 0; font-size: 0.8rem; color: #7b6e71; line-height: 1.45; }
@media (pointer: coarse) { .dp-tech { min-height: 44px; } .dp-select { min-height: 44px; font-size: 16px; } }

/* ---------- Mes interventions : groupes (aujourd hui, a terminer, a venir, terminees repliees) ---------- */
.itv-groupe { list-style: none; display: flex; align-items: center; gap: .5rem; padding: .9rem .25rem .35rem; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
.itv-groupe:first-child { padding-top: .25rem; }
.itv-groupe__nb { font-size: .72rem; font-weight: 700; background: #eef0f3; color: #374151; border-radius: 999px; padding: .1rem .5rem; }
.itv-groupe__btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .25rem; border: none; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.itv-date--jour { color: #C61E26; font-weight: 700; }

/* ---------- Validation : lien vers la fiche dans le bandeau de succes ---------- */
.itv-flash__lien { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* ── Correction d'une intervention terminée (Mes interventions, 2026-10-08) ── */
.itv-correction { flex-direction: column; }
.itv-correction > i { display: none; }
.itv-correction__corps { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.itv-correction__label { font-weight: 600; font-size: .82rem; margin-top: 4px; }
.itv-correction__motif { width: 100%; min-height: 56px; font-size: 16px; resize: vertical; }
.itv-correction__actions { margin: 4px 0 0; }

/* Mes interventions : bouton de création et pastille d'origine (2026-10-22) */
.itv-creer { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #C61E26; background: #fff; color: #C61E26; font-weight: 600; font-size: 0.9rem; text-decoration: none; margin-left: auto; margin-right: 8px; }
.itv-creer:hover { background: #C61E26; color: #fff; }
.itv-legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.78rem; color: #6b7280; margin: -4px 0 10px; }
.itv-legende > span { display: inline-flex; align-items: center; gap: 5px; }
.itv-origine { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; flex: none; margin-right: 6px; vertical-align: middle; }
.itv-origine--chef_centre { background: #C61E26; }
.itv-origine--agence { background: #ea580c; }
.itv-origine--technicien { background: #2563eb; }
/* Tableau de bord technicien : deux boutons dans l'en-tête des interventions (2026-10-22) */
.tk-itv__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* 2026-10-23 : pastille « n avec demande de pièces » du résumé de /admin/deploiement. */
.dp-pill--pieces { background: #ede9fe; color: #5b21b6; }