/* Affichage couleur miniaturisé */
.statut_min {
    width: auto;
    height: auto;
    border-radius: 2.5px;
    font-weight: bold;
    display: inline-block; 
    margin: 3px 1px 3px;
    padding: 1px 2px 0;
    cursor: pointer;
    text-align: center;
}

.statut_min .nom {
    width: auto;
    height: auto;
    margin: 1px 1px 1px;
    padding: 1px 3px 1px;
}

/* Affichage des engins */
.engins {
    column-count: 2;
    width: auto;
    height: auto;
    border-radius: 2.5px;
    font-weight: bold;
    display: inline-block; 
    margin: 3px 2px 3px;
    padding: 3px 5px 0;
    cursor: pointer;
    text-align: center;
}

.engins .nom {
    min-width: 70px;
    width: auto;
    min-height: 50px;
    height: auto;
}

.engins .chrono {
    background-color: #FFF;
    color: #000;
    min-width: 70px;
    width: auto;
    height: auto;
    margin: 3px 2px 3px;
    padding: 1px 3px 1px;
}

.engins .fonction {
    background-color: #FFF;
    color: #000;
    min-width: 70px;
    width: auto;
    height: auto;
    margin: 3px 2px 3px;
    padding: 1px 3px 1px;
}

.engins_min {
    width: auto;
    height: auto;
    border-radius: 2.5px;
    font-weight: bold;
    display: inline-block; 
    margin: 3px 1px 3px;
    padding: 3px 5px 0;
    cursor: pointer;
    text-align: center;
}

.engins_min .nom {
    min-width: 70px;
    width: auto;
    min-height: 25px;
    height: auto;
    margin: 3px 1px 3px;
    padding: 1px 3px 1px;
}

/* Affichage des infrastructures */
.infrastructures {
    width: auto;
    height: auto;
    border-radius: 2.5px;
    font-weight: bold;
    display: inline-block; 
    margin: 3px 2px 3px;
    padding: 3px 5px 0;
    cursor: pointer;
    text-align: center;
}

.infrastructures .nom {
    min-width: 70px;
    width: auto;
    min-height: 50px;
    height: auto;
    margin: 3px 2px 3px;
    padding: 1px 3px 1px;
}

.infrastructures_min {
    width: auto;
    height: auto;
    border-radius: 2.5px;
    font-weight: bold;
    color: #000;
    background-color: #CDCDCD;
    display: inline-block; 
    margin: 3px 1px 3px;
    padding: 3px 5px 0;
    cursor: pointer;
    text-align: center;
}

.infrastructures_min .nom {
    min-width: 70px;
    width: auto;
    min-height: 25px;
    height: auto;
    margin: 3px 1px 3px;
    padding: 1px 3px 1px;
}

.groupements {
    width: auto;
    height: auto;
    border-radius: 2.5px;
    font-weight: bold;
    color: #000;
    background-color: #B8B8B8;
    display: block; 
    margin: 10px 1px 3px;
    padding: 3px 5px 0;
    cursor: default;
    text-align: center;
}

.groupements .nom {
    min-width: 70px;
    width: auto;
    min-height: 25px;
    height: auto;
    margin: 3px 1px 3px;
    padding: 1px 3px 1px;
}

/* Affichage des services */
.services {
    width: auto;
    height: auto;
    border-radius: 2.5px;
    font-weight: bold;
    display: inline-block; 
    margin: 3px 2px 3px;
    padding: 3px 5px 0;
    cursor: pointer;
    text-align: center;
}

.services .nom {
    min-width: 70px;
    width: auto;
    min-height: 25px;
    height: auto;
    margin: 3px 2px 3px;
    padding: 1px 3px 1px;
}

/* Affichage des personnels */
.personnels {
    width: 100%;
    height: auto;
    border-radius: 1.5px;
    font-weight: bold;
    display: inline-block; 
    margin: 0.5px 2px 0.5px;
    padding: 3px 5px 0;
    cursor: default;
}

.personnels .nom {
    width: auto;
    min-height: 25px;
    height: auto;
    margin: 3px 2px 3px;
    padding: 1px 3px 1px;
}

/* Affichage du planning */
.planning {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    line-height: 0;
    font-size: 0.75rem;
    background-color: #EBEDF3;
    border-radius: 0.42rem;
    -webkit-box-shadow: none;
    box-shadow: none; 
    cursor: help;
}

.planning .planning-nd {
    font-weight: bold;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    -webkit-transition: width 0.6s ease;
    transition: width 0.6s ease;
}

.planning .planning-gar {
    font-weight: bold;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    -webkit-transition: width 0.6s ease;
    transition: width 0.6s ease;
}

/* Modification du planning */
.modif_garde {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent; 
    margin: 3px 2px 3px;
    padding: 0.65rem 1rem;
    color: #000;
    background-color: #EAF016;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
    border-radius: 0.42rem;
    cursor: pointer;
}

.modif_planning {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent; 
    margin: 3px 20px 3px;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
    border-radius: 0.42rem;
    cursor: pointer;
}

.modif_planning_disabled {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent; 
    margin: 3px 20px 3px;
    padding: 0.65rem 1rem;
    opacity: 0.6;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
    border-radius: 0.42rem;
    cursor: not-allowed;
}

/* Numéro de l'intervention */
.numero_inter {
    text-align: center;
    height: auto;
    padding: 5px 25px; 
    color: #000; 
    background: #CECECE; 
    border-radius: 2.5px; 
}

/* Affichage des moyens sélectionnés sur la gestion des moyens */
.infrastructure_selectionne {
    min-width: 100%;
    height: auto;
    border-radius: 2.5px;
    font-weight: bold;
    color: #000;
    background-color: #CDCDCD;
    display: inline-block; 
    margin: 3px 2px 3px;
    padding: 3px 2px 0;
    text-align: center;
    vertical-align: middle;
}

.infrastructure_selectionne .nom {
    width: auto;
    height: auto;
}

.moyens_selectionne {
    min-width: 49%;
    height: auto;
    border-radius: 2.5px;
    font-weight: bold;
    display: inline-block; 
    margin: 3px 2px 3px;
    padding: 3px 2px 0;
    text-align: center;
    vertical-align: middle;
}

.moyens_selectionne .engin {
    column-count: 3;
    width: auto;
    height: auto;
}

.moyens_selectionne .effectif {
    column-count: 2;
    background-color: #FFF;
    color: #000;
    font-weight: normal;
    width: auto;
    height: auto;
    margin: 3px 2px 3px;
    padding: 1px 3px 1px;
    cursor: pointer;
}

.moyens_selectionne .param {
    background-color: #D5D5D5;
    width: auto;
    height: auto;
    margin: 3px 2px 3px;
    padding: 1px 3px 1px;
}

/* Affichage des moyens déjà engagés sur la gestion des moyens */
.moyens_engages {
    min-width: 48%;
    height: auto;
    border-radius: 2.5px;
    font-weight: bold;
    color: #000;
    background-color: #CDCDCD;
    display: inline-block; 
    margin: 3px 2px 3px;
    padding: 3px 2px 0;
    text-align: center;
    vertical-align: middle;
}

.moyens_engages .infrastructure {
    width: auto;
    height: auto;
}

.moyens_engages .liste_engins {
    background-color: #FFF;
    color: #000;
    width: auto;
    height: auto;
    margin: 3px 2px 3px;
    padding: 1px 3px 1px;
}

/* Commande de déclenchement */
div.commande_dcpj {
    width:100%;   
    height: auto;
    overflow: auto;
    border: 1px solid #000000;
    border-radius: 5px;
    background: #EAEBEB;
    font-size: 14px;
}

/* Fiche de départ */
div.fiche_depart {
    width: 100%;   
    height: auto;
    overflow: auto;
    border: 1px solid #737373;
    border-radius: 5px;
    background: #F2F2F2;
    padding: 5px 10px 5px;
}
/* Attelage : encadrement du tracte et de son porteur */
.attelage {
    display: inline-block;
    border: 2px dashed #B5B5C3;
    border-radius: 5px;
    background: none;
    padding: 0 2px;
    margin: 0 1px;
}
.attelage_lien {
    display: inline-block;
    width: 14px;
    height: 4px;
    background-color: #B5B5C3;
    border-radius: 2px;
    vertical-align: top;
    margin: 20px -2px 0;
}

/* Attelage dont le porteur vient d'un autre centre */
.attelage_bloc {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: start;
    align-items: center;
}

.attelage_cadre_haut {
    border: 2px dashed #B5B5C3;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    padding: 0 2px;
    text-align: center;
}

.attelage_cadre_bas {
    border: 2px dashed #B5B5C3;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    padding: 0 2px;
    text-align: center;
    position: relative;
}

.attelage_cadre_bas::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    margin-left: -2px;
    width: 4px;
    height: 14px;
    background-color: #B5B5C3;
    border-radius: 2px;
}

.attelage_reste {
    text-align: left;
}

/* Une ligne par centre dans le synoptique des interventions */
.itv_rangee {
    display: block;
}

/* Synoptique des interventions : une ligne par groupe, une ligne par centre */
.synoptique_engins {
    padding-left: 18px;
}

.synoptique_engins .engins .nom {
    break-inside: avoid;
}

/* Cartes d'une ligne centrees verticalement : carte du CS ou du groupe,
   engins et attelages, trait d'attelage compris */
.synoptique_engins .engins,
.synoptique_engins .infrastructures,
.synoptique_engins .groupes,
.synoptique_engins .attelage,
.synoptique_engins .attelage_lien {
    vertical-align: middle;
}

.synoptique_engins .attelage_lien {
    margin: 0 -2px;
}

/* Un engin tracte ou un lot n'a pas d'equipage : une seule colonne */
.synoptique_engins .engins_tracte {
    column-count: 1;
}

/* Centre d'un engin, dans sa carte, quand l'engin est dans un groupe */
.engins_centre {
    display: inline-block;
    margin: 2px 0 1px;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 10px;
    line-height: 15px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
    cursor: default;
}

.engins_centre[onclick] {
    cursor: pointer;
}

/* Groupe : seul sur sa ligne, carte dans la couleur du secteur, leger fond
   de cette couleur derriere ses engins et cadre en pointilles */
.groupe_rangee {
    display: block;
    width: fit-content;
    max-width: 100%;
    border: 2px dashed #7E8299;
    border-radius: 6px;
    padding: 0 4px;
    margin: 4px 0 6px;
}

.groupes {
    width: auto;
    height: auto;
    border-radius: 2.5px;
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
    margin: 3px 2px 3px;
    padding: 3px 5px 0;
    cursor: default;
    text-align: center;
}

.groupes.cliquable {
    cursor: pointer;
}

.groupes .nom {
    min-width: 70px;
    max-width: 140px;
    width: auto;
    min-height: 50px;
    height: auto;
    margin: 3px 2px 3px;
    padding: 1px 3px 1px;
    overflow-wrap: anywhere;
}

/* Synoptique des interventions du CTA : un engin engage (ou un specialiste) se glisse sur la
   ligne d'un autre groupe de son intervention pour l'y placer. Pendant le glissement, sa carte
   s'estompe, les groupes ou le lacher passent en trait plein et celui sous le pointeur ressort */
.synoptique_engins .glisse_en_cours {
    opacity: .35;
}

.synoptique_glisser .groupe_rangee.groupe_cible {
    border-style: solid;
}

.synoptique_glisser .groupe_rangee.groupe_survol {
    box-shadow: 0 0 0 4px rgba(54, 153, 255, .35);
}

.synoptique_glisser .groupe_rangee.groupe_survol::after {
    content: "Placer dans ce groupe";
    display: inline-block;
    vertical-align: middle;
    margin: 0 6px;
    padding: 3px 10px;
    border-radius: 12px;
    background-color: #3699FF;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
}

/* Specialiste engage : carte fine et arrondie, « Identite (specialite) ».
   Ceux qui n'ont pas de groupe forment la premiere ligne du synoptique. */
.synoptique_engins .specialistes_rangee {
    display: block;
    margin-bottom: 4px;
}

.specialiste_carte {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 14px;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    margin: 3px 2px;
    padding: 5px 12px 5px 9px;
    cursor: default;
}

.specialiste_carte.cliquable {
    cursor: pointer;
}

.specialiste_carte i {
    font-size: 1.1rem;
}

/* Lien colle dans une consigne : un bouton plutot qu'une adresse qui deborde */
.consigne_lien {
    white-space: nowrap;
    margin: 2px 0;
}

/* Creation d'une intervention : a gauche le requerant, la localisation et la nature (depart type
   en cartes d'engins, observations) ; a droite la carte (centre de la rue de l'adresse choisie, ou
   point place d'un clic) et les services publics ; consignes en bandeau a cote des boutons */
.creation_modal .modal-content {
    border-radius: 12px;
}

.creation_titre {
    display: flex;
    align-items: center;
    gap: 14px;
}

.creation_titre_icone {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 16px;
}

.creation_titre_icone i {
    color: inherit;
}

.creation_corps {
    padding: 20px;
    background: #F3F6F9;
}

.creation_grille {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.creation_bloc {
    padding: 18px 20px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 0 20px 0 rgba(82, 63, 105, 0.04);
}

.creation_bloc + .creation_bloc {
    margin-top: 16px;
}

.creation_bloc_titre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #181C32;
    font-size: 14px;
    font-weight: 700;
}

.creation_bloc_titre > span {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 12px;
    font-weight: 700;
}

.creation_bloc_titre > span i {
    color: inherit;
    font-size: 11px;
}

.creation_bloc label {
    margin-bottom: 5px;
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
}

.creation_bloc .form-group {
    margin-bottom: 14px;
}

.creation_fonds {
    margin-left: auto;
}

.creation_carte {
    position: relative;
    z-index: 0;
    height: 380px;
    border-radius: 8px;
    background: #CCEDFF;
}

/* Un clic sur la carte place le repere : curseur en croix, sauf pendant un deplacement */
.creation_carte.leaflet-grab {
    cursor: crosshair;
}

.leaflet-dragging .creation_carte.leaflet-grab {
    cursor: grabbing;
}

.creation_carte_etat {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 12px;
    line-height: 1.45;
}

.creation_carte_etat i {
    margin-top: 2px;
    color: inherit;
}

.creation_carte_etat a {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}

.creation_carte_etat_precise {
    background: #C9F7F5;
    color: #0B8F88;
}

.creation_carte_etat_alerte {
    background: #FFF4DE;
    color: #B37A00;
}

/* Depart type : une ligne discrete par engin (nom aux couleurs du statut SE, fonction et centre,
   distance et delai d'arrivee), puis les fonctions sans engin disponible */
.creation_depart {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.creation_engin {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 8px 4px 4px;
    border-radius: 6px;
    background: #F3F6F9;
    font-size: 12px;
}

.creation_engin_nom {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}

.creation_engin_nom i {
    color: inherit;
    font-size: 10px;
}

.creation_engin_details {
    min-width: 0;
    overflow: hidden;
    color: #7E8299;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creation_engin_trajet {
    flex: none;
    margin-left: auto;
    color: #3F4254;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.creation_engin_trajet i {
    margin-right: 5px;
    color: #B5B5C3;
    font-size: 10px;
}

.creation_engin_manquant {
    background: #FFF5F8;
}

.creation_engin_manquant .creation_engin_nom {
    border: 1px dashed #F64E60;
    color: #F64E60;
}

.creation_engin_manquant .creation_engin_details {
    color: #F64E60;
}

.creation_depart_vide {
    padding: 9px 12px;
    border-radius: 8px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 12px;
}

/* Pied : consignes en bandeau a gauche des boutons */
.creation_pied {
    flex-wrap: nowrap;
    gap: 10px;
}

.creation_pied > * {
    margin: 0;
}

.creation_pied .btn {
    flex: none;
}

.creation_consignes_zone {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: auto !important;
}

.creation_consignes {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #B5B5C3;
    font-size: 12px;
    line-height: 1.45;
}

.creation_consignes i {
    color: inherit;
}

.creation_consignes_alerte {
    align-items: flex-start;
    max-height: 110px;
    padding: 8px 12px;
    overflow-y: auto;
    border-radius: 8px;
    background: #FFE2E5;
    color: #F64E60;
}

.creation_consignes_nombre {
    flex: none;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    animation: creation_consignes_clignoter 1.6s ease-in-out infinite;
}

.creation_consignes_nombre i {
    margin-right: 6px;
}

.creation_consignes_liste {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    color: #3F4254;
}

.creation_consigne {
    overflow-wrap: anywhere;
}

.creation_consigne_origine {
    display: inline-block;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 4px;
    background: #ffffff;
    color: #F64E60;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
}

@keyframes creation_consignes_clignoter {
    50% { opacity: 0.35; }
}

#btn_confirm i {
    color: inherit;
}

@media (max-width: 1199px) {
    .creation_grille {
        grid-template-columns: minmax(0, 1fr);
    }

    .creation_pied {
        flex-wrap: wrap;
    }

    .creation_consignes_zone {
        flex-basis: 100%;
    }
}

/* En dessous de 1200 px, modal-xxl n'elargit plus la fenetre : elle prend la largeur de l'ecran */
@media (min-width: 576px) and (max-width: 1199px) {
    .modal-dialog.creation_modal {
        max-width: calc(100% - 32px);
    }
}

/* Gestion des moyens sur une intervention (blocs du formulaire de creation) : moyens selectionnes
   (armement modifiable sur place), ajout de moyens (centre principal d'abord, puis les plus proches,
   distance de chaque engin) et specialistes ; a droite les moyens engages, les services publics a
   prevenir et les consignes ; parametres en tete, appels des bips a cote des boutons */
.gm_outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.gm_outils .btn i {
    color: inherit;
}

.gm_outils .close {
    margin: 0 0 0 6px;
    padding: 0 4px;
}

.gm_grille {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.gm_modal .creation_bloc_titre small {
    margin-left: 4px;
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 500;
}

.gm_vide {
    margin: 0;
    color: #B5B5C3;
    font-size: 12px;
    font-style: italic;
}

/* Filtres : une ligne au-dessus de la liste */
.gm_filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.gm_filtre {
    flex: 1 1 140px;
    min-width: 0;
}

.gm_filtre_large {
    flex-basis: 200px;
}

.gm_filtre_petit {
    flex: 0 0 90px;
}

.gm_filtre .select2-container {
    width: 100% !important;
}

.gm_bascule {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #7E8299;
    font-size: 12px;
    font-weight: 600;
}

/* Moyens a ajouter : une ligne par centre, ses engins avec leur distance */
.gm_centres {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gm_centre {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #F3F6F9;
}

.gm_centre_ferme {
    opacity: 0.6;
}

.gm_centre_tete {
    display: flex;
    flex: 0 0 170px;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 6px;
    padding-top: 2px;
}

.gm_centre_nom {
    color: #3F4254;
    font-size: 12px;
    font-weight: 700;
}

.gm_centre_nom i {
    margin-right: 6px;
    color: #B5B5C3;
    font-size: 11px;
}

.gm_centre_etiquette {
    padding: 0 6px;
    border-radius: 4px;
    background: #E4E6EF;
    color: #7E8299;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
}

.gm_centre_principal {
    background: #C9F7F5;
    color: #0B8F88;
}

.gm_centre_distance {
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
}

.gm_centre_engins {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.gm_engin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.gm_engin:hover {
    filter: brightness(0.93);
}

.gm_engin i {
    color: inherit;
    font-size: 10px;
}

.gm_engin small {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.85;
}

/* Moyens selectionnes : une carte par engin, un poste par ligne (aptitude, puis le personnel,
   modifiable sur place) */
.gm_modal #moyens_selectionnes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 8px;
}

.gm_modal #moyens_selectionnes > .gm_vide,
.gm_se_centre {
    grid-column: 1 / -1;
}

.gm_se_centre {
    margin-top: 2px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.gm_se_centre i {
    margin-right: 6px;
    color: #B5B5C3;
    font-size: 10px;
}

.gm_se {
    min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #F3F6F9;
}

.gm_se_tete {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.gm_se_nom {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
}

.gm_se_nom i {
    color: inherit;
    font-size: 11px;
}

.gm_se_fonction {
    min-width: 0;
    overflow: hidden;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm_se_actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.gm_se_actions i {
    color: #7E8299;
    font-size: 12px;
    cursor: pointer;
}

.gm_se_actions i:hover {
    color: #3F4254;
}

.gm_se_actions .gm_se_prealerte {
    color: #3699FF;
}

.gm_se_actions .gm_se_prealerte_active,
.gm_se_actions .gm_se_retirer {
    color: #F64E60;
}

.gm_se_postes {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.gm_poste {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.gm_poste_aptitude {
    flex: 0 0 72px;
    overflow: hidden;
    color: #3F4254;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm_poste_facultatif .gm_poste_aptitude {
    color: #B5B5C3;
}

.gm_poste_vide:not(.gm_poste_facultatif) .gm_poste_aptitude {
    color: #F64E60;
}

.gm_poste .select2-container {
    flex: 1 1 auto;
    min-width: 0;
}

.gm_poste .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-left: 0.75rem;
    font-size: 12px;
}

.gm_poste_nom {
    flex: 1 1 auto;
    min-width: 0;
    color: #3F4254;
    font-size: 12px;
}

.gm_se_bilan {
    margin-top: 6px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
}

.gm_se_bilan_degrade {
    color: #F64E60;
}

/* Moyens engages : un bloc par centre */
.gm_modal .moyens_engages {
    display: block;
    min-width: 0;
    margin: 0 0 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #F3F6F9;
    text-align: left;
}

.gm_modal .moyens_engages .infrastructure {
    margin: 0 0 4px;
    color: #7E8299;
    font-size: 11px;
    text-transform: uppercase;
}

.gm_modal .moyens_engages .liste_engins {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
}

.gm_modal .gm_engages > p {
    margin: 0;
    color: #B5B5C3;
    font-size: 12px;
    font-weight: 400 !important;
    text-align: left;
}

/* Services publics a prevenir : ceux deja prevenus restent, sans croix ; consignes */
.gm_prevenu .select2-selection__choice__remove {
    display: none;
}

.gm_aide {
    margin-top: 6px;
    color: #B5B5C3;
    font-size: 11px;
}

.gm_consignes {
    max-height: none;
}

/* Pied : appels des bips a gauche des boutons */
.gm_options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

@media (max-width: 1199px) {
    .gm_grille {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .gm_centre {
        flex-direction: column;
    }

    .gm_centre_tete {
        flex-basis: auto;
    }
}

/* Parc roulant : les engins d'un centre se rangent par glisser-deposer (ordre des synoptiques) */
.parc_ordre .engins_min[draggable="true"] {
    cursor: grab;
}

.parc_ordre .parc_ordre_tire {
    opacity: 0.4;
}

/* Parc roulant : un centre se laisse deposer meme vide, et s'allume quand un vehicule le survole */
.parc_ordre {
    min-height: 38px;
    border-radius: 4px;
    transition: background-color .12s, box-shadow .12s;
}

.parc_ordre.parc_ordre_survol {
    background-color: rgba(54, 153, 255, .12);
    box-shadow: inset 0 0 0 2px rgba(54, 153, 255, .55);
}

/* Boite « Vehicules non affectes » : des puces neutres, a glisser vers un centre */
.parc_nouveaux {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.parc_nouveau {
    color: #FFFFFF;
    background-color: #6C7A89;
    cursor: grab;
}

.parc_nouveau .nom small {
    display: block;
    font-weight: 600;
    opacity: .8;
    font-size: .72em;
    margin-top: -2px;
}

.parc_nouveau.parc_ordre_tire {
    opacity: 0.4;
}

/* Tableau de bord : indicateurs du service (un clic ouvre l'onglet concerne), la carte
   operationnelle dessous */
.tdb_indicateurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.tdb_indicateur {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 0 20px 0 rgba(82, 63, 105, 0.05);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tdb_indicateur:hover {
    box-shadow: 0 6px 20px rgba(82, 63, 105, 0.12);
    transform: translateY(-2px);
}

.tdb_indicateur_icone {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 18px;
}

.tdb_indicateur_icone i {
    color: inherit;
}

.tdb_indicateur_texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.tdb_indicateur_texte b {
    color: #181C32;
    font-size: 24px;
    font-weight: 700;
}

.tdb_indicateur_texte span {
    color: #7E8299;
    font-size: 12px;
    font-weight: 500;
}

.tdb_indicateur_danger .tdb_indicateur_icone {
    background: #FFE2E5;
    color: #F64E60;
}

.tdb_indicateur_success .tdb_indicateur_icone {
    background: #C9F7F5;
    color: #1BC5BD;
}

.tdb_indicateur_warning .tdb_indicateur_icone {
    background: #FFF4DE;
    color: #FFA800;
}

.tdb_indicateur_dark .tdb_indicateur_icone {
    background: #EBEDF3;
    color: #3F4254;
}

.tdb_indicateur_info .tdb_indicateur_icone {
    background: #EEE5FF;
    color: #8950FC;
}

.tdb_indicateur_muted .tdb_indicateur_icone {
    background: #F3F6F9;
    color: #B5B5C3;
}

.tdb_indicateur_alerte {
    box-shadow: 0 0 0 2px #F64E60, 0 6px 20px rgba(246, 78, 96, 0.25);
}

.tdb_indicateur_alerte .tdb_indicateur_icone {
    animation: cta_clignote 1.2s ease-in-out infinite;
}

/* Synoptique des interventions (onglet du CTA) : resume en tete, puis une fiche par
   intervention (numero, sinistre, lieu, debut, departs non acquittes, actions) et ses moyens */
.syn_resume {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.syn_resume span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 12px;
    font-weight: 500;
}

.syn_resume b {
    color: #3F4254;
    font-weight: 700;
}

.syn_liste {
    padding-top: 18px;
}

.syn_aucune {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 0;
    color: #B5B5C3;
    font-size: 13px;
    font-weight: 500;
}

.syn_aucune i {
    color: #1BC5BD;
    font-size: 26px;
}

.syn_inter {
    margin-bottom: 16px;
    border: 1px solid #EBEDF3;
    border-left: 4px solid #B5B5C3;
    border-radius: 8px;
    background: #ffffff;
    transition: box-shadow 0.15s ease;
}

.syn_inter:last-child {
    margin-bottom: 0;
}

.syn_inter:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.syn_inter_danger {
    border-left-color: #F64E60;
}

.syn_inter_primary {
    border-left-color: #3699FF;
}

.syn_inter_warning {
    border-left-color: #FFA800;
}

.syn_inter_info {
    border-left-color: #8950FC;
}

.syn_inter_dark {
    border-left-color: #3F4254;
}

.syn_tete {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #F3F6F9;
}

.syn_principal {
    flex: 1;
    min-width: 0;
}

.syn_titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.syn_numero {
    padding: 2px 10px;
    border-radius: 6px;
    background: #3F4254;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.syn_sinistre {
    color: #181C32;
    font-size: 14px;
    font-weight: 700;
}

.syn_code {
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 600;
}

.syn_infos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 6px;
    color: #7E8299;
    font-size: 12px;
}

.syn_infos i {
    margin-right: 6px;
    color: #B5B5C3;
    font-size: 11px;
}

.syn_actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.syn_separateur {
    width: 1px;
    height: 22px;
    margin: 0 2px;
    background: #EBEDF3;
}

.syn_corps {
    padding: 10px 16px 12px;
}

.syn_partenaires {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.syn_pastille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: default;
}

.syn_pastille[onclick] {
    cursor: pointer;
}

.syn_pastille i {
    font-size: 10px;
}

.syn_vide {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #B5B5C3;
    font-size: 12.5px;
    font-style: italic;
}

.syn_vide .btn {
    font-style: normal;
}

/* Moyens des services partenaires */
.syn_renfort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #EBEDF3;
}

.syn_renfort_service {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    color: #181C32;
    font-size: 11.5px;
    font-weight: 700;
}

.syn_renfort_service i {
    color: #181C32;
    font-size: 10px;
}

.syn_renfort_centre {
    margin-left: 6px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 700;
}

.syn_renfort_engin {
    padding: 2px 8px;
    border-radius: 4px;
    color: #181C32;
    font-size: 11.5px;
    font-weight: 600;
    cursor: default;
}

/* Cartes des engins dans une fiche : sans le retrait des anciennes lignes, un peu arrondies */
.syn_corps .synoptique_engins {
    padding-left: 0;
}

.syn_corps .engins,
.syn_corps .infrastructures,
.syn_corps .groupes {
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

@media (max-width: 991px) {
    .syn_tete {
        flex-direction: column;
    }

    .syn_actions {
        justify-content: flex-start;
    }
}

/* Resume : communications des autres services a traiter */
.syn_resume .syn_resume_urgent {
    background: #FFE2E5;
    color: #D6344A;
}

.syn_resume .syn_resume_urgent b,
.syn_resume .syn_resume_urgent i {
    color: #F64E60;
}

/* Sections : demandes des autres services, puis interventions du service */
.syn_section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: #3F4254;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.syn_section span {
    padding: 1px 8px;
    border-radius: 10px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}

.syn_section_suite {
    margin-top: 24px;
}

/* Demandes et communications des autres services, et interventions creees a leur demande :
   fond et bordure a la couleur du service demandeur */
.syn_demande_sp {
    border-left-color: #F64E60;
    background-color: #FFE2E5;
}

.syn_demande_fdo {
    border-left-color: #3699FF;
    background-color: #E1F0FF;
}

.syn_demande_sam {
    border-left-color: #FFA800;
    background-color: #FFF4DE;
}

.syn_demande_sp .syn_tete,
.syn_demande_fdo .syn_tete,
.syn_demande_sam .syn_tete {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.syn_demande_urgente {
    box-shadow: 0 0 0 2px rgba(246, 78, 96, 0.45);
}

.syn_demande_service i {
    margin-right: 6px;
    color: inherit;
    font-size: 10px;
}

.syn_demande_type {
    color: #181C32;
    font-size: 13px;
    font-weight: 700;
}

.syn_demande_inter {
    margin-top: 8px;
}

.syn_demande_obs {
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.8);
    color: #3F4254;
    font-size: 12.5px;
    white-space: pre-line;
}

/* Synoptique des moyens : engins par groupement et par centre, personnels disponibles a droite */
.moy_corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 24px;
}

.syn_resume .moy_resume_disponible {
    background: #C9F7F5;
    color: #0B8F88;
}

.syn_resume .moy_resume_disponible b {
    color: #0B8F88;
}

.moy_legende {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 18px;
    color: #7E8299;
    font-size: 11.5px;
    font-weight: 500;
}

.moy_legende span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.moy_legende i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.moy_legende b {
    color: #3F4254;
    font-weight: 700;
}

.moy_groupement + .moy_groupement {
    margin-top: 22px;
}

.moy_groupement_titre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #3F4254;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.moy_groupement_titre span {
    padding: 1px 8px;
    border-radius: 10px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.moy_centres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.moy_centre {
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    background: #ffffff;
}

.moy_centre_tete {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}

.moy_centre_nom {
    color: #181C32;
    font-size: 13px;
    font-weight: 700;
}

.moy_centre_nom i {
    margin-right: 6px;
    color: #B5B5C3;
    font-size: 12px;
}

.moy_centre_etat {
    padding: 1px 7px;
    border-radius: 4px;
    background: #C9F7F5;
    color: #0B8F88;
    font-size: 10.5px;
    font-weight: 600;
}

.moy_centre_compte {
    margin-left: auto;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.moy_centre_ferme {
    background: #FAFAFB;
}

.moy_centre_ferme .moy_centre_etat {
    background: #EBEDF3;
    color: #7E8299;
}

.moy_centre_ferme .moy_centre_engins {
    opacity: 0.55;
}

.moy_centre_engins {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px 12px;
}

.moy_engin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    line-height: 16px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.moy_engin:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

.moy_engin i {
    font-size: 11px;
}

.moy_engin b {
    font-weight: 700;
}

.moy_engin small {
    padding: 0 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.85);
    color: #181C32;
    font-size: 10px;
    font-weight: 700;
}

/* Personnels disponibles, par statut */
.moy_personnels {
    position: sticky;
    top: 90px;
    padding: 14px 16px;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    background: #ffffff;
}

.moy_personnels_titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    color: #3F4254;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.moy_personnels_titre span {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #C9F7F5;
    color: #0B8F88;
    font-size: 11px;
    letter-spacing: 0;
    text-align: center;
}

.moy_personnels_vide {
    padding: 14px 12px;
    border-radius: 8px;
    background: #F3F6F9;
    color: #B5B5C3;
    font-size: 12px;
    text-align: center;
}

.moy_statut + .moy_statut {
    margin-top: 12px;
}

.moy_statut.moy_statut_apart {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed #EBEDF3;
}

.moy_statut_titre {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #7E8299;
    font-size: 11.5px;
    font-weight: 600;
}

.moy_statut_titre i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.moy_statut_titre span {
    margin-left: auto;
    color: #B5B5C3;
}

.moy_personnes {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.moy_personne {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 12px;
    background: #F3F6F9;
    color: #3F4254;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}

.moy_personne b {
    color: #7E8299;
    font-size: 10px;
    font-weight: 700;
}

.moy_personne small {
    color: #B5B5C3;
    font-size: 10px;
}

.moy_personnels_note {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed #EBEDF3;
    color: #F64E60;
    font-size: 11.5px;
    font-weight: 600;
}

.moy_personnels_note i {
    margin-right: 6px;
}

@media (max-width: 1199px) {
    .moy_corps {
        grid-template-columns: minmax(0, 1fr);
    }

    .moy_personnels {
        position: static;
    }
}

/* Outils du synoptique des moyens : filtres, recherche, centres fermes ; resume cliquable ;
   barre des engins disponibles de chaque centre */
.moy_outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.moy_recherche {
    width: 240px;
}

.moy_fermes {
    margin: 0;
    color: #7E8299;
    font-size: 12px;
    font-weight: 500;
}

.moy_resume {
    margin-bottom: 14px;
}

.moy_resume span[onclick] {
    cursor: pointer;
}

.moy_resume span[onclick]:hover {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.moy_centre_barre {
    display: block;
    height: 3px;
    background: #F3F6F9;
}

.moy_centre_barre i {
    display: block;
    height: 100%;
    background: #1BC5BD;
}

.moy_centre_ferme .moy_centre_barre i {
    background: #B5B5C3;
}

.moy_filtre_vide {
    padding: 20px 0;
}

/* Interventions cloturees (vue du synoptique des interventions) : filtres, liste paginee */
.hist_filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #F3F6F9;
}

.hist_filtre {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 160px;
}

.hist_filtre_large {
    width: 260px;
}

.hist_filtre label {
    margin: 0;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
}

.hist_resume {
    margin-bottom: 10px;
    color: #7E8299;
    font-size: 12.5px;
}

.hist_resume b {
    color: #3F4254;
}

.hist_table {
    margin-bottom: 14px;
}

.hist_table thead th {
    padding: 8px 10px;
    border-top: none;
    border-bottom: 1px solid #EBEDF3;
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hist_table tbody td {
    padding: 10px;
    border-top: 1px solid #F3F6F9;
    color: #3F4254;
    font-size: 12.5px;
    vertical-align: middle;
}

.hist_table tbody tr:hover td {
    background: #FAFBFC;
}

.hist_sinistre {
    margin-right: 6px;
    font-weight: 600;
}

.hist_table .hist_lieu {
    max-width: 320px;
    color: #7E8299;
}

.hist_date {
    white-space: nowrap;
}

.hist_date small {
    display: block;
    color: #B5B5C3;
    font-size: 11px;
}

.hist_moyens,
.hist_operateur {
    white-space: nowrap;
}

.hist_actions {
    text-align: right;
    white-space: nowrap;
}

/* En-tete du centre operationnel : service (a changer si le compte y a droit), compteurs de la
   session, logiciels, actions et operateur (a la place de la colonne de gauche) */
.cta_entete {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

.cta_entete_logo img {
    display: block;
    height: 38px;
}

.cta_entete_service {
    position: relative;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    white-space: nowrap;
}

.cta_entete_service span {
    color: #B5B5C3;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cta_entete_service b {
    font-size: 14px;
    font-weight: 700;
}

/* Changement de service : menu sous le nom du service */
.cta_service_bouton {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: -5px -10px;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cta_service_bouton:hover,
.cta_service_bouton[aria-expanded="true"] {
    background: #F3F6F9;
}

.cta_service_bouton:focus {
    outline: none;
}

.cta_service_bouton b i {
    margin-left: 6px;
    color: inherit;
    font-size: 10px;
}

.cta_service_menu {
    min-width: 250px;
    padding: 8px 0;
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.cta_service_menu_titre {
    padding: 4px 16px 8px;
    color: #B5B5C3;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cta_service_menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: #3F4254;
    font-size: 13px;
    font-weight: 600;
}

.cta_service_menu .dropdown-item.active,
.cta_service_menu .dropdown-item:active {
    background: #F3F6F9;
    color: #181C32;
}

.cta_service_puce {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.cta_service_menu .fa-check {
    margin-left: auto;
    color: #1BC5BD;
    font-size: 11px;
}

/* Compteurs de la session : pastilles d'une ligne, icone, nombre et libelle */
.cta_entete_compteurs {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0 auto;
}

.cta_compteur {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 15px 0 13px;
    border-radius: 17px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.cta_compteur:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cta_compteur i {
    color: #7E8299;
    font-size: 13px;
}

.cta_compteur b {
    color: #181C32;
    font-size: 14px;
    font-weight: 700;
}

.cta_compteur em {
    font-style: normal;
}

.cta_compteur_info {
    background: #EEE5FF;
}

.cta_compteur_info i {
    color: #8950FC;
}

/* Heure et météo du jeu : une indication, pas une alerte — donc discrète et
   sans curseur cliquable, elle ne mène nulle part. */
.cta_compteur_ambiance {
    background: #F3F6F9;
    cursor: default;
}

.cta_compteur_ambiance i {
    color: #7E8299;
}

.cta_compteur_danger {
    background: #FFE2E5;
}

.cta_compteur_danger i {
    color: #F64E60;
}

.cta_compteur_success {
    background: #C9F7F5;
}

.cta_compteur_success i {
    color: #1BC5BD;
}

@keyframes cta_clignote {
    50% {
        opacity: 0.3;
    }
}

.cta_entete_actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cta_entete_operateur {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 20px;
    border-left: 1px solid #EBEDF3;
    white-space: nowrap;
}

.cta_entete_operateur > span {
    color: #3F4254;
    font-size: 13px;
    font-weight: 600;
}

/* Sans colonne de gauche, le bouton qui l'ouvrait sur mobile ne sert plus */
body:not(.aside-enabled) #kt_aside_mobile_toggle {
    display: none;
}

/* Onglets du centre operationnel : barre fine, onglets a la taille de leur texte */
.cta_onglets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
    padding: 6px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 0 20px 0 rgba(82, 63, 105, 0.05);
}

.cta_onglets .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 7px;
    color: #7E8299;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cta_onglets .nav-link i {
    color: inherit;
    font-size: 13px;
}

.cta_onglets .nav-link:hover {
    background: #F3F6F9;
    color: #3F4254;
}

.cta_onglets .nav-link.active {
    color: #ffffff;
}

.cta_onglets_danger .nav-link.active {
    background: #F64E60;
}

.cta_onglets_primary .nav-link.active {
    background: #3699FF;
}

.cta_onglets_warning .nav-link.active {
    background: #FFA800;
}

/* Service des routes. Le « success » de Metronic (#1BC5BD) tire sur le turquoise
   et passe mal ; on lui substitue un vert franc pour tout ce service. */
.cta_onglets_success .nav-link.active {
    background: #15803D;
}

@media (max-width: 1599px) {
    .cta_compteur em {
        display: none;
    }
}

@media (max-width: 1299px) {
    .cta_compteur {
        padding: 0 12px;
    }

    .cta_compteur span {
        display: none;
    }
}

@media (max-width: 1199px) {
    .cta_entete_actions .btn span {
        display: none;
    }

    .cta_entete_actions .btn i {
        padding-right: 0;
    }
}

@media (max-width: 991px) {
    .cta_entete {
        flex-wrap: wrap;
        gap: 10px 16px;
        margin: 0 -12px;
        padding: 10px 12px;
        background: #ffffff;
    }

    .cta_entete_logo {
        display: none;
    }

    .cta_entete_compteurs {
        order: 5;
        width: 100%;
        margin: 0;
        overflow-x: auto;
    }

    .cta_entete_operateur {
        margin-left: auto;
        padding-left: 0;
        border-left: none;
    }
}

/* Communication inter-services recue : l'ecran scintille en rouge et une fenetre donne les
   actions a mener, au-dessus des fenetres du site ; rappel clignotant dans l'en-tete */
.cta_flash {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1055;
    pointer-events: none;
    background: rgba(246, 78, 96, 0.1);
    box-shadow: inset 0 0 0 8px rgba(246, 78, 96, 0.95), inset 0 0 160px 40px rgba(246, 78, 96, 0.5);
    animation: cta_scintille 0.9s ease-in-out infinite;
}

body.cta_alerte_rouge .cta_flash {
    display: block;
}

@keyframes cta_scintille {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.15;
    }
}

.cta_interservices {
    position: fixed;
    top: 80px;
    left: 50%;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    width: 580px;
    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 110px - var(--cta-dock-espace, 0px));
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 0 0 3px #F64E60, 0 20px 60px rgba(0, 0, 0, 0.35);
    transform: translateX(-50%);
}

.cta_interservices_tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 10px 20px;
    border-radius: 12px 12px 0 0;
    background: #F64E60;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.cta_interservices_tete > span i {
    margin-right: 10px;
    color: #ffffff;
}

.cta_interservices_tete .btn i {
    color: #ffffff;
}

.cta_interservices_tete .btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.cta_interservices_liste {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 20px;
    overflow: auto;
}

.cta_is_item {
    padding: 16px 0;
}

.cta_is_item + .cta_is_item {
    border-top: 1px dashed #EBEDF3;
}

.cta_is_tete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cta_is_type {
    color: #181C32;
    font-size: 13px;
    font-weight: 700;
}

.cta_is_depuis {
    margin-left: auto;
    color: #B5B5C3;
    font-size: 11.5px;
    white-space: nowrap;
}

.cta_is_inter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    color: #181C32;
    font-size: 14px;
}

.cta_is_lieu {
    margin-top: 5px;
    color: #7E8299;
    font-size: 12.5px;
}

.cta_is_lieu i {
    margin-right: 6px;
    color: #B5B5C3;
}

.cta_is_obs {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #F3F6F9;
    color: #3F4254;
    font-size: 12.5px;
    white-space: pre-line;
}

.cta_is_etape {
    margin-top: 10px;
    color: #F64E60;
    font-size: 12.5px;
    font-weight: 600;
}

.cta_is_etape i {
    margin-right: 6px;
    color: #F64E60;
}

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

.cta_interservices_pied {
    padding: 10px 20px 14px;
    border-top: 1px solid #EBEDF3;
    font-size: 12.5px;
    font-weight: 500;
}

.cta_interservices_pied i {
    margin-right: 6px;
}

.cta_compteur_interservices {
    background: #F64E60;
    color: #ffffff;
    animation: cta_clignote 1.2s ease-in-out infinite;
}

.cta_compteur_interservices i,
.cta_compteur_interservices b {
    color: #ffffff;
}

@media (max-width: 991px) {
    .cta_interservices {
        top: 65px;
    }
}

/* Logiciels de reception des appels et de radio, dans l'en-tete : un bouton chacun, qui
   ouvre sous l'en-tete le panneau ou le logiciel sera integre */
.cta_entete_logiciels {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cta_logiciel_bouton {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 14px 0 12px;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    background: #ffffff;
    color: #3F4254;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cta_logiciel_bouton:hover {
    background: #F3F6F9;
}

.cta_logiciel_bouton:focus {
    outline: none;
}

.cta_logiciel_bouton i {
    color: #7E8299;
    font-size: 16px;
}

.cta_logiciel_bouton span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cta_logiciel_bouton b {
    font-size: 12.5px;
    font-weight: 600;
}

.cta_logiciel_bouton small {
    color: #B5B5C3;
    font-size: 10.5px;
    font-weight: 500;
}

.cta_logiciel_bouton.actif {
    border-color: #3699FF;
    background: #E1F0FF;
}

.cta_logiciel_bouton.actif i {
    color: #3699FF;
}

.cta_logiciel_panneau {
    position: fixed;
    top: 75px;
    right: 25px;
    display: flex;
    flex-direction: column;
    width: 420px;
    max-width: calc(100vw - 50px);
    height: calc(100vh - 100px - var(--cta-dock-espace, 0px));
    max-height: 640px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}

.cta_logiciel_panneau_tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 10px 18px;
    border-bottom: 1px solid #EBEDF3;
    color: #181C32;
    font-size: 14px;
    font-weight: 600;
}

.cta_logiciel_panneau_tete i {
    margin-right: 8px;
}

.cta_logiciel_corps {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    overflow: auto;
}

.cta_logiciel_attente {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    min-height: 180px;
    padding: 16px;
    border: 2px dashed #E4E6EF;
    border-radius: 10px;
    color: #B5B5C3;
    font-size: 12px;
    text-align: center;
}

.cta_logiciel_attente i {
    margin-bottom: 8px;
    color: #D1D3E0;
    font-size: 28px;
}

.cta_logiciel_attente b {
    color: #7E8299;
    font-size: 13px;
}

@media (max-width: 1199px) {
    .cta_logiciel_bouton {
        padding: 0 12px;
    }

    .cta_logiciel_bouton span {
        display: none;
    }
}

@media (max-width: 991px) {
    .cta_logiciel_panneau {
        position: static;
        order: 6;
        width: 100%;
        max-width: none;
        height: 60vh;
        border: 1px solid #EBEDF3;
        box-shadow: none;
    }
}

/* Carte operationnelle du CTA : panneau des interventions et des engins, carte du jeu */
.carte_ops_corps {
    display: flex;
    gap: 16px;
    height: 74vh;
    min-height: 460px;
}

.carte_ops_panneau {
    flex: 0 0 300px;
    overflow-y: auto;
    padding: 2px 6px 2px 2px;
}

/* Plan d'affichage propre : les calques de Leaflet (z-index 400 a 800) restent sous
   l'en-tete fixe et ses panneaux */
.carte_cta {
    position: relative;
    z-index: 0;
    flex: 1;
    min-width: 0;
    height: 100%;
    border-radius: 10px;
    background: #CCEDFF;
    box-shadow: inset 0 0 0 1px #EBEDF3;
}

@media (max-width: 991px) {
    .carte_ops_corps {
        flex-direction: column;
        height: auto;
    }

    .carte_ops_panneau {
        flex-basis: auto;
        max-height: 280px;
    }

    .carte_cta {
        height: 60vh;
    }
}

/* Carte du jeu (onglet et carte d'une intervention) */
.carte_jeu {
    font-family: Poppins, Helvetica, sans-serif;
}

/* Fines lignes entre les tuiles sous Chrome (affichage a 125 %, 150 %...) */
.carte_jeu .leaflet-tile-pane {
    isolation: isolate;
}

.carte_jeu img.leaflet-tile {
    mix-blend-mode: plus-lighter;
}

.carte_jeu .leaflet-bar {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.carte_jeu .leaflet-bar a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    color: #3F4254;
}

.carte_icone {
    background: none;
    border: none;
}

/* Intervention : epingle rouge, numero a cote */
.carte_pin {
    position: relative;
    width: 0;
    height: 0;
    cursor: pointer;
}

.carte_pin_tete {
    position: absolute;
    left: -14px;
    top: -34px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 2px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    background: #F64E60;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    transform: rotate(-45deg);
}

.carte_pin_tete i {
    color: #ffffff;
    font-size: 12px;
    transform: rotate(45deg);
}

.carte_pin_numero {
    position: absolute;
    left: 0;
    bottom: 39px;
    transform: translateX(-50%);
    padding: 1px 7px;
    border-radius: 10px;
    background: #ffffff;
    color: #F64E60;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Intervention a la position de son adresse : au centre de la rue */
.carte_pin_numero em {
    display: block;
    margin-top: -2px;
    color: #7E8299;
    font-size: 9px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
}

/* Engin : vignette du synoptique (couleurs de son statut, pictogramme, nom),
   centree sur sa position */
.carte_vehicule {
    position: relative;
    width: 0;
    height: 0;
    cursor: pointer;
}

.carte_vehicule_vignette {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px 2px 6px;
    border: 2px solid #ffffff;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    transform: translate(-50%, -50%);
}

.carte_vehicule_vignette i {
    font-size: 12px;
}

.carte_vehicule_vignette .carte_vehicule_ouest {
    transform: scaleX(-1);
}

.carte_vehicule_choisi .carte_vehicule_vignette {
    box-shadow: 0 0 0 3px #8950FC, 0 2px 8px rgba(0, 0, 0, 0.45);
}

.carte_vehicule_ancien {
    opacity: 0.5;
}

/* Loin : les noms des engins libres et des centres s'effacent */
.carte_loin .carte_vehicule:not(.carte_vehicule_engage):not(.carte_vehicule_choisi) .carte_vehicule_nom,
.carte_loin .carte_caserne_nom {
    display: none;
}

/* Centre : pictogramme, nombre d'engins presents, nom de pres */
.carte_caserne {
    position: relative;
    width: 0;
    height: 0;
    cursor: pointer;
}

.carte_caserne_icone {
    position: absolute;
    left: -13px;
    top: -13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    border: 2px solid #ffffff;
    border-radius: 7px;
    background: #3F4254;
    color: #ffffff;
    font-size: 11px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

.carte_caserne_icone b {
    position: absolute;
    top: -9px;
    right: -10px;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #ffffff;
    border-radius: 9px;
    background: #1BC5BD;
    color: #ffffff;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
}

.carte_caserne_nom {
    position: absolute;
    top: 15px;
    left: 0;
    padding: 0 6px;
    border-radius: 4px;
    background: rgba(63, 66, 84, 0.9);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    transform: translateX(-50%);
}

/* Bulles */
.carte_bulle .leaflet-popup-content-wrapper {
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.carte_bulle .leaflet-popup-content {
    margin: 12px 14px;
    color: #3F4254;
    font-size: 12px;
    line-height: 1.45;
}

.carte_bulle_tete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}

.carte_bulle_tete > i {
    color: #7E8299;
}

.carte_bulle_ligne {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 3px;
}

.carte_bulle_ligne > i {
    flex: none;
    width: 12px;
    text-align: center;
}

.carte_bulle_numero {
    padding: 1px 7px;
    border-radius: 4px;
    background: #FFE2E5;
    color: #F64E60;
    font-weight: 700;
}

.carte_statut {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.carte_bulle_puces {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0 2px;
}

.carte_puce {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px 1px 6px;
    border-radius: 10px;
    background: #F3F6F9;
    color: #3F4254;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.carte_puce i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Bulles modernisées des engins et des centres (2026-11-05) */
.carte_bulle .leaflet-popup-content:has(> .cb) { margin: 0; }
.carte_bulle .leaflet-popup-content-wrapper:has(.cb) { padding: 0; border-radius: 14px; overflow: hidden; }
.cb { width: 290px; box-sizing: border-box; padding: 14px 16px 12px; font-family: Poppins, Helvetica, sans-serif; color: #3F4254; text-align: left; }
.cb + .cb { border-top: 1px solid #EBEDF3; }
.cb_tete { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-right: 14px; }
.cb_avatar { flex: none; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.cb_avatar_centre { background: #1E1E2D; color: #FFFFFF; }
.cb_avatar_groupe { background: #EEE5FF; color: #8950FC; }
.cb_titre { display: flex; flex-direction: column; min-width: 0; }
.cb_titre b { font-size: 15px; font-weight: 700; color: #181C32; line-height: 1.2; }
.cb_titre small { margin-top: 2px; font-size: 11.5px; color: #7E8299; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb_titre small i { margin-right: 5px; font-size: 10px; }
.cb_statut { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.cb_statut i { font-size: 7px; opacity: 0.8; }
.cb_inter { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: #FFF5F8; border: 1px solid #FFE2E5; }
.cb_inter_num { flex: none; padding: 2px 7px; border-radius: 5px; background: #F64E60; color: #FFFFFF; font-size: 11px; font-weight: 700; }
.cb_inter_num i { margin-right: 4px; font-size: 10px; }
.cb_inter_texte { font-size: 12px; font-weight: 600; color: #3F4254; line-height: 1.3; }
.cb_pied { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 11px; color: #A1A5B7; }
.cb_frais { width: 7px; height: 7px; border-radius: 50%; background: #1BC5BD; box-shadow: 0 0 0 3px rgba(27, 197, 189, 0.2); }
.cb_frais_ancien { background: #B5B5C3; box-shadow: none; }
.cb_mode { margin-left: auto; padding: 1px 7px; border-radius: 10px; background: #F3F6F9; color: #7E8299; }
.cb_liste { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.cb_engin { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; background: #F9FAFC; font-size: 12px; }
.cb_engin b { font-weight: 700; color: #181C32; white-space: nowrap; }
.cb_engin_picto { flex: none; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.cb_engin_inter { padding: 0 6px; border-radius: 5px; background: #FFE2E5; color: #F64E60; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.cb_engin_inter i { margin-right: 3px; }
.cb_engin_statut { margin-left: auto; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.cb_vide { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #F9FAFC; color: #A1A5B7; font-size: 12px; }
.cb ~ .carte_gps_bulle { margin: 0 16px 12px; }
.cb_avatar_image { width: 58px; background: #F3F6F9; box-shadow: none; }
.cb_avatar_image img { max-width: 54px; max-height: 40px; }
.cb_engin_image { width: 34px; background: transparent; }
.cb_engin_image img { max-width: 34px; max-height: 24px; }

/* Engins pompiers à l'image de leur type (banque d'icônes du SDMIS, 2026-11-05) : l'image, son nom dessous aux couleurs du statut */
.carte_vehicule_img { position: absolute; left: 0; top: 0; height: 38px; transform: translate(-50%, -70%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
    -webkit-user-drag: none; user-select: none; }
.carte_vehicule_etiquette { position: absolute; left: 0; top: 8px; transform: translateX(-50%); padding: 0 6px; border: 2px solid #FFFFFF; border-radius: 6px;
    font-size: 10.5px; font-weight: 700; line-height: 14px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.carte_vehicule_choisi .carte_vehicule_img { filter: drop-shadow(0 0 4px #8950FC) drop-shadow(0 0 2px #8950FC); }
.carte_vehicule_image .carte_vehicule_nombre { top: -34px; right: auto; left: 8px; }
/* SITAC : symboles en image (banque d'icônes du SDMIS, 2026-11-05) */
.cod_symbole_image { position: relative; width: 0; height: 0; }
.cod_symbole_image img { position: absolute; left: 0; top: 0; height: 40px; max-width: 70px; object-fit: contain; transform: translate(-50%, -70%);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); -webkit-user-drag: none; user-select: none; }
.cod_symbole_image .cod_symbole_nom { position: absolute; left: 0; top: 10px; transform: translateX(-50%); white-space: nowrap;
    border-bottom: 2px solid var(--c, #1F2937); }
.cod_outil .codpc_picto { height: 22px; max-width: 34px; object-fit: contain; display: block; margin: 0 auto 2px; }
.codpc_picto_mini { height: 16px; max-width: 24px; object-fit: contain; vertical-align: middle; margin-right: 4px; }

/* Centres des pompiers et lieux particuliers à l'image de leur bâtiment (2026-11-05) */
.carte_caserne_image { position: relative; width: 0; height: 0; }
.carte_caserne_img { position: absolute; left: 0; top: 0; height: 44px; transform: translate(-50%, -65%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
.carte_caserne_image .carte_caserne_nombre { position: absolute; left: 10px; top: -36px; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid #FFFFFF; border-radius: 9px;
    background: #181C32; color: #FFFFFF; font-size: 10px; line-height: 14px; text-align: center; box-sizing: border-box; }
.carte_caserne_image .carte_caserne_nom { position: absolute; left: 0; top: 14px; transform: translateX(-50%); white-space: nowrap; }
.carte_etare_image { position: relative; width: 0; height: 0; }
.carte_etare_img { position: absolute; left: 0; top: 0; height: 36px; transform: translate(-50%, -65%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
.carte_etare_image .carte_etare_nom { position: absolute; left: 0; top: 12px; transform: translateX(-50%); white-space: nowrap; }
.carte_etare_image.carte_etare_choisi .carte_etare_img { filter: drop-shadow(0 0 4px #8950FC) drop-shadow(0 0 2px #8950FC); }

/* GPS : trajet, distance et delai */
.carte_gps_bulle {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #EBEDF3;
    color: #3F4254;
}

.carte_gps_bulle > i {
    margin-top: 3px;
    color: #8950FC;
}

.carte_gps_bulle_aide a {
    font-weight: 600;
}

.carte_gps_etiquette {
    padding: 1px 8px;
    border: none;
    border-radius: 10px;
    background: #8950FC;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.carte_gps_etiquette.leaflet-tooltip-top:before {
    border-top-color: #8950FC;
}

.carte_gps_controle {
    padding: 7px 12px;
    border-radius: 8px;
    background: #ffffff;
    color: #3F4254;
    font-size: 12.5px;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.carte_gps_controle i {
    margin-right: 6px;
    color: #8950FC;
}

.carte_gps_controle a {
    margin-left: 10px;
    color: #B5B5C3;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

/* Legende */
.carte_legende {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    max-width: 560px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: #3F4254;
    font-size: 11px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.carte_legende span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.carte_legende i {
    display: inline-block;
    flex: none;
}

.carte_legende_pin {
    width: 10px;
    height: 10px;
    border-radius: 50% 50% 50% 0;
    background: #F64E60;
    transform: rotate(-45deg);
}

.carte_legende .carte_legende_engin {
    padding: 1px 4px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 9px;
    line-height: 13px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.carte_legende .carte_legende_engin + .carte_legende_engin {
    margin-left: -3px;
}

.carte_legende_centre {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #3F4254;
}

.carte_legende_trajet {
    width: 16px;
    height: 4px;
    border-radius: 2px;
    background: #8950FC;
}

/* Panneau de gauche : interventions, engins libres */
.carte_panneau_bloc + .carte_panneau_bloc {
    margin-top: 20px;
}

.carte_panneau_titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0 10px;
    color: #3F4254;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.carte_compte {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 11px;
    text-align: center;
}

.carte_panneau_vide {
    padding: 14px 12px;
    border-radius: 8px;
    background: #F3F6F9;
    color: #B5B5C3;
    font-size: 12px;
    text-align: center;
}

.carte_inter_fiche {
    position: relative;
    margin-bottom: 10px;
    padding: 10px 12px 10px 15px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 0 0 1px #EBEDF3;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.carte_inter_fiche::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #F64E60;
}

.carte_inter_fiche:hover {
    box-shadow: 0 0 0 1px #F64E60, 0 4px 12px rgba(0, 0, 0, 0.08);
}

.carte_inter_fiche_non_placee::before {
    background: #FFA800;
}

.carte_inter_haut {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.carte_inter_numero {
    flex: none;
    color: #F64E60;
    font-size: 12px;
    font-weight: 700;
}

.carte_inter_sinistre {
    overflow: hidden;
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carte_inter_adresse {
    margin-top: 2px;
    overflow: hidden;
    color: #7E8299;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carte_inter_adresse i {
    margin-right: 5px;
}

.carte_inter_engins {
    margin-top: 7px;
}

.carte_inter_engin {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 -6px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 11.5px;
}

.carte_inter_engin:hover {
    background: #F3F6F9;
}

.carte_inter_engin > i {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.carte_inter_engin b {
    color: #3F4254;
    font-weight: 600;
}

.carte_inter_engin span {
    margin-left: auto;
    color: #7E8299;
    white-space: nowrap;
}

.carte_en_route {
    color: #8950FC !important;
    font-weight: 600;
}

.carte_sur_place {
    color: #1BC5BD !important;
    font-weight: 600;
}

.carte_inter_vide {
    color: #B5B5C3;
    font-size: 11px;
    font-style: italic;
}

.carte_inter_placer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #EBEDF3;
    color: #FFA800;
    font-size: 11px;
    font-weight: 600;
}

.carte_libres_groupe {
    margin-bottom: 12px;
}

.carte_libres_titre {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.carte_libres_puces {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.carte_libres_puces .carte_puce {
    cursor: pointer;
}

.carte_libres_puces .carte_puce:hover {
    background: #E4E6EF;
}

/* Placement a la main de l'adresse d'une intervention */
.carte_jeu.carte_placement,
.carte_jeu.carte_placement .leaflet-grab,
.carte_jeu.carte_placement .leaflet-interactive {
    cursor: crosshair !important;
}

/* Carte d'une intervention, depuis le synoptique */
.carte_inter_modal {
    overflow: hidden;
}

.carte_inter_entete {
    display: flex;
    align-items: center;
    gap: 12px;
}

.carte_inter_icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #EEE5FF;
    color: #8950FC;
    font-size: 16px;
}

.carte_inter_corps {
    display: flex;
    height: 68vh;
    min-height: 420px;
}

.carte_inter_carte {
    flex: 1;
    min-width: 0;
    background: #CCEDFF;
}

.carte_inter_liste {
    flex: 0 0 300px;
    overflow-y: auto;
    padding: 16px;
    border-left: 1px solid #EBEDF3;
}

.carte_inter_ligne {
    padding: 9px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    cursor: pointer;
}

.carte_inter_ligne:hover {
    background: #F3F6F9;
}

.carte_inter_ligne_absente {
    cursor: default;
}

.carte_inter_ligne_absente:hover {
    background: none;
}

.carte_inter_ligne_haut {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
}

.carte_inter_ligne_haut > i {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.carte_inter_ligne_bas {
    margin: 3px 0 0 17px;
    color: #7E8299;
    font-size: 11.5px;
}

.carte_inter_absent {
    color: #B5B5C3;
    font-style: italic;
}

.carte_inter_note {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #FFF4DE;
    color: #8A6D1F;
    font-size: 11.5px;
}

@media (max-width: 991px) {
    .carte_inter_corps {
        flex-direction: column;
        height: auto;
    }

    .carte_inter_carte {
        height: 50vh;
    }

    .carte_inter_liste {
        flex-basis: auto;
        border-top: 1px solid #EBEDF3;
        border-left: none;
    }
}

/* Carte d'un engin dans les synoptiques : pictogramme et nom centres dans leur colonne, a la
   hauteur de l'equipage et de la fonction (grille plutot que colonnes, sans la marge d'un
   paragraphe qui laissait un vide sous le nom) */
.synoptique_engins .engins {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: stretch;
    column-count: auto;
    padding: 3px 5px;
}

.synoptique_engins .engins .nom {
    display: flex;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    margin: 3px 2px;
}

.synoptique_engins .engins .nom br {
    display: none;
}

.synoptique_engins .engins .chrono,
.synoptique_engins .engins .fonction {
    display: flex;
    grid-column: 2;
    align-items: center;
    justify-content: center;
}

.synoptique_engins .engins_tracte {
    grid-template-columns: auto;
}

/* Boutons bleus des filtres (synoptique des moyens, carte du tableau de bord) : separes */
.moy_filtres.btn-group,
#carte_operationnelle .card-toolbar .btn-group {
    gap: 6px;
}

.moy_filtres.btn-group > .btn,
#carte_operationnelle .card-toolbar .btn-group > .btn {
    margin-left: 0 !important;
    border-radius: 0.42rem !important;
}

#carte_operationnelle .card-toolbar {
    gap: 10px;
}

#carte_operationnelle .card-toolbar .btn-group {
    margin-right: 6px !important;
}

/* Tableau de bord : la carte prend la hauteur qui reste dans la fenetre (cta_carte_ajuster) */
.carte_ops_corps {
    min-height: 300px;
}

/* Synoptique des moyens : indicateurs du tableau de bord en tete (un clic filtre les engins,
   les personnels ouvrent l'annuaire), puis engins et personnels alignes en haut */
.moy_indicateurs {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.moy_indicateurs .tdb_indicateur_actif {
    box-shadow: 0 0 0 2px #3699FF, 0 6px 20px rgba(54, 153, 255, 0.18);
}

.moy_annuaire {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 14px;
}

.moy_annuaire i {
    color: inherit;
    font-size: 12px;
}

/* Fenetres d'un engin (sur une intervention, au synoptique des moyens) : blocs du formulaire de
   creation, engin aux couleurs de son statut en tete, statuts en boutons */
.ge_modal .modal-header {
    align-items: center;
}

.ge_engin {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.ge_engin i {
    color: inherit;
    font-size: 16px;
}

.ge_grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.ge_grille > div > .creation_bloc + .creation_bloc {
    margin-top: 16px;
}

/* Deux blocs cote a cote : leurs hauts s'alignent, l'ecart vient du gap de la grille */
.ge_grille > .creation_bloc + .creation_bloc {
    margin-top: 0;
}

.ge_modal .creation_bloc_titre small {
    margin-left: 4px;
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 500;
}

.ge_modal .creation_bloc_titre small.ge_actuel {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
}

.ge_statuts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ge_statut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.ge_statut b {
    font-weight: 800;
    opacity: 0.8;
}

.ge_statut:hover:not(:disabled) {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

.ge_statut:disabled {
    opacity: 0.45;
    cursor: default;
}

.ge_statut.ge_statut_envoi {
    opacity: 1;
    box-shadow: 0 0 0 2px #3699FF;
}

.ge_commentaire {
    margin-top: 12px;
}

.ge_commentaire.ge_commentaire_haut {
    margin: 0 0 12px;
}

.ge_groupe,
.ge_ligne,
.ge_groupe_nouveau {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ge_groupe select,
.ge_ligne input,
.ge_groupe_nouveau input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
}

.ge_groupe_nouveau {
    margin-top: 8px;
}

.ge_groupe_nouveau input[type="color"] {
    flex: none;
    width: 44px;
    padding: 2px;
}

.ge_lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
}

.ge_lien i {
    color: inherit;
    font-size: 11px;
}

.ge_postes {
    margin-top: 0;
}

.ge_postes .select2-container {
    flex: 1 1 auto;
    min-width: 0;
}

.ge_postes .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-left: 0.75rem;
    font-size: 12px;
}

.ge_note {
    margin-bottom: 10px;
    color: #7E8299;
    font-size: 12px;
}

.ge_infos {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 8px 14px;
    font-size: 12px;
}

.ge_infos > span {
    color: #7E8299;
    font-weight: 600;
}

.ge_infos > b {
    color: #3F4254;
}

.ge_fonctions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ge_fonctions i {
    padding: 1px 7px;
    border-radius: 4px;
    background: #F3F6F9;
    color: #3F4254;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.ge_historique {
    display: flex;
    flex-direction: column;
}

.ge_historique_ligne {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    font-size: 12px;
}

.ge_historique_ligne + .ge_historique_ligne {
    border-top: 1px dashed #EBEDF3;
}

.ge_historique_date {
    display: flex;
    flex: 0 0 72px;
    flex-direction: column;
    color: #3F4254;
    font-weight: 600;
}

.ge_historique_date small {
    color: #B5B5C3;
    font-size: 11px;
}

.ge_historique_texte {
    min-width: 0;
    color: #7E8299;
}

@media (max-width: 767px) {
    .ge_grille {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Annuaire telephonique des personnels (synoptique des moyens) */
.ann_outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.ann_recherche {
    flex: 1 1 240px;
}

.ann_disponibles {
    margin: 0;
    color: #7E8299;
    font-size: 12px;
    font-weight: 500;
}

.ann_liste {
    overflow: hidden;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 0 20px 0 rgba(82, 63, 105, 0.04);
}

.ann_ligne {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto 150px 30px;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
}

.ann_ligne + .ann_ligne {
    border-top: 1px solid #F3F6F9;
}

.ann_ligne[hidden] {
    display: none;
}

.ann_grade {
    padding: 2px 0;
    border-radius: 5px;
    background: #F3F6F9;
    color: #3F4254;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.ann_nom {
    overflow: hidden;
    color: #181C32;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ann_statut {
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.ann_numero {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #3F4254;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.ann_numero i {
    color: #1BC5BD;
    font-size: 11px;
}

.ann_numero_absent {
    color: #B5B5C3;
    font-size: 12px;
    font-weight: 500;
    font-style: italic;
}

.ann_copier {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #F3F6F9;
    color: #7E8299;
    cursor: pointer;
}

.ann_copier:hover {
    background: #E1F0FF;
    color: #3699FF;
}

.ann_copier i {
    color: inherit;
    font-size: 12px;
}

.ann_vide {
    padding: 20px 0 0;
    text-align: center;
}

.ann_aide {
    color: #B5B5C3;
    font-size: 12px;
}

@media (max-width: 767px) {
    .ann_ligne {
        grid-template-columns: 44px minmax(0, 1fr) 30px;
    }

    .ann_statut {
        display: none;
    }

    .ann_numero {
        grid-column: 2;
    }
}

/* Moyens selectionnes : fonction de l'engin changee sur place, liste discrete a la place du
   libelle */
.gm_se_fonction_choix {
    min-width: 0;
    max-width: 100%;
    height: 24px;
    padding: 0 20px 0 6px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23B5B5C3'/%3E%3C/svg%3E") no-repeat right 6px center / 8px 5px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.gm_se_fonction_choix:hover,
.gm_se_fonction_choix:focus {
    border-color: #E4E6EF;
    outline: none;
    background-color: #ffffff;
    color: #3F4254;
}

.gm_se_fonction_choix:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Menu de gauche : bouton « Ouvrir le CTA », propose a tout compte operateur quel que soit le
   profil choisi */
.aside-menu .menu-nav > .menu-item.menu_cta {
    margin: 8px 16px 10px;
}

.aside-menu .menu-nav > .menu-item.menu_cta > .menu-link {
    border-radius: 8px;
    background-color: #F64E60;
}

.aside-menu .menu-nav > .menu-item.menu_cta > .menu-link:hover {
    background-color: #EE2D41;
}

.aside-menu .menu-nav > .menu-item.menu_cta > .menu-link .menu-text,
.aside-menu .menu-nav > .menu-item.menu_cta > .menu-link:hover .menu-text,
.aside-menu .menu-nav > .menu-item.menu_cta > .menu-link .menu-icon i,
.aside-menu .menu-nav > .menu-item.menu_cta > .menu-link:hover .menu-icon i {
    color: #FFFFFF;
    font-weight: 600;
}

/* Fenetre d'un engin engage : etat actuel a cote du titre, etats proposes sur toute la largeur,
   equipage (poste, personnel, telephone) a cote du groupe */
.ge_etat_actuel {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

.ge_modal .ge_statut {
    padding: 8px 14px;
    font-size: 13px;
}

.ge_modal .creation_corps > .creation_bloc + .ge_grille {
    margin-top: 16px;
}

.ge_grille.ge_grille_equipage {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.ge_equipage {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ge_membre {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto 30px;
    align-items: center;
    gap: 8px;
}

.ge_membre_poste {
    overflow: hidden;
    color: #3F4254;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ge_membre_facultatif .ge_membre_poste {
    color: #B5B5C3;
}

.ge_membre_vide:not(.ge_membre_facultatif) .ge_membre_poste {
    color: #F64E60;
}

.ge_membre_nom {
    min-width: 0;
}

.ge_membre_nom .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 32px;
}

.ge_membre_nom .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    padding-left: 0.75rem;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
}

.ge_membre_tel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #E8FFF3;
    color: #0BB783;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ge_membre_tel i {
    color: inherit;
    font-size: 11px;
}

.ge_membre_tel.ge_membre_tel_absent {
    background: transparent;
    color: #B5B5C3;
    font-weight: 500;
    font-style: italic;
}

@media (max-width: 767px) {
    .ge_grille.ge_grille_equipage {
        grid-template-columns: minmax(0, 1fr);
    }

    .ge_membre {
        grid-template-columns: 64px minmax(0, 1fr) 30px;
    }

    .ge_membre_tel {
        grid-column: 2;
    }
}

/* Fenêtre d'un engin : équipage qui partirait maintenant (simulation) ou équipage à bord, aux
   lignes de la fenêtre d'équipage */
.ge_simulation_fonction {
    margin-bottom: 10px;
}

.ge_membre.ge_membre_simule {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    min-height: 26px;
}

.ge_equipier {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ge_equipier_absent {
    display: inline-block;
    padding: 2px 10px;
    border: 1px dashed #F64E60;
    border-radius: 12px;
    color: #F64E60;
    font-size: 12px;
}

.ge_membre_facultatif .ge_equipier_absent {
    border-color: #E4E6EF;
    color: #B5B5C3;
}

.ge_membre_origine {
    color: #B5B5C3;
    font-size: 11px;
    white-space: nowrap;
}

.ge_membre_detail {
    display: flex;
    gap: 6px;
    margin: -2px 0 2px 84px;
    color: #7E8299;
    font-size: 11px;
}

.ge_membre_detail i {
    margin-top: 2px;
    color: #B5B5C3;
    font-size: 10px;
}

.ge_equipage_bilan {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    color: #F64E60;
    font-size: 12px;
    font-weight: 600;
}

.ge_equipage_bilan i {
    color: inherit;
}

.ge_equipage_bilan.ge_equipage_complet {
    color: #0BB783;
}

@media (max-width: 767px) {
    .ge_membre.ge_membre_simule {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .ge_membre_simule .ge_membre_origine {
        grid-column: 2;
    }

    .ge_membre_detail {
        margin-left: 72px;
    }
}

/* Moyens selectionnes : cartes plus larges, nom complet du personnel (sur deux lignes au besoin) */
.gm_modal #moyens_selectionnes {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.gm_poste .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 30px;
}

.gm_poste .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.35;
    white-space: normal;
}

/* Services publics a prevenir (creation, gestion des moyens) : une ligne de puces compactes.
   Les services avec interconnexion y sont toujours ; les autres n'apparaissent que choisis et
   s'ajoutent par « Autre service ». La liste d'origine reste la donnee envoyee. En gestion des
   moyens, un clic ne previent plus : le service passe « a prevenir » (trait pointille) et le
   bouton Prevenir envoie la selection. */
.sp_puces {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp_rangee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.sp_separateur {
    flex: none;
    width: 1px;
    height: 18px;
    margin: 0 2px;
    background: #E4E6EF;
}

.sp_puce {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border: 1px solid #E4E6EF;
    border-radius: 13px;
    background: #FFFFFF;
    color: #7E8299;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.sp_puce i {
    color: #B5B5C3;
    font-size: 10px;
}

.sp_puce:hover {
    border-color: #B5B5C3;
    color: #3F4254;
}

.sp_puce.sp_puce_active {
    border-color: #3F4254;
    background: #3F4254;
    color: #FFFFFF;
}

.sp_puce.sp_puce_active i {
    color: inherit;
}

.sp_puce.sp_puce_active.sp_puce_sp {
    border-color: #F64E60;
    background: #F64E60;
}

.sp_puce.sp_puce_active.sp_puce_fdo {
    border-color: #3699FF;
    background: #3699FF;
}

.sp_puce.sp_puce_active.sp_puce_sam {
    border-color: #FFA800;
    background: #FFA800;
}

/* Service autre qu'interconnexion, choisi : la croix le retire */
.sp_puce .sp_retirer {
    margin-left: 1px;
    opacity: 0.7;
    font-size: 9px;
}

/* A prevenir (gestion des moyens) : rien n'est encore parti */
.sp_puce.sp_puce_attente {
    border-style: dashed;
    border-color: #3F4254;
    background: #F3F6F9;
    color: #3F4254;
}

.sp_puce.sp_puce_attente.sp_puce_sp {
    border-color: #F64E60;
    background: #FFF5F8;
    color: #F64E60;
}

.sp_puce.sp_puce_attente.sp_puce_fdo {
    border-color: #3699FF;
    background: #E1F0FF;
    color: #187DE4;
}

.sp_puce.sp_puce_attente.sp_puce_sam {
    border-color: #FFA800;
    background: #FFF4DE;
    color: #B37700;
}

.sp_puce.sp_puce_attente i {
    color: inherit;
}

/* Deja prevenu : verrouille, coche */
.sp_puce.sp_puce_prevenu {
    cursor: default;
}

.sp_puce.sp_puce_prevenu::after {
    margin-left: 1px;
    font-family: "Font Awesome 5 Free";
    font-size: 9px;
    font-weight: 900;
    content: "\f00c";
}

.sp_puce.sp_puce_envoi {
    opacity: 0.6;
    cursor: wait;
}

/* « Autre service » : ouvre la liste des autres services, sous la ligne */
.sp_puce.sp_ajouter {
    border-style: dashed;
    color: #7E8299;
}

.sp_puce.sp_ajouter.sp_ouvert {
    border-style: solid;
    border-color: #3F4254;
    color: #3F4254;
}

.sp_ajout {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 7px;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    background: #F9FAFC;
}

.sp_ajout_recherche {
    width: 100%;
    height: 28px;
    padding: 3px 9px;
    border: 1px solid #E4E6EF;
    border-radius: 6px;
    background: #FFFFFF;
    color: #3F4254;
    font-size: 12px;
    outline: none;
}

.sp_ajout_recherche:focus {
    border-color: #B5B5C3;
}

.sp_ajout_liste {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 104px;
    overflow-y: auto;
}

.sp_ajout_vide {
    color: #B5B5C3;
    font-size: 11px;
}

/* Gestion des moyens : envoi de la selection, apres confirmation */
.sp_confirmer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.sp_confirmer .btn {
    padding: 2px 10px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 18px;
}

.sp_aide {
    color: #B5B5C3;
    font-size: 11px;
}

/* Engagement de specialistes : puces fines, comme les engins a ajouter */
.gm_specialistes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.gm_specialiste small {
    font-weight: 600;
}

/* Notifications du centre operationnel : nouvelles lignes de main courante, en bas a droite ; un
   clic ouvre la main courante de l'intervention */
#cta_notifications {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1070;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 340px;
    max-width: calc(100vw - 40px);
    pointer-events: none;
}

.cta_notification {
    padding: 10px 12px;
    border-left: 4px solid #3699FF;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    pointer-events: auto;
    animation: cta_notification_entree 0.25s ease;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.12s ease;
}

.cta_notification:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.cta_notification.cta_notification_sortie {
    opacity: 0;
    transform: translateX(24px);
}

.cta_notification_tete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.cta_notification_heure {
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 600;
}

.cta_notification_fermer {
    margin-left: auto;
    padding: 0 2px;
    border: 0;
    background: none;
    color: #B5B5C3;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.cta_notification_fermer:hover {
    color: #3F4254;
}

.cta_notification_texte {
    display: -webkit-box;
    overflow: hidden;
    color: #3F4254;
    font-size: 12px;
    line-height: 1.45;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.cta_notification_texte i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: middle;
}

@keyframes cta_notification_entree {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Ajout de moyens : modeles de groupes, un clic selectionne leurs engins et les groupe sur le
   synoptique */
.gm_modeles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #EBEDF3;
}

.gm_modeles_titre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.gm_modeles_titre i {
    color: #B5B5C3;
}

.gm_modele {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 8px;
    border: 1px solid #E4E6EF;
    border-left: 4px solid var(--gm-modele);
    border-radius: 6px;
    background: #FFFFFF;
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.gm_modele small {
    padding: 0 6px;
    border-radius: 8px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 10px;
    font-weight: 700;
}

.gm_modele:hover {
    background: #F3F6F9;
}

.gm_modele.gm_modele_envoi {
    opacity: 0.55;
    cursor: wait;
}

/* Gestion des personnels : une ligne par personne (identite et contacts, affectation, droits,
   aptitudes et specialites, actions), fenetres d'ajout et de modification */
.prs_filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.prs_recherche {
    flex: 1 1 260px;
    max-width: 380px;
}

.prs_filtre {
    width: auto;
    min-width: 170px;
}

.prs_compte {
    margin-bottom: 8px;
    color: #B5B5C3;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

.prs_liste {
    border: 1px solid #EBEDF3;
    border-radius: 10px;
}

.prs_ligne {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(150px, 1.3fr) minmax(170px, 1.3fr) minmax(170px, 1fr) 84px;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
}

.prs_ligne + .prs_ligne {
    border-top: 1px solid #F3F6F9;
}

.prs_ligne:hover {
    background: #FAFBFC;
}

.prs_ligne_inactive {
    opacity: 0.6;
}

.prs_nom {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #181C32;
    font-size: 13px;
    font-weight: 700;
}

.prs_grade {
    padding: 1px 6px;
    border-radius: 4px;
    background: #F3F6F9;
    color: #3F4254;
    font-size: 10px;
    font-weight: 800;
}

.prs_contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 3px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
}

.prs_contacts i {
    margin-right: 4px;
    color: #B5B5C3;
    font-size: 10px;
}

.prs_uid {
    color: #D1D3E0;
}

.prs_absent {
    color: #B5B5C3;
    font-style: italic;
    font-weight: 500;
}

.prs_affectation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #3F4254;
    font-size: 12px;
}

.prs_droits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.prs_droit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
}

.prs_droit i {
    color: inherit;
    font-size: 10px;
}

.prs_droit_per {
    background: #C9F7F5;
    color: #0B8F88;
}

.prs_droit_ope {
    background: #FFE2E5;
    color: #F64E60;
}

.prs_compteurs {
    display: flex;
    gap: 6px;
}

.prs_compteur {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    padding: 3px 8px;
    border: 1px solid #EBEDF3;
    border-radius: 6px;
    background: #FFFFFF;
    color: #7E8299;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.prs_compteur b {
    color: #181C32;
    font-size: 14px;
}

.prs_compteur:hover {
    border-color: #3699FF;
    color: #3699FF;
}

.prs_actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.prs_vide {
    padding: 30px 0;
    color: #B5B5C3;
    text-align: center;
}

.prs_vide i {
    display: block;
    margin-bottom: 10px;
    color: #E4E6EF;
    font-size: 28px;
}

.prs_bloc_titre {
    margin: 4px 0 10px;
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.prs_cases {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}

.prs_cases small {
    margin-left: 6px;
    color: #B5B5C3;
}

.prs_note {
    margin: -6px 0 14px;
    color: #7E8299;
    font-size: 12px;
}

@media (max-width: 1199px) {
    .prs_ligne {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .prs_actions {
        justify-content: flex-start;
    }
}

/* Donnees geographiques : adresses sur la carte et limites des communes (liste a gauche, carte a droite) */
.geo_corps {
    display: flex;
    gap: 16px;
    /* La barre radio est posee sur la page : sans sa hauteur, le bas de la
       liste (et sa pagination) passe dessous. --cta-dock-espace vaut 0 quand
       la barre n'est pas affichee. */
    height: calc(100vh - 250px - var(--cta-dock-espace, 0px));
    min-height: 480px;
}

.geo_panneau {
    display: flex;
    flex: 0 0 340px;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
}

.geo_progression_texte {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    color: #7E8299;
    font-size: 12px;
    font-weight: 600;
}

.geo_progression_texte b {
    color: #181C32;
}

.geo_progression .progress {
    height: 6px;
    border-radius: 3px;
    background: #F3F6F9;
}

.geo_onglets {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 8px;
    background: #F3F6F9;
}

.geo_onglet {
    flex: 1;
    padding: 5px 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #7E8299;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.geo_onglet b {
    margin-left: 3px;
    color: #B5B5C3;
    font-weight: 700;
}

.geo_onglet.active {
    background: #FFFFFF;
    color: #181C32;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.geo_onglet.active b {
    color: #3699FF;
}

.geo_liste {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid #EBEDF3;
    border-radius: 10px;
}

.geo_ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
}

.geo_ligne + .geo_ligne {
    border-top: 1px solid #F3F6F9;
}

.geo_ligne:hover {
    background: #F3F6F9;
}

.geo_ligne_choisie,
.geo_ligne_choisie:hover {
    background: #E1F0FF;
}

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

.geo_ligne_texte b {
    overflow: hidden;
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.geo_ligne_texte small {
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 600;
}

.geo_ligne_etat {
    flex: 0 0 auto;
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 600;
}

.geo_ligne_etat i {
    color: inherit;
    font-size: 10px;
}

.geo_ligne_etat_ok {
    color: #1BC5BD;
}

.geo_point {
    display: inline-block;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #E4E6EF;
    box-shadow: 0 0 0 1px #D1D3E0;
}

.geo_point_releve {
    background: #3699FF;
}

.geo_point_manuel {
    background: #1BC5BD;
}

/* En cours de trace : le curseur dit que le clic pose un point de la voie,
   pas la position de l'adresse. */
.geo_carte_dessin,
.geo_carte_dessin .leaflet-grab,
.geo_carte_dessin .leaflet-interactive {
    cursor: crosshair !important;
}

/* Le trace de la rue releve en jeu : des points espaces de 60 m, montres pour
   l'adresse choisie. Une couleur a part des deux autres, qui disent d'ou vient
   la POSITION de l'adresse, la ou celle-ci dit la FORME de la rue. */
.geo_point_trace {
    background: #8950FC;
}

/* La zone attribuee par le jeu : le meme ton, en pale. Ce n'est pas le chemin
   de la rue mais l'aire que le jeu nomme ainsi — elle ne doit pas se lire
   comme un trace. */
.geo_point_zone {
    background: #B5A0E8;
}

.geo_point_aucun {
    border-color: #B5B5C3;
    background: #FFFFFF;
    box-shadow: none;
}

.geo_teinte {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.geo_vide {
    padding: 30px 12px;
    color: #B5B5C3;
    font-size: 12px;
    text-align: center;
}

.geo_vide i {
    display: block;
    margin-bottom: 8px;
    font-size: 22px;
}

.geo_carte_bloc {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #CCEDFF;
}

.geo_carte {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

/* Bandeau au-dessus de la carte : element choisi et actions */
.geo_consigne {
    position: absolute;
    top: 12px;
    right: 12px;
    left: 12px;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    color: #3F4254;
    font-size: 13px;
}

.geo_consigne[hidden] {
    display: none;
}

.geo_consigne_icone {
    flex: 0 0 auto;
    font-size: 18px;
}

.geo_consigne_texte {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.geo_consigne_texte small {
    display: block;
    margin-top: 2px;
    color: #7E8299;
    font-size: 11px;
}

.geo_consigne_texte small i {
    font-size: 10px;
}

.geo_consigne_actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.geo_legende {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 500;
    display: flex;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
}

.geo_legende span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Repere de l'adresse choisie : epingle bleue, nom au-dessus */
.geo_repere .carte_pin_tete {
    background: #3699FF;
}

.geo_repere .carte_pin_numero {
    color: #3699FF;
}

/* Trace des limites d'une commune : sommets et milieux des cotes */
.geo_sommet {
    box-sizing: border-box;
    border: 2px solid #181C32;
    border-radius: 3px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.geo_sommet_premier {
    border-color: #0BB783;
    border-radius: 50%;
    background: #C9F7F5;
}

.geo_milieu {
    box-sizing: border-box;
    border: 2px solid #181C32;
    border-radius: 50%;
    background: #FFFFFF;
    opacity: 0.5;
}

.geo_milieu:hover {
    opacity: 1;
}

/* Limites des communes sur les cartes : nom au centre, discret, masque de tres loin */
.carte_commune_nom span {
    display: block;
    transform: translate(-50%, -50%);
    color: #3F4254;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-shadow: 0 0 3px #FFFFFF, 0 0 3px #FFFFFF, 0 0 2px #FFFFFF;
    opacity: 0.8;
}

/* Le relief est sombre comme le satellite : mêmes noms en blanc cerné de noir,
   sans quoi ils deviennent illisibles sur les zones foncées. */
.carte_fond_satellite .carte_commune_nom span,
.carte_fond_vierge .carte_commune_nom span,
.carte_fond_relief .carte_commune_nom span {
    color: #FFFFFF !important;
    text-shadow: 0 0 3px #000000, 0 0 3px #000000;
}

.carte_fond_satellite path.carte_commune,
.carte_fond_vierge path.carte_commune,
.carte_fond_relief path.carte_commune {
    stroke: #FFFFFF;
}

.carte_tres_loin .carte_commune_nom {
    display: none;
}

@media (max-width: 991px) {
    .geo_corps {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .geo_panneau {
        flex: 0 0 auto;
    }

    .geo_liste {
        max-height: 260px;
    }

    .geo_carte_bloc {
        flex: 0 0 auto;
        height: 65vh;
    }

    .geo_consigne {
        flex-wrap: wrap;
    }
}

/* Centre Operationnel Departemental : evenements interservices (liste a gauche, detail a droite :
   SITAC et tchat, interventions rattachees dessous) */
.cod_onglet_compteur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #E4E6EF;
    color: #3F4254;
    font-size: 10px;
    font-weight: 700;
}

.cod_onglet_compteur[hidden] {
    display: none;
}

.cod_onglet_alerte {
    background: #F64E60;
    color: #FFFFFF;
    animation: cod_battement 1.4s ease-in-out infinite;
}

.nav-link.active .cod_onglet_compteur {
    background: rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
}

@keyframes cod_battement {
    50% { box-shadow: 0 0 0 4px rgba(246, 78, 96, 0.25); }
}

.cod {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.cod_colonne {
    flex: 0 0 340px;
    min-width: 0;
}

.cod_detail {
    flex: 1;
    min-width: 0;
}

.cod_evenements {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cod_evenement {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cod_evenement:hover {
    border-color: #D1D3E0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cod_evenement_choisi,
.cod_evenement_choisi:hover {
    border-color: #3699FF;
    background: #F4F9FF;
}

.cod_evenement_clos {
    opacity: 0.65;
}

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

.cod_evenement_texte b {
    color: #181C32;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.cod_evenement_texte small {
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
}

.cod_evenement_pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
}

.cod_nature {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #FFFFFF;
}

.cod_nature i {
    color: #FFFFFF;
    font-size: 14px;
}

.cod_nature_grande {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.cod_nature_grande i {
    font-size: 19px;
}

.cod_service {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 15px;
    vertical-align: 1px;
}

.cod_compte,
.cod_heure {
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 600;
}

.cod_compte i {
    margin-right: 3px;
    color: inherit;
    font-size: 10px;
}

.cod_heure {
    margin-left: auto;
}

.cod_non_lus {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border: 2px solid #FFFFFF;
    border-radius: 10px;
    background: #F64E60;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.cod_separateur {
    margin: 10px 0 2px;
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cod_vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 12px;
    color: #B5B5C3;
    font-size: 12px;
    text-align: center;
}

.cod_vide i {
    color: #E4E6EF;
    font-size: 24px;
}

.cod_vide_petit {
    color: #B5B5C3;
    font-size: 12px;
}

.cod_invite {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 30px;
    text-align: center;
}

.cod_invite > i {
    margin-bottom: 16px;
    color: #E1F0FF;
    font-size: 48px;
}

.cod_invite p {
    max-width: 520px;
    margin-bottom: 20px;
    color: #7E8299;
}

/* En-tete de l'evenement */
.cod_entete {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    padding-top: 18px !important;
    padding-bottom: 14px !important;
}

.cod_titre {
    align-items: flex-start !important;
    gap: 14px;
    min-width: 0;
}

.cod_titre_texte {
    min-width: 0;
}

.cod_titre_texte h3 {
    margin: 0;
    color: #181C32;
    font-size: 17px;
    font-weight: 700;
}

.cod_sous_titre {
    margin-top: 4px;
    color: #7E8299;
    font-size: 12px;
    font-weight: 500;
}

.cod_description {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #F3F6F9;
    color: #3F4254;
    font-size: 12px;
    font-weight: 500;
}

.cod_bloc_titre {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #3F4254;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.cod_bloc_titre i {
    color: #B5B5C3;
    font-size: 12px;
}

.cod_grille {
    display: flex;
    gap: 20px;
}

.cod_sitac_bloc {
    flex: 1.7;
    min-width: 0;
}

.cod_tchat_bloc {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 280px;
}

/* SITAC : outils, carte, elements */
.cod_outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.cod_outil {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid #EBEDF3;
    border-radius: 6px;
    background: #FFFFFF;
    color: #3F4254;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.cod_outil i {
    font-size: 12px;
}

.cod_outil:hover {
    border-color: #D1D3E0;
    background: #F3F6F9;
}

.cod_outil.active {
    border-color: #3699FF;
    background: #E1F0FF;
    color: #3699FF;
}

.cod_outils_separation {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: #EBEDF3;
}

.cod_outils_note {
    color: #7E8299;
    font-size: 12px;
}

.cod_outils_note i {
    margin-right: 6px;
    color: #B5B5C3;
}

.cod_sitac {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #CCEDFF;
}

.cod_carte {
    position: relative;
    z-index: 0;
    height: 500px;
}

/* Pendant un trace, les clics vont a la carte, pas aux elements poses */
.cod_trace_actif .cod_sur_carte {
    pointer-events: none !important;
}

.cod_elements {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.cod_elements_vide {
    color: #B5B5C3;
    font-size: 12px;
}

.cod_element {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 9px;
    border: 1px solid #EBEDF3;
    border-radius: 14px;
    background: #FFFFFF;
    color: #3F4254;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.cod_element:hover {
    border-color: #D1D3E0;
}

.cod_element i {
    font-size: 11px;
}

.cod_element button {
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
}

.cod_element button:hover {
    background: #FFE2E5;
    color: #F64E60;
}

/* Symbole pose sur la carte : pastille a sa couleur, sigle et nom */
.cod_symbole {
    position: relative;
    width: 0;
    height: 0;
}

.cod_symbole_tete {
    position: absolute;
    left: -15px;
    top: -15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

.cod_symbole_tete i {
    color: #FFFFFF;
    font-size: 13px;
}

.cod_symbole_nom {
    position: absolute;
    left: 0;
    top: 17px;
    transform: translateX(-50%);
    padding: 0 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #181C32;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.leaflet-tooltip.cod_etiquette {
    padding: 1px 6px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: #181C32;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.leaflet-tooltip.cod_etiquette::before {
    display: none;
}

.cod_lieu .carte_pin_numero {
    color: #181C32;
}

/* Tchat : les messages les plus recents en tete, par pages de 20 ; la saisie au-dessus, et la
   liste sur toute la hauteur de la colonne (carte et interventions rattachees a gauche) */
.cod_tchat_bloc .cod_saisie {
    margin: 0 0 8px;
}

.cod_plus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px dashed #E4E6EF;
    border-radius: 8px;
    background: #FFFFFF;
    color: #7E8299;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.cod_plus:hover {
    border-color: #B5B5C3;
    color: #3F4254;
}

.cod_plus span {
    color: #B5B5C3;
    font-weight: 500;
}

.cod_tchat {
    flex: 1 1 0;
    height: auto;
    min-height: 360px;
    padding: 10px;
    overflow-y: auto;
    border: 1px solid #EBEDF3;
    border-radius: 10px;
    background: #FAFBFC;
}

.cod_message {
    max-width: 88%;
    margin-bottom: 10px;
}

.cod_message_mien {
    margin-left: auto;
}

.cod_message_tete {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
    color: #3F4254;
    font-size: 11px;
}

.cod_message_tete b {
    font-weight: 700;
}

.cod_message_tete span:last-child {
    margin-left: auto;
    padding-left: 8px;
    color: #B5B5C3;
    font-weight: 600;
}

.cod_message_texte {
    padding: 7px 10px;
    border: 1px solid #EBEDF3;
    border-left-width: 3px;
    border-radius: 8px;
    background: #FFFFFF;
    color: #181C32;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.cod_message_mien .cod_message_texte {
    background: #F4F9FF;
}

.cod_systeme {
    margin: 6px 0 10px;
    color: #7E8299;
    font-size: 11px;
    font-style: italic;
    text-align: center;
}

.cod_systeme span {
    margin-right: 6px;
    color: #B5B5C3;
    font-style: normal;
    font-weight: 600;
}

.cod_saisie {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-top: 8px;
}

.cod_saisie[hidden] {
    display: none;
}

.cod_saisie textarea {
    resize: none;
    font-size: 12px;
}

.cod_saisie .btn-icon {
    flex: 0 0 auto;
    height: auto;
}

/* Interventions rattachees */
.cod_interventions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

.cod_interventions > .btn,
.cod_interventions > .cod_vide_petit {
    grid-column: 1 / -1;
    justify-self: start;
}

.cod_intervention {
    padding: 10px 12px;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    background: #FFFFFF;
}

.cod_intervention_tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #181C32;
    font-size: 12px;
}

.cod_intervention_tete .syn_numero {
    padding: 1px 7px;
    font-size: 11px;
}

.cod_intervention_tete small {
    flex-basis: 100%;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
}

.cod_intervention_tete .cod_terminee {
    color: #B5B5C3;
    font-style: italic;
}

.cod_intervention_actions {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}

.cod_engins {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.cod_engins_vide {
    color: #B5B5C3;
    font-size: 11px;
}

/* Fenetres de creation et de rattachement */
.swal2-container .cod_fenetre .swal2-html-container {
    max-height: 70vh;
}

.cod_formulaire {
    text-align: left;
}

.cod_formulaire label {
    display: block;
    margin: 12px 0 4px;
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
}

.cod_formulaire small {
    display: block;
    margin-top: 6px;
}

.cod_formulaire_ligne {
    display: flex;
    gap: 12px;
}

.cod_formulaire_ligne > div {
    flex: 1;
    min-width: 0;
}

@media (max-width: 1399px) {
    .cod_grille {
        flex-direction: column;
    }

    .cod_tchat {
        flex: none;
        height: 420px;
    }
}

@media (max-width: 991px) {
    .cod {
        flex-direction: column;
        align-items: stretch;
    }

    .cod_colonne {
        flex: 0 0 auto;
    }

    .cod_carte {
        height: 60vh;
    }
}

/* COD : bascule des mains courantes dans le tchat, lignes de main courante des interventions
   rattachees, interventions en pleine largeur avec le synoptique de leurs engins */
.cod_bascule {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 0 auto;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}

.cod_bascule input {
    margin: 0;
}

.cod_mc {
    margin: 0 0 8px;
    padding: 5px 9px;
    border-left: 3px solid #B5B5C3;
    border-radius: 6px;
    background: #F3F6F9;
}

.cod_mc_tete {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #7E8299;
    font-size: 10px;
}

.cod_mc_tete b {
    color: #3F4254;
    font-weight: 700;
}

.cod_mc_tete .cod_mc_nom {
    margin-left: 4px;
}

.cod_mc_tete span:last-child {
    margin-left: auto;
    padding-left: 8px;
    color: #B5B5C3;
    font-weight: 600;
}

.cod_mc_texte {
    margin-top: 2px;
    color: #3F4254;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cod_mc_texte i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: 0;
}

.cod_interventions {
    grid-template-columns: minmax(0, 1fr);
}

.cod_intervention {
    border-left-width: 4px;
}

.cod_synoptique {
    margin-top: 10px;
    overflow-x: auto;
}

.cod_synoptique .engins,
.cod_synoptique .infrastructures,
.cod_synoptique .groupes,
.cod_synoptique .specialiste_carte {
    cursor: default;
}

.cod_intervention .cod_engins_vide {
    margin-top: 8px;
    color: #B5B5C3;
    font-size: 11px;
}

/* Gestion des moyens : description d'un modele de groupe, au survol */
.gm_modele_bulle {
    max-width: 260px;
    text-align: left;
}

.gm_modele_bulle b {
    display: block;
    margin-bottom: 3px;
}

.gm_modele_bulle div {
    margin-bottom: 4px;
}

.gm_modele_bulle small {
    display: block;
    color: #7E8299;
}

/* Carte : centres voisins reunis, les engins de chacun sous son nom */
.carte_bulle_centre + .carte_bulle_centre {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #EBEDF3;
}

/* Gestion des personnels : suppression definitive impossible (encore rattache ailleurs) */
.prs_bloque {
    opacity: 0.45;
}

/* Actions sur la premiere ligne de l'intervention, l'adresse dessous */
.cod_intervention_tete .cod_intervention_actions {
    order: 1;
}

.cod_intervention_tete small {
    order: 2;
}
.tooltip.gm_infobulle .tooltip-inner {
    max-width: 280px;
}

/* Creation depuis une communication interservices : la demande en tete du formulaire */
.creation_interservices {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #FFF4DE;
    color: #3F4254;
    font-size: 12px;
}

.creation_interservices > i {
    margin-top: 2px;
    color: #FFA800;
    font-size: 16px;
}

.creation_interservices small {
    display: block;
    margin-top: 2px;
    color: #7E8299;
    font-size: 11px;
}

/* Main courante d'une intervention : filtres par nature, recherche, ordre au choix. La barre reste
   en place, seule la liste defile, et elle s'affiche a l'endroit ou a l'envers sans etre redessinee */
.mc_titre {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mc_lieu {
    color: #7E8299;
    font-size: 12px;
}

.mc_lieu span::before {
    content: " · ";
}

.mc_corps {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.mc_barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #EBEDF3;
    background: #F3F6F9;
}

.mc_filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mc_filtre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #E4E6EF;
    border-radius: 16px;
    background: #FFFFFF;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
}

.mc_filtre::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mc_couleur, #B5B5C3);
}

.mc_filtre_tout::before {
    display: none;
}

.mc_filtre b {
    padding: 0 5px;
    border-radius: 8px;
    background: #F3F6F9;
    font-size: 10px;
}

.mc_filtre_actif {
    border-color: var(--mc_couleur, #3F4254);
    color: var(--mc_couleur, #3F4254);
    background: #FFFFFF;
    box-shadow: 0 0 0 1px var(--mc_couleur, #3F4254);
}

.mc_filtre_vide {
    opacity: 0.45;
}

.mc_reglages {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc_recherche {
    position: relative;
}

.mc_recherche i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #B5B5C3;
    font-size: 11px;
}

.mc_recherche input {
    width: 240px;
    padding-left: 28px;
}

.mc_liste {
    flex: 1;
    overflow-y: auto;
}

.mc_inverse .mc_paquet {
    display: flex;
    flex-direction: column-reverse;
}

.mc_ligne {
    display: flex;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid #F3F6F9;
    border-left: 3px solid #EBEDF3;
}

.mc_ligne:hover {
    background: #F9FAFC;
}

.mc_ligne_message { border-left-color: #8950FC; }
.mc_ligne_engin { border-left-color: #3699FF; }
.mc_ligne_equipage { border-left-color: #1BC5BD; }
.mc_ligne_depart { border-left-color: #FFA800; }
.mc_ligne_acquittement { border-left-color: #0BB783; }
.mc_ligne_service { border-left-color: #6993FF; }
.mc_ligne_specialiste { border-left-color: #F64E60; }
.mc_ligne_intervention { border-left-color: #7E8299; }

.mc_ligne_message {
    background: #FBFAFF;
}

.mc_heure {
    flex: none;
    width: 56px;
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: right;
}

.mc_heure span {
    display: block;
    color: #B5B5C3;
    font-size: 10px;
    font-weight: 500;
}

.mc_contenu {
    flex: 1;
    min-width: 0;
}

.mc_texte {
    color: #3F4254;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mc_texte p {
    margin-bottom: 4px;
}

.mc_pied {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}

.mc_puce {
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}

.mc_auteur {
    color: #B5B5C3;
    font-size: 11px;
}

.mc_outils {
    flex: none;
    width: 18px;
    color: #B5B5C3;
    text-align: center;
}

.mc_outils i {
    font-size: 12px;
    cursor: pointer;
}

.mc_outils i:hover {
    color: #3699FF;
}

.mc_vide {
    padding: 30px 16px;
    color: #B5B5C3;
    font-size: 13px;
    text-align: center;
}

.mc_pied_fenetre {
    justify-content: space-between;
}

.mc_etat {
    color: #B5B5C3;
    font-size: 11px;
}

@media (max-width: 767px) {
    .mc_recherche input { width: 160px; }
    .mc_heure { width: 46px; font-size: 11px; }
}

/* Main courante : rédaction d'un message dans la fenêtre, sous la liste */
.mc_redaction {
    flex: none;
    padding: 12px 16px 14px;
    border-top: 1px solid #EBEDF3;
    background: #F9FAFC;
}

.mc_redaction_tete {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.mc_redaction_tete b {
    color: #3F4254;
    font-size: 12px;
}

.mc_redaction_tete span {
    color: #B5B5C3;
    font-size: 11px;
}

.mc_redaction .note-editor {
    margin-bottom: 8px;
    background: #FFFFFF;
}

.mc_redaction .note-editor.note-frame {
    border-color: #E4E6EF;
}

.mc_redaction_boutons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.mc_redaction_boutons #mc_supprimer {
    margin-right: auto;
}

/* Opérateurs connectés : un bloc par service, les actifs en tête */
.oc_corps_fenetre {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.oc_liste {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 16px;
}

.oc_resume {
    margin-bottom: 12px;
    color: #7E8299;
    font-size: 12px;
}

.oc_resume b {
    color: #3F4254;
}

.oc_service {
    margin-bottom: 12px;
    border: 1px solid #EBEDF3;
    border-left: 3px solid var(--oc_couleur, #B5B5C3);
    border-radius: 6px;
    overflow: hidden;
}

.oc_service_mien {
    box-shadow: 0 0 0 1px var(--oc_couleur, #B5B5C3);
}

.oc_service_tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    background: #F3F6F9;
}

.oc_service_tete b {
    color: var(--oc_couleur, #3F4254);
    font-size: 12px;
}

.oc_service_tete span {
    color: #B5B5C3;
    font-size: 11px;
}

.oc_operateur {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid #F3F6F9;
}

.oc_point {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: #0BB783;
}

.oc_est_inactif .oc_point {
    background: #FFA800;
}

.oc_est_inactif .oc_nom {
    color: #7E8299;
}

.oc_corps {
    min-width: 0;
}

.oc_nom {
    color: #3F4254;
    font-size: 13px;
    font-weight: 600;
}

.oc_moi {
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 8px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 10px;
    font-weight: 600;
    vertical-align: 1px;
}

.oc_infos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 2px;
    color: #B5B5C3;
    font-size: 11px;
}

.oc_infos i {
    margin-right: 4px;
}

.oc_activite {
    color: #7E8299;
}

.oc_alerte {
    color: #FFA800;
}

.oc_vide {
    padding: 10px 12px;
    color: #B5B5C3;
    font-size: 12px;
}

.oc_pied {
    justify-content: space-between;
}

.oc_note {
    color: #B5B5C3;
    font-size: 11px;
    text-align: left;
}

/* Poste du stationnaire : bandeau du centre, départs, potentiel et interventions du service */
.st_poste {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st_bandeau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(82, 63, 105, 0.08);
}

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

.st_centre_icone {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #F3F6F9;
    color: #7E8299;
}

.st_centre b {
    display: block;
    color: #181C32;
    font-size: 15px;
    line-height: 1.2;
}

.st_centre span {
    color: #B5B5C3;
    font-size: 11px;
}

.st_compteurs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.st_compteur {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
}

.st_compteur i {
    font-size: 12px;
}

.st_compteur b {
    color: #181C32;
    font-size: 15px;
}

.st_compteur.st_vert { border-color: #C9F7F5; background: #F3FBFA; }
.st_compteur.st_vert i, .st_compteur.st_vert b { color: #0BB783; }
.st_compteur.st_rouge { border-color: #FFE2E5; background: #FFF5F6; }
.st_compteur.st_rouge i, .st_compteur.st_rouge b { color: #F64E60; }
.st_compteur.st_jaune { border-color: #FFF4DE; background: #FFFBF3; }
.st_compteur.st_jaune i, .st_compteur.st_jaune b { color: #FFA800; }
.st_compteur.st_bleu { border-color: #E1F0FF; background: #F4FAFF; }
.st_compteur.st_bleu i, .st_compteur.st_bleu b { color: #3699FF; }

.st_heure {
    margin-left: auto;
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 600;
}

.st_bandeau_actions {
    margin-left: auto;
}

.st_grille {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.st_colonne {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.st_bloc {
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(82, 63, 105, 0.08);
    overflow: hidden;
}

.st_bloc_tete {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #EBEDF3;
    color: #181C32;
    font-size: 14px;
    font-weight: 700;
}

.st_bloc_tete > i {
    color: #7E8299;
    font-size: 13px;
}

.st_bloc_tete small {
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 500;
}

.st_bloc_tete .st_bouton {
    margin-left: auto;
}

.st_bloc_corps {
    padding: 12px 16px 16px;
}

.st_depart {
    padding: 12px 16px 14px;
    border-bottom: 1px solid #F3F6F9;
}

.st_depart_tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.st_depart_tete b {
    color: #181C32;
    font-size: 14px;
}

.st_sinistre {
    color: #F64E60;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.st_depart_actions {
    display: flex;
    gap: 12px;
    margin-left: auto;
}

.st_depart_actions a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
}

.st_depart_actions a:hover {
    color: #3699FF;
}

.st_depart_lieu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 2px;
    color: #B5B5C3;
    font-size: 11px;
}

.st_engin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
}

.st_engin_nom {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.st_engin_statut {
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
}

.st_engin_info {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 600;
}

.st_engin_acquitte {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #0BB783;
    font-size: 11px;
    font-weight: 600;
}

.st_engin_boutons {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.st_bouton {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid #E4E6EF;
    border-radius: 6px;
    background: #FFFFFF;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
}

.st_bouton:hover {
    border-color: #B5B5C3;
    color: #3F4254;
}

.st_bouton_alerte {
    border-color: #F64E60;
    background: #F64E60;
    color: #FFFFFF;
}

.st_bouton_alerte:hover {
    border-color: #EE2D41;
    background: #EE2D41;
    color: #FFFFFF;
}

.st_synoptique {
    margin-top: 10px;
    overflow-x: auto;
}

.st_potentiel_bloc {
    padding: 10px 16px 12px;
    border-bottom: 1px solid #F3F6F9;
}

.st_potentiel_tete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.st_potentiel_tete span {
    padding: 0 6px;
    border-radius: 8px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 10px;
}

.st_potentiel_tete.st_vert b { color: #0BB783; }
.st_potentiel_tete.st_rouge b { color: #F64E60; }
.st_potentiel_tete.st_jaune b { color: #FFA800; }
.st_potentiel_tete.st_gris b { color: #7E8299; }

.st_potentiel_engins {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.st_puce {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.st_puce_clic {
    cursor: pointer;
}

.st_table {
    width: 100%;
    font-size: 12px;
}

.st_table th {
    padding: 8px 16px;
    border-bottom: 1px solid #EBEDF3;
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
}

.st_table td {
    padding: 8px 16px;
    border-bottom: 1px solid #F3F6F9;
    color: #3F4254;
    vertical-align: middle;
}

.st_table tr:last-child td {
    border-bottom: 0;
}

.st_table .st_numero {
    color: #181C32;
    font-weight: 700;
}

.st_vide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    color: #B5B5C3;
    font-size: 12px;
}

.st_journal {
    padding: 8px 16px 12px;
    max-height: 320px;
    overflow-y: auto;
    font-size: 12px;
}

@media (max-width: 1199px) {
    .st_grille { grid-template-columns: minmax(0, 1fr); }
}

.st_journal_titre {
    margin: 4px 0 6px;
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
}

/* Poste du stationnaire : interventions aux couleurs du synoptique du CTA, et carte du secteur */
.st_place > .syn_inter {
    margin: 12px 16px;
}

.st_place > .syn_inter:first-child {
    margin-top: 16px;
}

.st_place > .syn_inter:last-child {
    margin-bottom: 16px;
}

/* Un départ du centre attend son acquittement */
.st_inter_alerte {
    border-left-color: #F64E60 !important;
    box-shadow: 0 0 0 1px rgba(246, 78, 96, 0.25);
}

.st_inter_autre .syn_tete {
    padding: 10px 14px;
}

.st_inter_autre .syn_corps {
    opacity: 0.85;
}

/* Les engins du centre, sous le synoptique de l'intervention */
.st_bande {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #EBEDF3;
}

.st_bande .st_engin {
    margin: 0;
}

/* Carte du secteur */
.st_bloc_carte .st_bloc_tete {
    justify-content: flex-start;
}

.st_carte_etat {
    margin-left: auto;
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.st_carte {
    height: 460px;
    border-radius: 0 0 8px 8px;
    background: #CCEDFF;
}

.st_carte .leaflet-control-zoom {
    margin: 0 10px 10px 0;
}

@media (max-width: 991px) {
    .st_carte {
        height: 320px;
    }
}

/* Départ de l'engin, dans sa fenêtre ouverte depuis le poste */
.ge_depart {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.ge_depart_ligne {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3F4254;
    font-size: 13px;
}

.ge_depart_ligne b {
    color: #181C32;
}

.ge_depart_attente {
    color: #F64E60;
}

/* Poste du stationnaire ouvert dans la fenêtre du jeu : ni menu de gauche, ni en-tête */
body.st_jeu {
    background: #EEF0F8;
}

body.st_jeu .wrapper {
    padding: 0 !important;
}

body.st_jeu .content {
    padding: 12px 0 !important;
}

body.st_jeu .container-fluid {
    padding: 0 12px;
}

body.st_jeu .st_carte {
    height: 360px;
}

/* Poste du stationnaire : synoptique des engins du centre et fenêtre d'alerte */
.st_engins {
    padding: 12px 16px;
}

.st_engins .moy_centre {
    border: 0;
}

.st_engins .moy_centre_tete {
    padding: 0 0 6px;
}

.st_engins .moy_centre_engins {
    padding: 10px 0 0;
}

/* La fenêtre d'alerte du poste n'a pas de pied de page */
#st_acq .cta_interservices_liste {
    border-radius: 0 0 12px 12px;
}

/* Poste du stationnaire : engins sur toute la largeur du bloc, et synoptique du personnel */
.st_engins {
    padding: 12px 16px;
}

/* Un seul centre ici : sa carte prend toute la largeur (au CTA, les centres sont en grille) */
.st_engins.moy_centres {
    display: block;
}

.st_engins .moy_centre {
    border: 0;
}

.st_engins .moy_centre_tete {
    padding: 0 0 6px;
}

/* Les vignettes gardent la taille du CTA et se partagent la largeur de leur ligne */
.st_engins .moy_centre_engins {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 2px;
}

.st_engins .moy_engin {
    flex: 1 1 auto;
    justify-content: flex-start;
}

.st_engins .moy_engin small {
    margin-left: auto;
}

.st_bloc .moy_personnels {
    position: static;
    top: auto;
    padding: 12px 16px;
    border: 0;
    border-radius: 0;
}

/* Fenêtre d'un personnel du synoptique des moyens : coordonnées, aptitudes, spécialités */
.per_lignes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.per_ligne {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3F4254;
    font-size: 12.5px;
}

.per_ligne i {
    width: 14px;
    color: #B5B5C3;
    font-size: 11px;
    text-align: center;
}

.per_ligne b {
    color: #181C32;
}

.per_absent {
    color: #B5B5C3;
}

.per_note {
    display: block;
    margin-top: 6px;
    color: #B5B5C3;
    font-size: 11px;
    text-align: center;
}

.per_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.per_chip {
    padding: 3px 9px;
    border-radius: 6px;
    background: #F3F6F9;
    color: #3F4254;
    font-size: 11.5px;
    font-weight: 600;
}

.per_chip_specialite {
    background: #EEE5FF;
    color: #8950FC;
}

/* Les personnels du synoptique et les lignes de l'annuaire s'ouvrent d'un clic */
.moy_personne {
    cursor: pointer;
}

.moy_personne:hover {
    background: #E1F0FF;
}

.ann_ligne_cliquable {
    cursor: pointer;
}

.ann_ligne_cliquable:hover {
    background: #F3F6F9;
}

/* Cartes : engins réunis (pastille du nombre) et engins sur les lieux d'une intervention */
.carte_vehicule_nombre {
    position: absolute;
    top: -9px;
    right: -9px;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #ffffff;
    border-radius: 9px;
    background: #181C32;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

.carte_pin_nombre {
    position: absolute;
    left: 8px;
    top: -40px;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #ffffff;
    border-radius: 9px;
    background: #181C32;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

.carte_bulle_inter {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 4px;
    background: #FFE2E5;
    color: #F64E60;
    font-size: 10.5px;
    font-weight: 700;
}

/* Haut-parleur des alertes (en-tete du CTA, poste du stationnaire) : sons coupes */
.site_sons_bouton.site_sons_coupes,
.site_sons_bouton.site_sons_coupes:hover {
    background-color: #FFE2E5 !important;
    border-color: #FFE2E5 !important;
}

.site_sons_bouton.site_sons_coupes i {
    color: #F64E60 !important;
}

/* Gestion de l'engin : petite carte qui le localise, sous l'historique */
.ge_carte {
    height: 220px;
    overflow: hidden;
    border-radius: 8px;
    background: #CCEDFF;
}

/* Feuille de garde (feuille_garde.php) : un bandeau (centre, jour affiché, compteurs, actions,
   taux de postes pourvus), puis une carte par engin, ses postes dans l'ordre des compétences */
.fg_bandeau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    position: relative;
    margin-bottom: 16px;
    padding: 14px 18px 18px;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(82, 63, 105, 0.08);
    overflow: hidden;
}

.fg_jours {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.fg_jour_fleche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    background: #FFFFFF;
    color: #7E8299;
    font-size: 11px;
    cursor: pointer;
}

.fg_jour_fleche:hover:not(:disabled) {
    background: #F3F6F9;
    color: #3F4254;
}

.fg_jour_fleche:disabled {
    opacity: 0.4;
    cursor: default;
}

.fg_jour_date {
    height: 32px;
    padding: 0 10px;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    background: #FFFFFF;
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
}

.fg_jour_date:focus {
    border-color: #B5B5C3;
    outline: none;
}

.fg_etiquette {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.fg_etiquette i {
    font-size: 10px;
    color: inherit;
}

.fg_etiquette_courante {
    background: #C9F7F5;
    color: #0BB783;
}

.fg_etiquette_courante i {
    font-size: 7px;
    animation: cta_clignote 2s ease-in-out infinite;
}

.fg_progression {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: #F3F6F9;
}

.fg_progression span {
    display: block;
    height: 100%;
    background: #F64E60;
    transition: width 0.3s ease;
}

.fg_progression_vert span { background: #1BC5BD; }
.fg_progression_jaune span { background: #FFA800; }

.fg_aucune {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 16px;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(82, 63, 105, 0.08);
    color: #B5B5C3;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.fg_aucune i {
    color: #B5B5C3;
    font-size: 26px;
}

.fg_aucune b {
    color: #3F4254;
    font-size: 14px;
}

.fg_grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    align-items: start;
    gap: 16px;
}

.fg_carte {
    min-width: 0;
    border-left: 4px solid #B5B5C3;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(82, 63, 105, 0.08);
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.fg_carte:hover {
    box-shadow: 0 4px 20px rgba(82, 63, 105, 0.14);
}

.fg_carte_complete { border-left-color: #1BC5BD; }
.fg_carte_incomplete { border-left-color: #FFA800; }
.fg_carte_vide { border-left-color: #F64E60; }

.fg_carte_tete {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 10px 12px;
    border-bottom: 1px solid #F3F6F9;
}

.fg_engin_nom {
    flex: none;
    padding: 2px 10px;
    border-radius: 6px;
    background: #3F4254;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.fg_engin_statut {
    min-width: 0;
    overflow: hidden;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fg_carte_compte {
    flex: none;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 10px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 11px;
    font-weight: 700;
}

.fg_carte_complete .fg_carte_compte { background: #C9F7F5; color: #0BB783; }
.fg_carte_incomplete .fg_carte_compte { background: #FFF4DE; color: #FFA800; }
.fg_carte_vide .fg_carte_compte { background: #FFE2E5; color: #F64E60; }

.fg_carte_vider {
    flex: none;
    color: #B5B5C3;
    font-size: 12px;
    cursor: pointer;
}

.fg_carte_compte + .fg_carte_vider {
    margin-left: 2px;
}

.fg_engin_statut + .fg_carte_vider,
.fg_engin_nom + .fg_carte_vider {
    margin-left: auto;
}

.fg_carte_vider:hover {
    color: #F64E60;
}

.fg_postes {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
}

.fg_postes_aucun {
    padding: 8px 6px;
    color: #B5B5C3;
    font-size: 12px;
    font-style: italic;
}

.fg_poste {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 34px;
    padding: 4px 6px;
    border-radius: 6px;
}

.fg_poste[onclick] {
    cursor: pointer;
}

.fg_poste[onclick]:hover {
    background: #F3F6F9;
}

.fg_poste_rang {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 10px;
    font-weight: 700;
}

.fg_poste_rang i {
    color: #D1D3E0;
    font-size: 8px;
}

.fg_poste_aptitude {
    flex: 0 0 72px;
    overflow: hidden;
    color: #3F4254;
    font-size: 11.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fg_poste_facultatif .fg_poste_aptitude {
    color: #B5B5C3;
}

.fg_personne {
    flex: 0 1 auto;
    min-width: 0;
    padding: 3px 10px;
    border-radius: 12px;
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fg_personne b {
    margin-right: 2px;
    font-weight: 800;
}

.fg_personne i {
    margin-right: 5px;
    color: inherit;
    font-size: 10px;
}

.fg_a_pourvoir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px dashed #F64E60;
    border-radius: 12px;
    background: #FFF5F8;
    color: #F64E60;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.fg_a_pourvoir i {
    color: inherit;
    font-size: 10px;
}

.fg_facultatif {
    color: #B5B5C3;
    font-size: 11.5px;
    font-style: italic;
}

/* Fenêtre de la génération automatique : règles, engins à pourvoir, personnels mobilisables */
.fg_regles {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.fg_regles li {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
    color: #7E8299;
    font-size: 12px;
}

.fg_regles i {
    flex: 0 0 16px;
    margin-top: 3px;
    color: #B5B5C3;
    font-size: 11px;
    text-align: center;
}

.fg_barre {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.fg_engins {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 14px;
}

.fg_engin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.fg_engin input {
    margin: 0;
}

.fg_engin small {
    opacity: 0.85;
}

.fg_personnels {
    color: #7E8299;
    font-size: 12px;
}

/* Feuilles de garde par créneau horaire : pastilles des créneaux dans le bandeau, choix du mode
   dans la fenêtre de génération */
.fg_etiquette_prevue {
    background: #E1F0FF;
    color: #3699FF;
}

.fg_creneaux {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.fg_creneaux_titre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.fg_creneau {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #EBEDF3;
    border-radius: 14px;
    background: #FFFFFF;
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.fg_creneau:hover {
    background: #F3F6F9;
}

.fg_creneau small {
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
}

.fg_creneau_prevue small {
    color: #3699FF;
}

.fg_creneau_en_cours small {
    color: #0BB783;
}

.fg_creneau_terminee {
    color: #7E8299;
}

.fg_creneau_choisi,
.fg_creneau_choisi:hover {
    border-color: #3699FF;
    background: #E1F0FF;
}

.fg_modes {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.fg_mode {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    cursor: pointer;
}

.fg_mode input {
    margin-top: 4px;
}

.fg_mode b {
    display: block;
    color: #3F4254;
    font-size: 13px;
}

.fg_mode small {
    display: block;
    color: #7E8299;
    font-size: 12px;
}

.fg_mode_choisi {
    border-color: #3699FF;
    background: #F5FAFF;
}

.fg_creneau_heures {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #7E8299;
    font-size: 12px;
}

.fg_creneau_heures select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #E4E6EF;
    border-radius: 6px;
    background: #FFFFFF;
    color: #3F4254;
    font-size: 12px;
}

.fg_alerte,
.fg_info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
}

.fg_alerte {
    background: #FFF4DE;
    color: #B06F00;
}

.fg_info {
    background: #E1F0FF;
    color: #187DE4;
}

.fg_alerte i,
.fg_info i {
    margin-top: 2px;
    color: inherit;
}

/* =============================================================================================
   Téléphone et tablette : tout le site. Les règles ne valent que sous 992 px (sous 768 px pour
   les tableaux en cartes et le CTA) : l'affichage sur ordinateur ne change pas.
   ============================================================================================= */
@media (max-width: 991.98px) {

    /* En-tête mobile : logo, titre de la page (header_user_mobile.php), menu */
    .header-mobile {
        gap: 10px;
        padding: 0 12px;
    }

    .header-mobile > a:first-child {
        flex: none;
    }

    .header-mobile > a:first-child img {
        max-height: 36px !important;
    }

    .header_mobile_titre {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        line-height: 1.25;
    }

    .header_mobile_titre small {
        overflow: hidden;
        color: #7E8299;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .header_mobile_titre b {
        overflow: hidden;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Le bouton « utilisateur » de Metronic n'ouvre rien sur ce site */
    #kt_header_mobile_topbar_toggle {
        display: none !important;
    }

    /* Marges : plus de place pour le contenu */
    .content {
        padding: 12px 0;
    }

    .container,
    .container-fluid {
        padding: 0 12px;
    }

    /* Gouttières des rangées réduites : les colonnes gardent le retrait de la page */
    .row:not(.no-gutters) {
        margin-right: -6px;
        margin-left: -6px;
    }

    .row:not(.no-gutters) > .col,
    .row:not(.no-gutters) > [class*="col-"] {
        padding-right: 6px;
        padding-left: 6px;
    }

    .gutter-b {
        margin-bottom: 14px;
    }

    /* Colonnes empilées : un espace entre les cartes qui n'en prévoient pas */
    #kt_content .container-fluid > .row > [class*="col-"]:not(:last-child) > .card:last-child:not(.gutter-b) {
        margin-bottom: 14px;
    }

    /* Cartes : en-tête sur une ou deux lignes, corps moins marginé */
    .card.card-custom > .card-header {
        min-height: 52px;
        padding: 10px 14px;
        row-gap: 8px;
    }

    .card.card-custom > .card-header .card-title {
        margin: 0;
    }

    .card.card-custom > .card-header .card-title .card-label {
        font-size: 1.2rem;
    }

    .card.card-custom > .card-header .card-toolbar {
        gap: 6px;
        margin: 0;
    }

    .card.card-custom .card-body {
        padding: 14px;
    }

    .card.card-custom > .card-footer {
        padding: 12px 14px;
    }

    /* Zones à hauteur fixe : elles rétrécissent à leur contenu */
    [data-scroll="true"] {
        height: auto !important;
        max-height: 320px;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Étiquettes des formulaires : au-dessus du champ, alignées à gauche */
    .col-form-label.text-right,
    .col-form-label.text-lg-right {
        text-align: left !important;
    }

    /* Tableaux trop larges : ils défilent dans leur carte (global.js les enveloppe) */
    .tableau_defilant {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tableau_defilant > table {
        margin-bottom: 0;
    }

    .tableau_defilant + * {
        margin-top: 1rem;
    }

    /* Fenêtres */
    .modal-content {
        border-radius: 12px;
    }

    .modal-header {
        padding: 14px 16px;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-footer {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
    }

    .modal-footer > * {
        margin: 0;
    }

    /* Tuiles d'engins posées dans une carte (standard, mes interventions) : une grille qui
       remplit la largeur */
    .card-body:has(> .engins_min) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
        gap: 6px;
    }

    .card-body:has(> .engins_min) > .engins_min {
        margin: 0;
    }

    .card-body:has(> .engins_min) > .engins_min .nom {
        min-width: 0;
    }

    /* Mon planning et gestion des plannings : réglette des heures qui tient dans la largeur (une
       heure sur trois écrite), boutons de statut en grille de deux */
    table.planning_heures {
        width: 100%;
        table-layout: fixed;
    }

    table.planning_heures td {
        overflow: visible;
        padding: 0;
        font-size: 9px;
        white-space: nowrap;
    }

    table.planning_heures tr:last-child td:not(:nth-child(3n+1)) {
        color: transparent;
    }

    .col-lg-12:has(> .modif_planning),
    .col-lg-12:has(> .modif_planning_disabled) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .modif_planning,
    .modif_planning_disabled {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        margin: 0;
        padding: 8px 10px;
        line-height: 1.2;
    }

    /* Page de connexion : logo, titre et partenaires resserrés, le formulaire dans le premier
       écran */
    .header-mobile-fixed #kt_login.login {
        padding-top: 55px;
    }

    .login.login-6 .flex-center.p-15 {
        padding: 22px 20px !important;
    }

    .login.login-6 .login-wrapper img.max-h-150px {
        max-height: 90px !important;
    }

    .login.login-6 .login-wrapper h3 {
        margin: 12px 0 16px !important;
        font-size: 1.2rem;
    }

    .login.login-6 .login-wrapper img.max-h-50px {
        max-height: 34px !important;
    }

    .login.login-6 .login-divider {
        display: none;
    }

    .login.login-6 .login-signin .mb-15 {
        margin-bottom: 20px !important;
    }

    .login.login-6 .login-signin .mt-10 {
        margin-top: 18px !important;
    }
}

/* Téléphone (sous 768 px) : tableaux en cartes, une carte par ligne (classe tableau_cartes ; les
   titres des colonnes sont recopiés dans data-titre par global.js) */
@media (max-width: 767.98px) {

    table.tableau_cartes,
    table.tableau_cartes > tbody {
        display: block;
        width: 100% !important;
        background: transparent !important;
    }

    table.tableau_cartes {
        border: 0 !important;
    }

    table.tableau_cartes > thead {
        display: none;
    }

    table.tableau_cartes > tbody > tr {
        display: block;
        margin-bottom: 10px;
        padding: 8px 12px;
        border: 1px solid #EBEDF3;
        border-radius: 10px;
        background: #FFFFFF;
    }

    table.tableau_cartes > tbody > tr > td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        width: auto !important;
        padding: 5px 0 !important;
        border: 0 !important;
        text-align: right !important;
    }

    table.tableau_cartes > tbody > tr > td + td {
        border-top: 1px dashed #F3F6F9 !important;
    }

    table.tableau_cartes > tbody > tr > td::before {
        content: attr(data-titre);
        flex: none;
        color: #7E8299;
        font-size: 11px;
        font-weight: 600;
        text-align: left;
    }

    table.tableau_cartes > tbody > tr > td[data-titre=""]::before,
    table.tableau_cartes > tbody > tr > td[colspan]::before {
        display: none;
    }

    table.tableau_cartes > tbody > tr > td[colspan] {
        justify-content: center;
        text-align: center !important;
    }

    /* Effectifs du centre : une carte par personnel (nom, grade, aptitudes et spécialités, rôle) */
    table.effectifs_tableau,
    table.effectifs_tableau > tbody {
        display: block;
        width: 100% !important;
    }

    table.effectifs_tableau {
        border: 0 !important;
    }

    table.effectifs_tableau > thead {
        display: none;
    }

    table.effectifs_tableau > tbody > tr {
        display: grid;
        grid-template-areas:
            "nom nom info"
            "grade apt spe"
            "role role role";
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 2px 10px;
        margin-bottom: 8px;
        padding: 9px 12px;
        border: 1px solid #EBEDF3;
        border-radius: 10px;
        background: #FFFFFF;
    }

    table.effectifs_tableau > tbody > tr > td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
    }

    table.effectifs_tableau > tbody > tr > td:nth-child(1) {
        grid-area: grade;
        color: #7E8299;
        font-size: 11.5px;
    }

    table.effectifs_tableau > tbody > tr > td:nth-child(2) {
        grid-area: nom;
        color: #181C32;
        font-size: 13.5px;
        font-weight: 600;
    }

    table.effectifs_tableau > tbody > tr > td:nth-child(3) {
        grid-area: role;
        min-width: 0;
    }

    table.effectifs_tableau > tbody > tr > td:nth-child(3) .label {
        height: auto;
        min-height: 20px;
        margin: 6px 0 0 !important;
        white-space: normal;
    }

    table.effectifs_tableau > tbody > tr > td:nth-child(4),
    table.effectifs_tableau > tbody > tr > td:nth-child(5) {
        color: #3F4254;
        font-size: 12px;
        white-space: nowrap;
    }

    table.effectifs_tableau > tbody > tr > td:nth-child(4) {
        grid-area: apt;
    }

    table.effectifs_tableau > tbody > tr > td:nth-child(5) {
        grid-area: spe;
    }

    table.effectifs_tableau > tbody > tr > td:nth-child(4)::after {
        content: " apt.";
        color: #7E8299;
        font-weight: 500;
    }

    table.effectifs_tableau > tbody > tr > td:nth-child(5)::after {
        content: " spé.";
        color: #7E8299;
        font-weight: 500;
    }

    table.effectifs_tableau > tbody > tr > td:nth-child(6) {
        grid-area: info;
    }

    table.effectifs_tableau > tbody > tr > td:nth-child(6) i {
        padding: 4px;
        font-size: 18px;
        cursor: pointer;
    }

    /* Centre opérationnel (cta.php) : plus de bandeau sombre, l'en-tête du CTA sur deux lignes
       (service et opérateur ; actions, logiciels et compteurs), onglets en bandeau défilant,
       indicateurs resserrés, légende de la carte masquée */
    body:has(.cta_entete) #kt_header_mobile {
        display: none;
    }

    body:has(.cta_entete) .wrapper {
        padding-top: 0 !important;
    }

    .cta_entete {
        gap: 8px 10px;
        padding: 10px 12px 8px;
        box-shadow: 0 1px 0 #EBEDF3;
    }

    .cta_entete::after {
        content: "";
        order: 3;
        flex-basis: 100%;
        height: 0;
    }

    .cta_entete_service {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }

    .cta_entete_operateur {
        order: 2;
        gap: 8px;
        margin-left: 0;
    }

    .cta_entete_operateur > span {
        display: none;
    }

    .cta_entete_actions {
        order: 4;
    }

    .cta_entete_logiciels {
        order: 5;
    }

    .cta_entete_compteurs {
        order: 6;
        width: auto;
        margin-left: auto;
        overflow: visible;
    }

    .cta_logiciel_panneau {
        order: 7;
    }

    .cta_logiciel_bouton {
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
    }

    .cta_compteur {
        height: 32px;
        padding: 0 11px;
    }

    .cta_onglets {
        flex-wrap: nowrap;
        margin-bottom: 12px;
        padding: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cta_onglets::-webkit-scrollbar {
        display: none;
    }

    .cta_onglets .nav-link {
        flex: none;
        padding: 7px 12px;
        font-size: 12.5px;
        white-space: nowrap;
    }

    .tdb_indicateurs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }

    .tdb_indicateur {
        gap: 10px;
        padding: 12px;
    }

    .tdb_indicateur_icone {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .tdb_indicateur_texte b {
        font-size: 20px;
    }

    .tdb_indicateur_texte span {
        font-size: 11.5px;
        overflow-wrap: anywhere;
    }

    .carte_legende {
        display: none;
    }

    .creation_bloc {
        padding: 14px;
    }
}

/* Récepteur d'alerte (bip.php) : le boîtier, large de 400 px, réduit pour tenir dans l'écran */
@media (max-width: 575.98px) {
    #bip .temporary__storage {
        margin: 0 auto;
    }
}

@media (max-width: 459.98px) {
    .temporary__storage {
        zoom: 0.9;
    }
}

@media (max-width: 419.98px) {
    .temporary__storage {
        zoom: 0.85;
    }
}

@media (max-width: 379.98px) {
    .temporary__storage {
        zoom: 0.78;
    }
}

@media (max-width: 339.98px) {
    .temporary__storage {
        zoom: 0.7;
    }
}

/* Forces de l'ordre : équipages de la vacation (synoptique des moyens du CTA police), leurs cinq
   statuts (couleurs de config_statuts dans --pol-fond et --pol-texte), fenêtres d'équipage et de
   statut */
.pol_barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 16px;
}

.pol_vacation {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7E8299;
    font-size: 12.5px;
    font-weight: 600;
}

.pol_vacation i {
    color: #B5B5C3;
}

.pol_compteurs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pol_compteur {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid #EBEDF3;
    border-radius: 15px;
    background: #FFFFFF;
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pol_compteur i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pol-fond);
}

.pol_compteur b {
    color: #181C32;
    font-size: 13px;
}

.pol_compteur_actif {
    border-color: var(--pol-fond);
    background: var(--pol-fond);
    color: var(--pol-texte);
}

.pol_compteur_actif b {
    color: inherit;
}

.pol_compteur_actif i {
    background: var(--pol-texte);
}

.pol_grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    align-items: start;
    gap: 12px;
}

.pol_equipage {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #EBEDF3;
    border-left: 4px solid var(--pol-fond);
    border-radius: 10px;
    background: #FFFFFF;
}

.pol_equipage[hidden] {
    display: none;
}

.pol_tete {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pol_nom {
    padding: 2px 10px;
    border-radius: 6px;
    background: var(--pol-fond);
    color: var(--pol-texte);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.pol_unite {
    color: #3F4254;
    font-size: 12px;
    font-weight: 700;
}

.pol_radio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #7E8299;
    font-size: 12px;
    font-weight: 600;
}

.pol_radio i {
    font-size: 10px;
}

.pol_outils {
    display: flex;
    gap: 12px;
    margin-left: auto;
}

.pol_outils i {
    color: #B5B5C3;
    font-size: 12px;
    cursor: pointer;
}

.pol_outils i:hover {
    color: #3F4254;
}

.pol_details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: #3F4254;
    font-size: 12px;
}

.pol_details i {
    margin-right: 6px;
    color: #B5B5C3;
    font-size: 11px;
}

.pol_equipements {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pol_equipements span {
    padding: 1px 8px;
    border-radius: 10px;
    background: #F3F6F9;
    color: #5E6278;
    font-size: 11px;
    font-weight: 600;
}

.pol_observations {
    color: #7E8299;
    font-size: 12px;
    font-style: italic;
}

.pol_mission {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #F3F6F9;
    color: #3F4254;
    font-size: 12px;
}

.pol_mission b {
    color: #181C32;
}

.pol_mission i {
    color: #7E8299;
    font-size: 11px;
}

.pol_initiative {
    background: #EEE5FF;
}

.pol_statuts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pol_statut {
    flex: 1 1 auto;
    padding: 5px 8px;
    border: 1px solid #EBEDF3;
    border-radius: 6px;
    background: #FFFFFF;
    color: #7E8299;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.pol_statut:hover {
    border-color: var(--pol-fond);
    color: #3F4254;
}

.pol_statut_actuel,
.pol_statut_actuel:hover {
    border-color: var(--pol-fond);
    background: var(--pol-fond);
    color: var(--pol-texte);
}

.pol_depuis {
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 600;
}

.pol_aucun {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 16px;
    color: #B5B5C3;
    text-align: center;
}

.pol_aucun i {
    font-size: 28px;
}

.pol_aucun b {
    color: #3F4254;
    font-size: 14px;
}

.pol_aucun .btn {
    margin-top: 8px;
}

.pol_composition {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pol_composition input {
    width: 64px;
}

.pol_composition span {
    color: #7E8299;
    font-size: 12px;
    font-weight: 600;
}

.pol_choix_equipements {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pol_case {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid #EBEDF3;
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
}

.pol_case input {
    margin: 0;
}

.pol_case:has(input:checked) {
    border-color: #3699FF;
    background: #E1F0FF;
    color: #3699FF;
}

.pol_choix_statuts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 14px;
}

.pol_choix_statut {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.pol_choix_statut input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pol_choix_statut span {
    display: block;
    padding: 8px 4px;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    color: #3F4254;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}

.pol_choix_statut input:checked + span {
    border-color: var(--pol-fond);
    background: var(--pol-fond);
    color: var(--pol-texte);
}

.pol_choix_statut input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(54, 153, 255, 0.35);
}

.pol_choix_titre {
    margin-bottom: 8px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.pol_fiches {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    margin-bottom: 6px;
    overflow-y: auto;
}

.pol_fiche {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    cursor: pointer;
}

.pol_fiche input[type="radio"] {
    margin-top: 3px;
}

.pol_fiche > span {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    color: #3F4254;
    font-size: 12.5px;
}

.pol_fiche b {
    color: #181C32;
}

.pol_fiche small {
    color: #7E8299;
}

.pol_fiche:has(input[type="radio"]:checked) {
    border-color: #3699FF;
    background: #F4FAFF;
}

.pol_fiche_initiative input[type="text"] {
    margin-top: 6px;
}

@media (max-width: 575.98px) {
    .pol_choix_statuts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Forces de l'ordre : fiches sur trois colonnes (onglet « Fiches » du CTA police) : liste des
   fiches, détail de la fiche choisie, commentaires horodatés. Sur ordinateur, les colonnes
   tiennent dans la fenêtre avec le pied de page (--pf-haut : haut de la vue, posé par le script) et
   défilent chacune. */
.pf_vue {
    display: grid;
    grid-template-columns: minmax(290px, 360px) minmax(0, 1fr) minmax(310px, 420px);
    gap: 16px;
    /* La barre radio flotte au-dessus du bas de l'ecran : on lui laisse sa
       place, sinon le bas des fiches passe dessous (--cta-dock-espace, cta.js) */
    height: calc(100vh - var(--pf-haut, 170px) - 72px - var(--cta-dock-espace, 0px));
    min-height: 540px;
}

.pf_colonne {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(82, 63, 105, 0.05);
    overflow: hidden;
}

.pf_col_tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px 10px;
}

.pf_col_titre {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #181C32;
    font-size: 15px;
    font-weight: 700;
}

.pf_col_outils {
    display: flex;
    gap: 6px;
}

.pf_compte {
    padding: 1px 8px;
    border-radius: 10px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 12px;
    font-weight: 700;
}

.pf_compte:empty {
    display: none;
}

.pf_recherche {
    position: relative;
    margin: 0 16px 10px;
}

.pf_recherche i {
    position: absolute;
    top: 50%;
    left: 11px;
    color: #B5B5C3;
    font-size: 12px;
    transform: translateY(-50%);
}

.pf_recherche input {
    padding-left: 32px;
}

.pf_defilant {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.pf_en_attente .pf_colonne_detail .pf_defilant,
.pf_en_attente #pf_commentaires {
    opacity: 0.45;
    transition: opacity 0.15s;
}

.pf_chargement,
.pf_neant {
    color: #B5B5C3;
    font-size: 12.5px;
}

.pf_chargement {
    padding: 24px 16px;
    text-align: center;
}

.pf_chargement i {
    margin-right: 8px;
}

.pf_vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 16px;
    color: #B5B5C3;
    text-align: center;
}

.pf_vide i {
    font-size: 28px;
}

.pf_vide b {
    color: #3F4254;
    font-size: 14px;
}

.pf_vide .btn {
    margin-top: 10px;
}

/* Liste */
#pf_liste {
    padding: 0 10px 12px;
}

.pf_section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 6px 6px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pf_section span {
    padding: 0 7px;
    border-radius: 9px;
    background: #F3F6F9;
}

.pf_fiche,
.pf_demande {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
    padding: 10px 12px 10px 15px;
    border: 1px solid #EBEDF3;
    border-radius: 10px;
    background: #FFFFFF;
}

.pf_fiche {
    cursor: pointer;
}

.pf_fiche::before,
.pf_demande::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -1px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--pf-etat, #E4E6EF);
}

.pf_fiche[hidden] {
    display: none;
}

.pf_fiche:hover {
    border-color: #D6D9E4;
}

.pf_fiche_attente {
    --pf-etat: #F64E60;
    background: #FFFAFB;
}

.pf_fiche_choisie,
.pf_fiche_choisie:hover {
    border-color: #3699FF;
    background: #F1F8FF;
    box-shadow: inset 0 0 0 1px #3699FF;
}

.pf_fiche_haut {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pf_numero {
    color: #181C32;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pf_heure {
    margin-left: auto;
    color: #7E8299;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pf_etiquette {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 6px;
    background: #EEE5FF;
    color: #8950FC;
    font-size: 10.5px;
    font-weight: 700;
}

.pf_etiquette i {
    font-size: 9px;
}

.pf_etiquette_sp {
    background: #FFE2E5;
    color: #F64E60;
}

.pf_etiquette_sam {
    background: #FFF4DE;
    color: #B37800;
}

.pf_fiche_nature {
    color: #3F4254;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
}

.pf_fiche_nature small {
    margin-right: 6px;
    color: #7E8299;
    font-size: 11.5px;
}

.pf_fiche_lieu {
    overflow: hidden;
    color: #7E8299;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf_fiche_lieu i {
    margin-right: 6px;
    color: #B5B5C3;
    font-size: 11px;
}

.pf_fiche_bas {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.pf_fiche_equipages {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.pf_pastille {
    padding: 1px 7px;
    border-radius: 5px;
    background: var(--pol-fond);
    color: var(--pol-texte);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pf_attente {
    color: #F64E60;
    font-size: 11.5px;
    font-weight: 700;
}

.pf_attente i {
    margin-right: 5px;
}

.pf_fiche_infos {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
    color: #B5B5C3;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.pf_fiche_infos i {
    margin-right: 4px;
}

/* Demandes des autres services */
.pf_demande_sp {
    --pf-etat: #F64E60;
}

.pf_demande_sam {
    --pf-etat: #FFA800;
}

.pf_demande_urgente {
    border-color: #FFC5CD;
    background: #FFF5F7;
}

.pf_service {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #F64E60;
    font-size: 11.5px;
    font-weight: 700;
}

.pf_service_sam {
    color: #B37800;
}

.pf_service i {
    font-size: 10px;
}

.pf_demande_type {
    color: #7E8299;
    font-size: 11.5px;
    font-weight: 600;
}

.pf_demande_etat {
    align-self: flex-start;
    padding: 1px 7px;
    border-radius: 5px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 11px;
    font-weight: 700;
}

.pf_demande_etat_urgent {
    background: #F64E60;
    color: #FFFFFF;
}

.pf_demande_etat_pc {
    background: #C9F7F5;
    color: #1BC5BD;
}

.pf_demande_obs {
    display: -webkit-box;
    overflow: hidden;
    color: #7E8299;
    font-size: 12px;
    font-style: italic;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pf_demande_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.pf_demande_actions .btn i {
    margin-right: 4px;
    font-size: 10px;
}

.pf_demande_actions .btn-icon i {
    margin-right: 0;
}

.pf_sans_resultat {
    padding: 16px 6px;
    text-align: center;
}

/* Détail */
#pf_detail {
    padding: 18px 20px 20px;
}

.pf_close {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 12.5px;
    font-weight: 600;
}

.pf_close .btn {
    margin-left: auto;
    white-space: nowrap;
}

.pf_detail_tete {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #EBEDF3;
}

.pf_detail_titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pf_detail_titre .pf_numero {
    font-size: 17px;
}

.pf_code {
    padding: 2px 8px;
    border-radius: 6px;
    background: #F3F6F9;
    color: #5E6278;
    font-size: 12px;
    font-weight: 700;
}

.pf_detail_nature {
    color: #181C32;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.pf_detail_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: #7E8299;
    font-size: 12px;
    font-weight: 600;
}

.pf_detail_meta i {
    margin-right: 6px;
    color: #B5B5C3;
}

.pf_detail_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.pf_detail_actions .btn i {
    margin-right: 6px;
    font-size: 11px;
}

.pf_cloturer {
    margin-left: auto;
}

.pf_blocs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.pf_bloc {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #EBEDF3;
    border-radius: 10px;
}

.pf_bloc_large {
    grid-column: 1 / -1;
}

.pf_bloc_titre {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pf_bloc_titre i {
    color: #B5B5C3;
}

.pf_bloc_titre span {
    padding: 0 7px;
    border-radius: 9px;
    background: #F3F6F9;
    color: #3F4254;
}

.pf_champs {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    margin: 0;
    font-size: 13px;
}

.pf_champs dt {
    color: #B5B5C3;
    font-weight: 600;
}

.pf_champs dd {
    margin: 0;
    color: #3F4254;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pf_observations {
    color: #3F4254;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

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

.pf_equipage {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #EBEDF3;
    border-left: 4px solid var(--pol-fond);
    border-radius: 10px;
}

.pf_equipage_tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.pf_equipage_depuis {
    margin-left: auto;
    color: #B5B5C3;
    font-size: 11.5px;
    font-weight: 600;
}

.pf_engager {
    margin-top: 10px;
}

.pf_partenaires {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pf_partenaires .syn_pastille {
    cursor: pointer;
}

.pf_renfort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 8px;
    color: #3F4254;
    font-size: 12px;
}

.pf_renfort > span {
    padding: 1px 7px;
    border-radius: 5px;
    background: #F3F6F9;
    font-weight: 600;
}

/* Commentaires */
.pf_filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pf_filtre {
    padding: 3px 9px;
    border: 1px solid #EBEDF3;
    border-radius: 12px;
    background: #FFFFFF;
    color: #7E8299;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.pf_filtre b {
    margin-left: 5px;
    color: #3F4254;
}

.pf_filtre_actif,
.pf_filtre_actif b {
    border-color: #3699FF;
    background: #E1F0FF;
    color: #3699FF;
}

.pf_redaction {
    margin: 0 16px 12px;
    padding: 6px 8px 8px;
    border: 1px solid #EBEDF3;
    border-radius: 10px;
    background: #F9FAFC;
}

.pf_redaction:focus-within {
    border-color: #3699FF;
    background: #FFFFFF;
}

.pf_redaction textarea {
    min-height: 58px;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
    resize: vertical;
}

.pf_redaction textarea:focus {
    background: transparent;
    box-shadow: none;
}

.pf_redaction_edition,
.pf_redaction_edition:focus-within {
    border-color: #FFA800;
    background: #FFF8DD;
}

.pf_redaction_pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

#pf_redaction_etat {
    margin-right: auto;
    color: #B5B5C3;
    font-size: 11px;
    font-weight: 600;
}

.pf_redaction_pied .btn i {
    margin-right: 5px;
    font-size: 11px;
}

.pf_sans_fiche .pf_redaction,
.pf_sans_fiche .pf_filtres {
    display: none;
}

#pf_commentaires {
    padding: 2px 16px 16px;
}

.pf_ligne {
    position: relative;
    padding: 0 0 12px 16px;
    border-left: 2px solid #EBEDF3;
}

.pf_ligne[hidden] {
    display: none;
}

.pf_ligne::before {
    content: "";
    position: absolute;
    top: 3px;
    left: -6px;
    width: 10px;
    height: 10px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #D1D3E0;
}

.pf_ligne_commentaire::before {
    background: #3699FF;
}

.pf_ligne_tete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    font-size: 11.5px;
}

.pf_ligne_heure {
    color: #3F4254;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pf_ligne_auteur {
    overflow: hidden;
    color: #B5B5C3;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf_ligne_reprendre {
    margin-left: auto;
    color: #D1D3E0;
    font-size: 11px;
    cursor: pointer;
}

.pf_ligne:hover .pf_ligne_reprendre,
.pf_ligne_reprendre:hover {
    color: #7E8299;
}

.pf_ligne_texte {
    color: #7E8299;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.pf_ligne_commentaire .pf_ligne_texte {
    padding: 8px 10px;
    border-radius: 8px;
    background: #F3F6F9;
    color: #3F4254;
    font-size: 13px;
    line-height: 1.45;
}

.pf_ligne_texte p,
.pf_ligne_texte ul,
.pf_ligne_texte ol {
    margin: 0;
}

.pf_neant_commentaires {
    padding: 8px 0;
}

/* Écrans plus étroits : la liste et le détail côte à côte, les commentaires dessous ; sur
   téléphone, une colonne. Les colonnes prennent la hauteur de leur contenu. */
@media (max-width: 1399.98px) {
    .pf_vue {
        grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) minmax(290px, 360px);
    }
}

@media (max-width: 1199.98px) {
    .pf_vue {
        grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
        align-items: start;
        height: auto;
        min-height: 0;
    }

    .pf_colonne_liste .pf_defilant {
        max-height: 70vh;
    }

    .pf_colonne_commentaires {
        grid-column: 1 / -1;
    }

    .pf_colonne_commentaires .pf_defilant {
        max-height: 60vh;
    }
}

@media (max-width: 767.98px) {
    .pf_vue {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .pf_colonne_liste .pf_defilant {
        max-height: 55vh;
    }

    #pf_detail {
        padding: 14px;
    }

    .pf_detail_nature {
        font-size: 16px;
    }

    .pf_cloturer {
        margin-left: 0;
    }

    .pf_col_tete,
    .pf_recherche,
    .pf_redaction {
        margin-right: 12px;
        margin-left: 12px;
    }

    .pf_col_tete {
        margin: 0;
        padding: 12px 12px 8px;
    }

    #pf_commentaires {
        padding: 2px 12px 12px;
    }
}

/* Annuaire : contacts de chaque service par catégorie (onglet « Annuaire » du CTA police, fenêtre
   de l'annuaire des pompiers et du SAMU), équipages de la vacation et personnels police ; chaque
   numéro se copie d'un clic */
.pa_tete {
    flex-wrap: wrap;
    gap: 10px;
}

.pa_barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.pa_recherche {
    position: relative;
    width: 300px;
    max-width: 100%;
}

.pa_recherche i {
    position: absolute;
    top: 50%;
    left: 11px;
    color: #B5B5C3;
    font-size: 12px;
    transform: translateY(-50%);
}

.pa_recherche input {
    padding-left: 32px;
}

.pa_filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pa_section {
    margin-bottom: 22px;
}

.pa_section[hidden],
.pa_groupe[hidden],
.pa_ligne[hidden],
.pa_vide[hidden] {
    display: none;
}

.pa_section_titre {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #181C32;
    font-size: 14px;
    font-weight: 700;
}

.pa_section_titre i {
    color: #B5B5C3;
}

.pa_section_titre span {
    padding: 0 8px;
    border-radius: 9px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 12px;
}

.pa_ajouter {
    margin-left: auto;
}

.pa_ajouter i {
    margin-right: 4px;
    font-size: 10px;
}

/* Fenêtre de l'annuaire des pompiers et du SAMU : contacts au-dessus des personnels */
.ann_modal .pa_section {
    margin-bottom: 16px;
}

.ann_modal .ann_titre_personnels {
    margin-top: 4px;
}

.pa_groupe {
    margin-bottom: 12px;
}

.pa_groupe_titre {
    margin: 0 0 6px 2px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pa_grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 8px;
}

.pa_grille_serree {
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
}

.pa_ligne {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #EBEDF3;
    border-radius: 10px;
    background: #FFFFFF;
}

.pa_ligne_tete {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

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

.pa_identite b {
    color: #181C32;
    font-size: 13px;
}

.pa_identite span {
    color: #7E8299;
    font-size: 12px;
}

.pa_identite_ligne {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pa_outils i {
    color: #B5B5C3;
    font-size: 12px;
    cursor: pointer;
}

.pa_outils i:hover {
    color: #3F4254;
}

.pa_numeros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pa_numero {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 9px;
    border: 1px solid #E1F0FF;
    border-radius: 7px;
    background: #F4FAFF;
    color: #181C32;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.pa_numero i {
    color: #3699FF;
    font-size: 11px;
}

.pa_numero .pa_copie {
    color: #B5B5C3;
}

.pa_numero:hover {
    border-color: #3699FF;
}

.pa_numero:hover .pa_copie {
    color: #3699FF;
}

.pa_detail {
    color: #7E8299;
    font-size: 12px;
}

.pa_detail i {
    margin-right: 5px;
    color: #B5B5C3;
}

.pa_notes {
    color: #7E8299;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.pa_absent {
    color: #B5B5C3;
    font-size: 12px;
    font-style: italic;
}

/* Personnels : une ligne chacun */
.pa_ligne_personnel {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}

.pa_grade {
    min-width: 42px;
    padding: 2px 6px;
    border-radius: 5px;
    background: #F3F6F9;
    color: #5E6278;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.pa_nom {
    flex: 1;
    min-width: 90px;
    overflow: hidden;
    color: #181C32;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pa_statut {
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pa_vide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border: 1px dashed #E4E6EF;
    border-radius: 10px;
    color: #B5B5C3;
    font-size: 12.5px;
}

.pa_vide b {
    color: #3F4254;
}

.pa_vide .btn {
    margin-top: 6px;
}

@media (max-width: 767.98px) {
    .pa_recherche {
        width: 100%;
    }
}

/* Lieux particuliers (ETARE) sur les cartes : pastille ronde a la couleur de leur icone, nom de pres */
.carte_etare {
    position: relative;
    width: 0;
    height: 0;
    cursor: pointer;
}

.carte_etare_icone {
    position: absolute;
    left: -12px;
    top: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

.carte_etare_icone i {
    color: #FFFFFF;
    font-size: 11px;
}

.carte_etare_nom {
    position: absolute;
    top: 14px;
    left: 0;
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.92);
    color: #3F4254;
    font-size: 10px;
    font-weight: 600;
    line-height: 15px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transform: translateX(-50%);
}

.carte_loin .carte_etare_nom,
.carte_etare_loin .carte_etare_nom {
    display: none;
}

/* Lieu choisi (Gestion des lieux particuliers) : cerne bleu, nom toujours affiche */
.carte_etare_choisi .carte_etare_icone {
    box-shadow: 0 0 0 3px #3699FF, 0 2px 8px rgba(0, 0, 0, 0.45);
}

.carte_loin .carte_etare_choisi .carte_etare_nom,
.carte_etare_choisi .carte_etare_nom {
    display: block;
    color: #3699FF;
    font-weight: 700;
}

/* ---- Les trois interrupteurs de la carte, au-dessus du zoom --------------
   Reseau autoroutier, lieux particuliers, relais radio. Meme taille, meme
   bleu quand la couche est affichee : ils forment une colonne lisible depuis
   que la legende ne mange plus le coin oppose. */
.carte_jeu .carte_reseau_bouton a,
.carte_jeu .carte_etare_bouton a,
.carte_jeu .carte_antennes_bouton a {
    font-size: 13px;
}

.carte_jeu .carte_reseau_bouton a i,
.carte_jeu .carte_etare_bouton a i,
.carte_jeu .carte_antennes_bouton a i {
    color: inherit;
    font-size: 13px;
}

.carte_jeu .carte_reseau_bouton a.carte_reseau_actif,
.carte_jeu .carte_reseau_bouton a.carte_reseau_actif:hover,
.carte_jeu .carte_etare_bouton a.carte_etare_actif,
.carte_jeu .carte_etare_bouton a.carte_etare_actif:hover,
.carte_jeu .carte_antennes_bouton a.carte_antennes_actif,
.carte_jeu .carte_antennes_bouton a.carte_antennes_actif:hover {
    background-color: #3699FF;
    color: #FFFFFF;
}

/* Gestion des lieux particuliers : pastille de l'icone (liste, bandeau, grille) */
.eta_pastille {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #E4E6EF;
}

.eta_pastille i {
    color: #FFFFFF;
    font-size: 11px;
}

/* Lieu pas encore place : pastille en pointilles, sans couleur */
.eta_pastille_vide {
    border: 2px dashed #B5B5C3;
    background: #FFFFFF;
    box-shadow: none;
}

.eta_pastille_vide i {
    color: #B5B5C3;
}

.eta_consigne_pastille {
    flex: 0 0 auto;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.eta_consigne_pastille .eta_pastille {
    width: 34px;
    height: 34px;
}

.eta_consigne_pastille .eta_pastille i {
    font-size: 14px;
}

/* Grille des icones, sous le bandeau de la carte */
.eta_icones {
    position: absolute;
    top: 84px;
    right: 12px;
    z-index: 510;
    width: 372px;
    max-width: calc(100% - 24px);
    max-height: calc(100% - 100px);
    overflow-y: auto;
    padding: 12px 14px 14px;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.eta_icones[hidden] {
    display: none;
}

.eta_icones_tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: #181C32;
    font-size: 13px;
}

.eta_icones_tete a {
    color: #B5B5C3;
    font-size: 20px;
    line-height: 1;
}

.eta_icones_auto {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #F3F6F9;
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.eta_icones_auto small {
    display: block;
    color: #7E8299;
    font-weight: 500;
}

.eta_icones_groupe {
    margin: 12px 0 6px;
    color: #7E8299;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.eta_icones_grille {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.eta_icones_grille button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #F3F6F9;
    cursor: pointer;
}

.eta_icones_auto:hover,
.eta_icones_grille button:hover {
    background: #E1F0FF;
}

.eta_icones_auto.active,
.eta_icones_grille button.active {
    border-color: #3699FF;
    background: #E1F0FF;
}


/* ---- Radio ONYX : poste radio du CTA (panneau Radio de l'en-tete), alertes et repères ---- */

#cta_panneau_radio {
    width: 470px;
}

/* Icones du poste et de la barre radio : couleur de leur bouton ou de leur texte. Le theme donne
   a toutes les icones un gris fixe (regle « i »), qui masquait l'etat des epingles, du son coupe,
   de l'alternat et de « qui parle ». Les regles propres a une icone, plus loin, l'emportent. */
.cta_radio i,
.cta_dock i {
    color: inherit;
}

#cta_panneau_radio .cta_radio_corps {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.cta_radio {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    font-size: 12.5px;
}

/* Barre du haut : connexion, identifiant du poste, volume, reglages */
.cta_radio_barre {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #EBEDF3;
}

.cta_radio_connexion {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1 1 auto;
    color: #7E8299;
    font-weight: 600;
}

.cta_radio_connexion span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cta_radio_connexion i {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #B5B5C3;
}

.cta_radio_connexion.cta_radio_connecte {
    color: #0BB783;
}

.cta_radio_connexion.cta_radio_connecte i {
    background: #1BC5BD;
    box-shadow: 0 0 0 3px rgba(27, 197, 189, 0.25);
}

.cta_radio_connexion.cta_radio_connexion i {
    background: #FFA800;
    animation: cta_clignote 1s ease-in-out infinite;
}

.cta_radio_connexion.cta_radio_hors_ligne {
    color: #F64E60;
}

.cta_radio_connexion.cta_radio_hors_ligne i {
    background: #F64E60;
}

.cta_radio_rid {
    padding: 2px 7px;
    border-radius: 5px;
    background: #F3F6F9;
    color: #3F4254;
    font-family: Consolas, monospace;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.cta_radio_volume {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: #7E8299;
}

.cta_radio_volume input {
    width: 80px;
}

/* Bandeaux : son a activer, poste ouvert ailleurs, serveur a regler */
.cta_radio_son,
.cta_radio_ailleurs,
.cta_radio_a_configurer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 12px 0;
    padding: 8px 10px;
    border-radius: 7px;
    font-weight: 600;
}

.cta_radio_son {
    background: #FFF4DE;
    color: #B47B00;
    cursor: pointer;
}

.cta_radio_ailleurs {
    justify-content: space-between;
    background: #E1F0FF;
    color: #3699FF;
}

.cta_radio_a_configurer {
    background: #F3F6F9;
    color: #7E8299;
}

.cta_radio_son[hidden],
.cta_radio_ailleurs[hidden] {
    display: none;
}

/* Radio coupee par l'operateur : bandeau du poste, bouton marche / arret */
.cta_radio_coupee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 12px 0;
    padding: 8px 10px;
    border-radius: 7px;
    background: #FFE2E5;
    color: #F64E60;
    font-weight: 600;
}

.cta_radio_coupee[hidden] {
    display: none;
}

.cta_radio_couper.coupee,
.cta_radio_couper.coupee:hover {
    background: #1BC5BD !important;
    color: #FFFFFF !important;
}

.cta_radio_connexion.cta_radio_coupe {
    color: #7E8299;
}

/* Demandes de parole (touches 3 et 4 des portatifs) */
.cta_radio_demandes {
    margin: 8px 12px 0;
    padding: 6px 8px;
    border: 1px solid #FFE2A5;
    border-radius: 8px;
    background: #FFF9EC;
}

.cta_radio_demandes[hidden] {
    display: none;
}

.cta_radio_demandes_titre {
    margin-bottom: 4px;
    color: #B47B00;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.cta_radio_demandes_titre i {
    margin-right: 6px;
}

.cta_radio_demande {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-top: 1px dashed #FFE2A5;
}

.cta_radio_demande:first-of-type {
    border-top: none;
}

.cta_radio_demande_qui {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

.cta_radio_demande_qui small {
    color: #7E8299;
}

.cta_radio_urgent {
    padding: 1px 6px;
    border-radius: 4px;
    background: #F64E60;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    animation: cta_clignote 1s ease-in-out infinite;
}

/* Onglets Canaux / Reecoute */
.cta_radio_onglets {
    display: flex;
    gap: 4px;
    margin: 8px 12px 0;
    border-bottom: 1px solid #EBEDF3;
}

.cta_radio_onglets button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: #7E8299;
    font-weight: 600;
    cursor: pointer;
}

.cta_radio_onglets button.actif {
    border-bottom-color: #3699FF;
    color: #3699FF;
}

.cta_radio_onglets button:focus {
    outline: none;
}

.cta_radio_onglets em {
    color: #3699FF;
    font-style: normal;
}

/* Canaux */
.cta_radio_canaux {
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 12px 8px;
    overflow: auto;
}

.cta_radio_canaux[hidden] {
    display: none;
}

.cta_radio_groupe_nom {
    margin: 8px 0 3px;
    color: #B5B5C3;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.cta_radio_canal {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin-bottom: 3px;
    padding: 0 4px 0 9px;
    border: 1px solid #EBEDF3;
    border-left: 3px solid #EBEDF3;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cta_radio_canal:hover {
    background: #F9FAFC;
}

.cta_radio_canal.choisi {
    border-left-color: #3699FF;
    background: #F3F8FF;
}

.cta_radio_voyant {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E4E6EF;
}

.cta_radio_canal_nom {
    flex: 0 0 auto;
    color: #3F4254;
    font-weight: 600;
    white-space: nowrap;
}

.cta_radio_canal_activite {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #7E8299;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cta_radio_muet,
.cta_radio_epingle {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 5px;
    background: none;
    color: #B5B5C3;
    cursor: pointer;
}

.cta_radio_muet:hover,
.cta_radio_epingle:hover {
    background: #EBEDF3;
    color: #3F4254;
}

.cta_radio_muet:focus,
.cta_radio_epingle:focus {
    outline: none;
}

/* Epingle : canal garde dans la barre radio du bas. Epinglee : bleue et droite sur fond bleu pale ;
   sinon grise et inclinee */
.cta_radio_epingle {
    color: #C4C6D3;
    font-size: 12px;
}

.cta_radio_epingle i {
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.cta_radio_epingle:hover {
    color: #7E8299;
}

.cta_radio_canal.epingle .cta_radio_epingle {
    background: #E1F0FF;
    color: #3699FF;
}

.cta_radio_canal.epingle .cta_radio_epingle i {
    transform: none;
}

.cta_radio_canal.epingle .cta_radio_epingle:hover {
    background: #C9E3FF;
}

.cta_radio_canal.muet .cta_radio_canal_nom {
    color: #B5B5C3;
}

.cta_radio_canal.muet .cta_radio_muet {
    color: #F64E60;
}

.cta_radio_canal.non_affilie .cta_radio_voyant {
    background: #FFA800;
}

.cta_radio_canal.rx {
    border-color: #1BC5BD;
    background: #E8FFF3;
}

.cta_radio_canal.rx .cta_radio_voyant {
    background: #1BC5BD;
    animation: cta_clignote 0.8s ease-in-out infinite;
}

.cta_radio_canal.rx .cta_radio_canal_activite {
    color: #0BB783;
    font-weight: 700;
}

.cta_radio_canal.tx {
    border-color: #F64E60;
    background: #FFE2E5;
}

.cta_radio_canal.tx .cta_radio_voyant {
    background: #F64E60;
}

.cta_radio_canal.tx .cta_radio_canal_activite {
    color: #F64E60;
    font-weight: 700;
}

.cta_radio_canal.attente .cta_radio_voyant {
    animation: cta_clignote 0.4s ease-in-out infinite;
}

.cta_radio_canal.sos {
    box-shadow: 0 0 0 2px #F64E60;
}

.cta_radio_canal.sos .cta_radio_canal_activite {
    color: #F64E60;
    font-weight: 700;
}

.cta_radio_vide {
    padding: 24px 10px;
    color: #B5B5C3;
    text-align: center;
}

.cta_radio_vide i {
    display: block;
    margin-bottom: 8px;
    font-size: 22px;
}

/* Reecoute */
.cta_radio_message {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    border-bottom: 1px solid #F3F6F9;
}

.cta_radio_message_quand {
    display: flex;
    flex-direction: column;
    flex: 0 0 62px;
    color: #3F4254;
    font-family: Consolas, monospace;
    font-weight: 600;
    line-height: 1.2;
}

.cta_radio_message_quand small,
.cta_radio_message_qui small {
    color: #B5B5C3;
    font-family: inherit;
}

.cta_radio_message_qui {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.cta_radio_message_qui b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cta_radio_message.sortant .cta_radio_message_qui b {
    color: #F64E60;
}

.cta_radio_message.lecture {
    background: #F3F8FF;
}

/* Alternat */
.cta_radio_alternat {
    padding: 8px 12px 10px;
    border-top: 1px solid #EBEDF3;
}

.cta_radio_ptt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 54px;
    border: 2px solid #E4E6EF;
    border-radius: 10px;
    background: #F3F6F9;
    color: #3F4254;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.cta_radio_ptt:focus {
    outline: none;
}

.cta_radio_ptt i {
    font-size: 20px;
}

.cta_radio_ptt span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.cta_radio_ptt small {
    color: #7E8299;
    font-weight: 600;
}

.cta_radio_ptt.actif {
    border-color: #FFA800;
    background: #FFF4DE;
}

.cta_radio_ptt.accorde {
    border-color: #F64E60;
    background: #F64E60;
    color: #FFFFFF;
}

.cta_radio_ptt.accorde small {
    color: #FFFFFF;
}

.cta_radio_touche {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    color: #B5B5C3;
    font-size: 11px;
}

.cta_radio_info {
    max-height: 0;
    overflow: hidden;
    color: #F64E60;
    font-size: 11.5px;
    font-weight: 600;
    transition: max-height 0.2s ease;
}

.cta_radio_info.visible {
    max-height: 40px;
    margin-top: 4px;
}

/* Bouton Radio de l'en-tete : etat du poste et demandes de parole */
.cta_logiciel_bouton {
    position: relative;
}

.cta_logiciel_bouton.cta_radio_en_ligne i {
    color: #1BC5BD;
}

.cta_logiciel_bouton.cta_radio_hors_ligne i {
    color: #F64E60;
}

.cta_logiciel_bouton.cta_radio_reception {
    border-color: #1BC5BD;
    background: #E8FFF3;
}

.cta_logiciel_bouton.cta_radio_reception small {
    color: #0BB783;
    font-weight: 700;
}

.cta_logiciel_bouton.cta_radio_emission {
    border-color: #F64E60;
    background: #FFE2E5;
}

.cta_logiciel_bouton.cta_radio_emission small {
    color: #F64E60;
    font-weight: 700;
}

.cta_logiciel_bouton.cta_radio_demandes_attente {
    border-color: #FFA800;
}

.cta_logiciel_bouton.cta_radio_demandes_urgentes {
    animation: cta_radio_pulse_orange 1s ease-in-out infinite;
}

.cta_radio_badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #FFA800;
    color: #FFFFFF;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.cta_radio_demandes_urgentes .cta_radio_badge {
    background: #F64E60;
}

@keyframes cta_radio_pulse_orange {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 168, 0, 0.7);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(255, 168, 0, 0);
    }
}

/* Pastille SOS de l'en-tete, pour rouvrir la fenetre des detresses */
.cta_radio_sos {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin-left: 8px;
    padding: 0 11px;
    border: none;
    border-radius: 16px;
    background: #3F4254;
    color: #FFFFFF;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.cta_radio_sos span {
    padding: 0 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.25);
}

.cta_radio_sos:focus {
    outline: none;
}

.cta_radio_sos.cta_radio_sos_attente {
    background: #F64E60;
    animation: cta_clignote 0.7s ease-in-out infinite;
}

/* Ecran qui scintille : rouge pour une detresse, orange pour une demande urgente */
body.cta_alerte_detresse .cta_flash {
    display: block;
    animation-duration: 0.6s;
}

body.cta_alerte_urgente:not(.cta_alerte_detresse):not(.cta_alerte_rouge) .cta_flash {
    display: block;
    background: rgba(255, 168, 0, 0.06);
    box-shadow: inset 0 0 0 6px rgba(255, 168, 0, 0.9), inset 0 0 120px 30px rgba(255, 168, 0, 0.3);
    animation-duration: 1.4s;
}

/* Confirmation posee sur la fenetre de detresse (SweetAlert est en dessous par defaut) */
.swal2-container.cta_detresse_confirmation {
    z-index: 1070;
}

/* Fenetre d'un appel de detresse */
.cta_detresse {
    position: fixed;
    top: 70px;
    left: 50%;
    z-index: 1062;
    display: flex;
    flex-direction: column;
    width: 680px;
    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 90px - var(--cta-dock-espace, 0px));
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px #F64E60, 0 20px 60px rgba(0, 0, 0, 0.4);
    transform: translateX(-50%);
}

.cta_detresse[hidden] {
    display: none;
}

.cta_detresse_tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 10px 20px;
    border-radius: 12px 12px 0 0;
    background: #F64E60;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cta_detresse_tete > span i {
    margin-right: 10px;
    animation: cta_clignote 0.7s ease-in-out infinite;
}

.cta_detresse_tete .btn i {
    color: #FFFFFF;
}

.cta_detresse_tete .btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.cta_detresse.cta_detresse_acquittee {
    box-shadow: 0 0 0 4px #3F4254, 0 20px 60px rgba(0, 0, 0, 0.35);
}

.cta_detresse.cta_detresse_acquittee .cta_detresse_tete {
    background: #3F4254;
}

.cta_detresse.cta_detresse_acquittee .cta_detresse_tete > span i {
    animation: none;
}

.cta_detresse_onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 20px 0;
}

.cta_detresse_onglets[hidden] {
    display: none;
}

.cta_detresse_onglets button {
    padding: 3px 10px;
    border: 1px solid #E4E6EF;
    border-radius: 14px;
    background: #FFFFFF;
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.cta_detresse_onglets button.attente {
    border-color: #F64E60;
    color: #F64E60;
}

.cta_detresse_onglets button.actif {
    background: #3F4254;
    border-color: #3F4254;
    color: #FFFFFF;
}

.cta_detresse_corps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 14px 20px;
    overflow: auto;
}

.cta_detresse_fiche {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #3F4254;
    font-size: 13px;
}

.cta_detresse_fiche i {
    width: 20px;
    margin-right: 6px;
    color: #B5B5C3;
    text-align: center;
}

/* L'engin en detresse, en gros */
.cta_detresse_qui {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
}

.cta_detresse_fiche .cta_detresse_qui i {
    width: auto;
    margin-right: 0;
    color: #F64E60;
}

/* Compte du joueur qui a appuye : un simple journal (en vrai, on ne le saurait pas) */
.cta_detresse_journal {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #EBEDF3;
    color: #B5B5C3;
    font-size: 11.5px;
}

.cta_detresse_fiche .cta_detresse_journal i {
    color: #D1D3E0;
}

.cta_detresse_etat {
    margin-top: 4px;
    color: #0BB783;
    font-weight: 700;
}

.cta_detresse_etat i {
    color: inherit !important;
}

.cta_detresse_etat_attente {
    color: #F64E60;
}

.cta_detresse_carte {
    height: 280px;
    border-radius: 8px;
    overflow: hidden;
}

.cta_detresse_carte[hidden] {
    display: none;
}

.cta_detresse_pied {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid #EBEDF3;
}

.cta_detresse_pied .btn i {
    margin-right: 6px;
}

/* Fenetre des demandes de message urgentes */
.cta_urgente {
    position: fixed;
    top: 70px;
    right: 25px;
    z-index: 1058;
    width: 460px;
    max-width: calc(100vw - 30px);
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px #FFA800, 0 16px 50px rgba(0, 0, 0, 0.3);
}

.cta_urgente[hidden] {
    display: none;
}

.cta_urgente_tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 8px 16px;
    border-radius: 12px 12px 0 0;
    background: #FFA800;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.cta_urgente_tete > span i {
    margin-right: 8px;
}

.cta_urgente_tete .btn i {
    color: #FFFFFF;
}

.cta_urgente_ligne {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #F3F6F9;
}

.cta_urgente_qui {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.cta_urgente_qui small {
    color: #7E8299;
    font-size: 11.5px;
}

.cta_urgente_actions {
    display: flex;
    gap: 8px;
}

.cta_urgente_actions .btn i {
    margin-right: 6px;
}

/* Reperes des cartes : relais radio */
.carte_antenne {
    position: relative;
    width: 0;
    height: 0;
}

.carte_antenne_icone {
    position: absolute;
    left: -11px;
    top: -11px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #3699FF;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

.carte_antenne_icone i {
    color: #FFFFFF;
    font-size: 10px;
}

.carte_antenne_hs .carte_antenne_icone {
    background: #7E8299;
}

.carte_antenne_degrade .carte_antenne_icone {
    background: #FFA800;
}

/* Relais choisi (reglage des antennes, Communications radio) */
.carte_antenne_choisie .carte_antenne_icone {
    left: -15px;
    top: -15px;
    width: 30px;
    height: 30px;
    border-width: 3px;
    box-shadow: 0 0 0 4px rgba(54, 153, 255, 0.35), 0 1px 6px rgba(0, 0, 0, 0.45);
}

.carte_antenne_choisie .carte_antenne_icone i {
    font-size: 13px;
}

.carte_antenne_choisie .carte_antenne_nom {
    top: 17px;
    background: #3699FF;
    color: #FFFFFF;
}

.carte_antenne_nom {
    position: absolute;
    top: 13px;
    left: 0;
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(225, 240, 255, 0.95);
    color: #1F6FC6;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 14px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transform: translateX(-50%);
}

.carte_loin .carte_antenne_nom {
    display: none;
}



/* Reperes des cartes : appel de detresse (pulse tant qu'il n'est pas acquitte) */
.carte_detresse {
    position: relative;
    width: 0;
    height: 0;
    cursor: pointer;
}

.carte_detresse_icone {
    position: absolute;
    left: -16px;
    top: -16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    background: #F64E60;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.carte_detresse_icone i {
    color: #FFFFFF;
    font-size: 13px;
}

.carte_detresse_onde {
    position: absolute;
    left: -16px;
    top: -16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(246, 78, 96, 0.55);
    animation: carte_detresse_onde 1.2s ease-out infinite;
}

@keyframes carte_detresse_onde {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }

    100% {
        transform: scale(3.2);
        opacity: 0;
    }
}

.carte_detresse_nom {
    position: absolute;
    top: 19px;
    left: 0;
    padding: 1px 7px;
    border-radius: 4px;
    background: #F64E60;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transform: translateX(-50%);
}

.carte_detresse_acquittee .carte_detresse_onde {
    display: none;
}

.carte_detresse_acquittee .carte_detresse_icone,
.carte_detresse_acquittee .carte_detresse_nom {
    background: #3F4254;
}

.carte_detresse_grande .carte_detresse_icone {
    left: -22px;
    top: -22px;
    width: 44px;
    height: 44px;
}

.carte_detresse_grande .carte_detresse_icone i {
    font-size: 18px;
}

.carte_detresse_grande .carte_detresse_onde {
    left: -22px;
    top: -22px;
    width: 44px;
    height: 44px;
}

.carte_detresse_grande .carte_detresse_nom {
    top: 26px;
    font-size: 12.5px;
}

/* ---- Barre radio : en bas de l'ecran, toujours au premier plan ----
   Au-dessus des fenetres du site (1050) et de leur fond (1040), du scintillement (1055) et des
   fenetres d'alerte (1058 a 1062), dont la hauteur lui laisse la place ; sous les notifications et
   la confirmation posee sur une detresse (1070). --cta-dock-espace : hauteur qu'elle occupe depuis
   le bas de l'ecran (cta.js). */
.cta_dock {
    position: fixed;
    right: 12px;
    bottom: 10px;
    left: 12px;
    z-index: 1065;
    font-size: 12.5px;
}

.cta_dock_radio {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 6px 8px;
    border: 1px solid #E4E6EF;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Quelqu'un parle : toute la barre le signale (vert) ; vous parlez : rouge */
.cta_dock.cta_dock_rx .cta_dock_radio {
    border-color: #1BC5BD;
    box-shadow: 0 0 0 2px rgba(27, 197, 189, 0.45), 0 8px 30px rgba(0, 0, 0, 0.18);
}

.cta_dock.cta_dock_tx .cta_dock_radio {
    border-color: #F64E60;
    box-shadow: 0 0 0 2px rgba(246, 78, 96, 0.45), 0 8px 30px rgba(0, 0, 0, 0.18);
}

.cta_dock button:focus {
    outline: none;
}

.cta_dock_gauche {
    display: flex;
    /* Souple : le bandeau d'appel vit ici, il doit pouvoir se comprimer
       plutot que de pousser les canaux radio hors de la barre. */
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.cta_dock_badge[hidden],
.cta_dock_sos[hidden],
.cta_dock_son[hidden],
.cta_dock_reecoute[hidden],
#cta_dock_ici[hidden] {
    display: none;
}

/* Poste complet (et son etat) */
.cta_dock_poste {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #EBEDF3;
    border-radius: 9px;
    background: #F3F6F9;
    color: #3F4254;
    cursor: pointer;
}

.cta_dock_poste:hover {
    background: #EBEDF3;
}

.cta_dock_poste.actif {
    border-color: #3699FF;
    background: #E1F0FF;
}

.cta_dock_poste > i {
    color: #B5B5C3;
    font-size: 17px;
}

.cta_dock_poste.cta_radio_connecte > i {
    color: #1BC5BD;
}

.cta_dock_poste.cta_radio_hors_ligne > i {
    color: #F64E60;
}

.cta_dock_poste span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.cta_dock_poste small {
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* La barre n'affiche que les symboles : le libelle du poste radio reste dans le DOM
   (cta_dock_maj l'ecrit) mais ne prend plus de place ; l'etat se lit au survol. */
.cta_dock_poste span {
    display: none;
}

.cta_dock_poste {
    justify-content: center;
    width: 44px;
    padding: 0;
}

/* ---- Reception des appels dans la barre ---------------------------------
   Dans la MEME pilule que la radio : le symbole a cote de celui du poste,
   le bandeau de l'appel juste apres. */
.cta_dock_tel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #EBEDF3;
    border-radius: 9px;
    background: #F3F6F9;
    cursor: pointer;
}

.cta_dock_tel[hidden] {
    display: none;
}

.cta_dock_tel > i {
    color: #B5B5C3;
    font-size: 17px;
}

.cta_dock_tel:hover {
    background: #EBEDF3;
}

.cta_dock_tel.actif {
    border-color: #3699FF;
    background: #E1F0FF;
}

.cta_dock_tel.cta_tel_pret > i,
.cta_dock_tel.cta_tel_enligne > i {
    color: #1BC5BD;
}

.cta_dock_tel.cta_tel_sansligne > i,
.cta_dock_tel.cta_tel_garde > i,
.cta_dock_tel.cta_tel_connexion > i {
    color: #FFA800;
}

.cta_dock_tel.cta_tel_pause > i,
.cta_dock_tel.cta_tel_ailleurs > i {
    color: #8950FC;
}

.cta_dock_tel.cta_tel_erreur > i,
.cta_dock_tel.cta_tel_non_configure > i {
    color: #F64E60;
}

.cta_dock_tel.cta_tel_sonne > i {
    color: #F64E60;
    animation: cta_dock_sonne 1s ease-in-out infinite;
}

@keyframes cta_dock_sonne {
    50% { opacity: 0.25; }
}

.cta_dock_appel {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Borne : sans elle, un nom d'appelant a rallonge etire la barre au lieu
       de se couper (le b porte deja l'ellipse). */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 360px;
    padding: 5px 10px;
    border: 1px solid #EBEDF3;
    border-radius: 9px;
    background: #F3F6F9;
}

.cta_dock_appel[hidden] {
    display: none;
}

.cta_dock_appel.sonne {
    border-color: #F64E60;
    background: #FFE2E5;
}

.cta_dock_appel_qui {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.cta_dock_appel_qui b {
    color: #181C32;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cta_dock_appel_qui small {
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Ce qui patiente sur mes lignes, dit en clair a cote de l'appel */
.cta_dock_attente {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 10px;
    border: 1px solid #FFE2AA;
    border-radius: 9px;
    background: #FFF4DE;
    color: #B87B00;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.cta_dock_attente[hidden] {
    display: none;
}

.cta_dock_attente:hover {
    background: #FFE9C4;
}

/* Les commandes de la communication, une fois decroche */
.cta_dock_appel_actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cta_dock_appel_actions[hidden] {
    display: none;
}

.cta_dock_appel_agir {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* Les outils : symbole seul, sobres tant qu'ils ne sont pas actifs */
.cta_dock_appel_agir.outil {
    width: 32px;
    justify-content: center;
    padding: 0;
    border: 1px solid #E4E6EF;
    background: #FFFFFF;
    color: #5E6278;
    font-size: 13px;
}

.cta_dock_appel_agir.outil:hover {
    background: #EBEDF3;
    color: #181C32;
}

.cta_dock_appel_agir.outil.actif {
    border-color: #FFA800;
    background: #FFF4DE;
    color: #B87B00;
}

.cta_dock_appel_agir[hidden] {
    display: none;
}

.cta_dock_appel_agir.repondre {
    background: #1BC5BD;
}

.cta_dock_appel_agir.repondre:hover {
    background: #16A69F;
}

.cta_dock_appel_agir.raccrocher {
    width: 32px;
    justify-content: center;
    padding: 0;
    background: #F64E60;
}

.cta_dock_appel_agir.raccrocher:hover {
    background: #EE2D41;
}

/* Le panneau des appels s'ouvre au-dessus de la barre, comme le poste radio */
#cta_panneau_appels.cta_appels_panneau_dock {
    top: auto;
    right: 12px;
    bottom: calc(var(--cta-dock-espace, 0px) + 8px);
    z-index: 1054;
    height: calc(100vh - 88px - var(--cta-dock-espace, 0px));
    max-height: 640px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
}

.cta_dock_badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #FFA800;
    color: #FFFFFF;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.cta_dock_badge.urgente {
    background: #F64E60;
    animation: cta_clignote 0.8s ease-in-out infinite;
}

/* Radio deconnectee par l'operateur (depuis le poste radio) */
.cta_dock_poste.cta_radio_coupe > i {
    color: #F64E60;
}

/* Detresses en cours (clignote tant qu'une attend son acquittement), son a activer */
.cta_dock_sos,
.cta_dock_son {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    border: none;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.cta_dock_sos {
    background: #3F4254;
    color: #FFFFFF;
}

.cta_dock_sos span {
    padding: 0 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.25);
}

.cta_dock_sos.cta_dock_sos_attente {
    background: #F64E60;
    animation: cta_clignote 0.7s ease-in-out infinite;
}

.cta_dock_son {
    background: #FFF4DE;
    color: #FFA800;
}

/* Qui parle : vert et nom en gros pendant une reception, rouge quand vous parlez */
.cta_dock_parole {
    display: flex;
    flex: 0 0 330px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 44px;
    padding: 0 6px;
    border-radius: 9px;
    background: #F3F6F9;
    transition: background-color 0.15s ease;
}

.cta_dock_parole_cliquable {
    cursor: pointer;
}

.cta_dock_parole_icone {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E4E6EF;
    color: #7E8299;
    font-size: 14px;
}

.cta_dock_parole_texte {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.cta_dock_parole_texte b,
.cta_dock_parole_texte small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cta_dock_parole_texte b {
    color: #3F4254;
    font-size: 13.5px;
}

.cta_dock_parole_texte small {
    color: #7E8299;
    font-size: 11.5px;
    font-weight: 600;
}

.cta_dock_parole_rx {
    background: #1BC5BD;
    animation: cta_dock_parle 1.2s ease-in-out infinite;
}

.cta_dock_parole_tx {
    background: #F64E60;
}

.cta_dock_parole_rx .cta_dock_parole_icone,
.cta_dock_parole_tx .cta_dock_parole_icone {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

.cta_dock_parole_rx .cta_dock_parole_texte b,
.cta_dock_parole_rx .cta_dock_parole_texte small,
.cta_dock_parole_tx .cta_dock_parole_texte b,
.cta_dock_parole_tx .cta_dock_parole_texte small {
    color: #FFFFFF;
}

.cta_dock_parole_rx .cta_dock_parole_texte b {
    font-size: 15px;
}

.cta_dock_parole_attente {
    background: #FFF4DE;
}

.cta_dock_parole_attente .cta_dock_parole_icone {
    background: #FFA800;
    color: #FFFFFF;
    animation: cta_clignote 0.4s ease-in-out infinite;
}

.cta_dock_parole_sos {
    background: #FFE2E5;
    box-shadow: inset 0 0 0 2px #F64E60;
}

.cta_dock_parole_sos .cta_dock_parole_icone {
    background: #F64E60;
    color: #FFFFFF;
}

.cta_dock_parole_sos .cta_dock_parole_texte b {
    color: #F64E60;
}

.cta_dock_parole_dernier .cta_dock_parole_icone {
    background: #E1F0FF;
    color: #3699FF;
}

.cta_dock_parole_hors .cta_dock_parole_icone {
    background: #FFE2E5;
    color: #F64E60;
}

@keyframes cta_dock_parle {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(27, 197, 189, 0.55);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(27, 197, 189, 0);
    }
}

.cta_dock_reecoute {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: #E1F0FF;
    color: #3699FF;
    cursor: pointer;
}

.cta_dock_reecoute:hover,
.cta_dock_reecoute.lecture {
    background: #3699FF;
    color: #FFFFFF;
}

/* Canaux de la barre : epingles (trait plein), de passage (pointilles) ; bleu : canal de reponse.
   Trois rangees au plus avant de defiler */
.cta_dock_canaux {
    display: flex;
    flex: 1 1 0;
    flex-wrap: wrap;
    align-content: center;
    gap: 5px;
    min-width: 0;
    max-height: 102px;
    padding: 2px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.cta_dock_canal {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 29px;
    padding: 0 10px 0 9px;
    border: 1px solid #E4E6EF;
    border-radius: 7px;
    background: #FFFFFF;
    color: #3F4254;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.cta_dock_canal:hover {
    background: #F3F6F9;
}

.cta_dock_canal_passage {
    border-style: dashed;
    border-color: #B5B5C3;
}

.cta_dock_canal.choisi {
    border-color: #3699FF;
    background: #E1F0FF;
    color: #3699FF;
    box-shadow: inset 0 0 0 1px #3699FF;
}

.cta_dock_canal.choisi .cta_radio_voyant {
    background: #3699FF;
}

.cta_dock_canal.muet {
    color: #B5B5C3;
    text-decoration: line-through;
}

.cta_dock_canal.non_affilie .cta_radio_voyant {
    background: #FFA800;
}

.cta_dock_canal.rx {
    border-color: #1BC5BD;
    background: #1BC5BD;
    color: #FFFFFF;
    text-decoration: none;
}

.cta_dock_canal.rx .cta_radio_voyant {
    background: #FFFFFF;
    animation: cta_clignote 0.8s ease-in-out infinite;
}

.cta_dock_canal.rx.choisi {
    box-shadow: 0 0 0 2px #3699FF;
}

.cta_dock_canal.rx.muet {
    background: #C9F7F5;
    color: #1BC5BD;
    text-decoration: line-through;
}

.cta_dock_canal.tx {
    border-color: #F64E60;
    background: #F64E60;
    color: #FFFFFF;
}

.cta_dock_canal.tx .cta_radio_voyant {
    background: #FFFFFF;
}

.cta_dock_canal.attente {
    border-color: #FFA800;
    background: #FFF4DE;
    color: #FFA800;
}

.cta_dock_canal.attente .cta_radio_voyant {
    background: #FFA800;
    animation: cta_clignote 0.4s ease-in-out infinite;
}

.cta_dock_canal.sos {
    box-shadow: 0 0 0 2px #F64E60;
}

/* Reponse au dernier canal entendu (Auto) ou canal fixe */
.cta_dock_suivre {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 48px;
    height: 44px;
    border: 1px solid #EBEDF3;
    border-radius: 9px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
}

.cta_dock_suivre i {
    font-size: 13px;
}

.cta_dock_suivre.actif {
    border-color: #BDDCFF;
    background: #E1F0FF;
    color: #3699FF;
}

/* Appel général (forces de l'ordre) : diffuse une sonnerie sur le canal choisi.
   Voisin d'« Auto », de la même taille, mais en rouge — il parle à tout le
   réseau. À ne pas confondre avec .cta_radio_couper, le bouton d'extinction de
   la radio, qui existait avant. */
.cta_dock_general {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 48px;
    height: 44px;
    border: 1px solid #FFE2E5;
    border-radius: 9px;
    background: #FFF5F6;
    color: #F64E60;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.cta_dock_general i {
    font-size: 13px;
}

.cta_dock_general:hover {
    border-color: #F64E60;
    background: #FFE2E5;
}

/* Alternat de la barre : canal de reponse (en bleu) et touche */
.cta_radio_ptt.cta_dock_ptt {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 10px;
    width: 230px;
    height: 44px;
    padding: 0 12px;
    border-radius: 9px;
}

.cta_dock_ptt i {
    font-size: 18px;
}

.cta_dock_ptt span {
    min-width: 0;
}

.cta_dock_ptt b,
.cta_dock_ptt small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cta_dock_ptt b {
    font-size: 13px;
}

.cta_dock_ptt:not(.actif) b {
    color: #3699FF;
}

.cta_dock_ptt small {
    font-size: 11px;
}

.cta_dock_ptt.cta_dock_bascule {
    animation: cta_dock_bascule 0.5s ease-in-out 3;
}

@keyframes cta_dock_bascule {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(54, 153, 255, 0.8);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(54, 153, 255, 0);
    }
}

/* Message bref (canal occupe, micro refuse...) au-dessus de la barre */
.cta_dock_info {
    position: absolute;
    right: 14px;
    bottom: calc(100% + 8px);
    max-width: 420px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #3F4254;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.cta_dock_info.visible {
    opacity: 1;
    transform: none;
}

/* Service prevenu de proche en proche (interconnexions_indirectes) : il n'est pas
   sur notre fiche, mais sur celle d'un partenaire. Pastille discrete, en creux,
   pour qu'on la distingue d'un service qu'on a prevenu soi-meme. */
.syn_pastille_chaine {
    color: #7E8299;
    background-color: transparent;
    border: 1px dashed #D1D3E0;
}

.syn_pastille_chaine i { color: #B5B5C3; }

/* Place laissee a la barre : bas de la page, fenetres du site, notifications, alertes

   La reserve va sur .wrapper, PAS sur body. Metronic impose a ce dernier
   height: 100% (avec box-sizing: border-box) : un padding-bottom y serait pris
   DANS la hauteur de l'ecran au lieu d'allonger la page, et le bas du contenu
   resterait sous la barre — c'est ce qui masquait la pagination des
   interventions cloturees et la fin des textes longs.

   La reserve REMPLACE le padding bas de .content (25px chez Metronic) au lieu
   de s'y ajouter : sinon elle s'empilait avec lui ET avec la marge gutter-b de
   la derniere carte, laissant 60px de vide au-dessus de la barre. Ainsi le bas
   de page garde le rythme habituel — la marge de la carte, puis la barre. */
body.cta_dock_visible .content {
    padding-bottom: calc(var(--cta-dock-espace, 0px) + 8px);
}

body.cta_dock_visible .modal {
    padding-bottom: var(--cta-dock-espace, 0px);
}

body.cta_dock_visible .swal2-container {
    padding-bottom: calc(var(--cta-dock-espace, 0px) + 10px);
}

body.cta_dock_visible #cta_notifications,
body.cta_dock_visible .scrolltop {
    bottom: calc(var(--cta-dock-espace, 0px) + 12px);
}

body.cta_dock_visible .cta_detresse,
body.cta_dock_visible .cta_urgente {
    max-height: calc(100vh - 78px - var(--cta-dock-espace, 0px));
}

body.cta_dock_visible .cta_urgente {
    overflow-y: auto;
}

body.cta_dock_visible .cta_interservices {
    max-height: calc(100vh - 88px - var(--cta-dock-espace, 0px));
}

/* Poste complet : ouvert juste au-dessus de la barre, par-dessus les fenetres du site */
#cta_panneau_radio.cta_radio_panneau_dock {
    top: auto;
    right: 12px;
    bottom: calc(var(--cta-dock-espace, 0px) + 8px);
    z-index: 1054;
    height: calc(100vh - 88px - var(--cta-dock-espace, 0px));
    max-height: 640px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
}

@media print {
    .cta_dock {
        display: none;
    }

    /* A l'impression la barre n'existe pas : sa reserve non plus */
    body.cta_dock_visible .content {
        padding-bottom: 25px;
    }
}

@media (max-width: 1399px) {
    .cta_dock_parole {
        flex-basis: 290px;
    }

    .cta_radio_ptt.cta_dock_ptt {
        width: 200px;
    }
}

@media (max-width: 1199px) {
    .cta_dock_poste span,
    .cta_dock_son span {
        display: none;
    }

    .cta_dock_parole {
        flex-basis: 250px;
    }

    .cta_radio_ptt.cta_dock_ptt {
        width: 180px;
    }
}

@media (max-width: 991px) {
    #cta_panneau_radio {
        width: 100%;
    }

    .cta_dock_parole {
        flex-basis: 210px;
    }

    .cta_radio_ptt.cta_dock_ptt {
        width: 160px;
    }

    #cta_panneau_radio.cta_radio_panneau_dock {
        position: fixed;
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
        height: calc(100vh - 70px - var(--cta-dock-espace, 0px));
        max-height: 560px;
        border: 1px solid #EBEDF3;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
    }

    .cta_detresse,
    .cta_urgente {
        top: 10px;
    }
}

/* Telephone : qui parle et alternat sur la premiere ligne, canaux sur la seconde */
@media (max-width: 767px) {
    .cta_dock {
        right: 6px;
        bottom: 6px;
        left: 6px;
    }

    .cta_dock_radio {
        display: grid;
        grid-template-areas: "gauche parole ptt" "suivre canaux general";
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 6px;
        padding: 6px;
    }

    .cta_dock_gauche {
        grid-area: gauche;
    }

    .cta_dock_poste,
    .cta_dock_sos,
    .cta_dock_son {
        padding: 0 10px;
    }

    .cta_dock_sos b {
        display: none;
    }

    .cta_dock_parole {
        grid-area: parole;
        padding: 0 4px 0 10px;
    }

    .cta_dock_parole_icone {
        display: none;
    }

    .cta_dock_canaux {
        grid-area: canaux;
        flex-wrap: nowrap;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .cta_dock_canaux::-webkit-scrollbar {
        display: none;
    }

    .cta_dock_canal {
        flex: 0 0 auto;
    }

    .cta_dock_suivre {
        grid-area: suivre;
        flex-direction: row;
        gap: 5px;
        width: auto;
        height: 29px;
        padding: 0 8px;
    }

    .cta_dock_general {
        grid-area: general;
        flex-direction: row;
        gap: 5px;
        width: auto;
        height: 29px;
        padding: 0 8px;
    }

    .cta_radio_ptt.cta_dock_ptt {
        grid-area: ptt;
        width: 132px;
        gap: 6px;
        padding: 0 8px;
    }

    .cta_dock_ptt i {
        font-size: 15px;
    }

    .cta_dock_ptt b {
        font-size: 12px;
    }

    .cta_dock_ptt small {
        display: none;
    }

    .cta_dock_info {
        right: 0;
        left: 0;
        max-width: none;
    }
}

/* Bilans des victimes (cta.js) : bouton du synoptique, avec le nombre de victimes à la couleur de
   la plus grave et un point rouge tant qu'un bilan transmis ou un message d'équipe attend ; fenêtre
   des bilans (bilan.php dans un cadre) */
.cta_bilans_bouton {
    position: relative;
    overflow: visible !important;
}

.cta_bilans_pastille {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #FFFFFF;
    border-radius: 9px;
    background: #7E8299;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    pointer-events: none;
}

.cta_bilans_pastille.cta_bilans_ur {
    background: #FFA800;
}

.cta_bilans_pastille.cta_bilans_ua {
    background: #F64E60;
}

.cta_bilans_pastille.cta_bilans_dcd {
    background: #181C32;
}

.cta_bilans_nouveau::after {
    content: '';
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 11px;
    height: 11px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #F64E60;
    animation: cta_clignote 1.2s ease-in-out infinite;
    pointer-events: none;
}

.cta_bilans_fenetre .modal-xl {
    max-width: min(1320px, calc(100vw - 40px));
}

/* La fenêtre laisse la place à la barre radio, qui passe devant (--cta-dock-espace, cta.js) */
.cta_bilans_fenetre .modal-dialog-centered {
    margin-top: 14px;
    margin-bottom: calc(14px + var(--cta-dock-espace, 0px));
}

.cta_bilans_cadre {
    display: block;
    width: 100%;
    height: calc(100vh - 128px - var(--cta-dock-espace, 0px));
    min-height: 360px;
    border: 0;
    border-radius: 0 0 0.42rem 0.42rem;
}

.cta_is_bilan .cta_is_type::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: #FFA800;
    vertical-align: middle;
}

/* Intervention ouverte automatiquement (détresse radio, alarme incendie) : bordure en pointillés,
   repère dans le titre et engagement rapide proposé tant qu'aucun moyen n'est engagé */
.syn_inter_auto {
    border-left-style: dashed;
    background: linear-gradient(90deg, #FFF9EF 0, #FFFFFF 260px);
}

.syn_auto {
    background: #FFF4DE;
    color: #FFA800;
}

.syn_auto i {
    margin-right: 5px;
    color: #FFA800;
}

/* Intervention arretee puis rouverte : meme liseré en pointillés que les
   interventions automatiques, mais bleu, pour qu'on voie d'un coup d'oeil
   qu'elle a deja eu une premiere vie. */
.syn_inter_rouverte {
    border-left-style: dashed;
    background: linear-gradient(90deg, #EEF4FF 0, #FFFFFF 260px);
}

.syn_rouverte {
    background: #E1F0FF;
    color: #3699FF;
}

.syn_rouverte i {
    margin-right: 5px;
    color: #3699FF;
}

/* Intervention DIFFEREE : elle existe, aucun moyen n'y est engage, elle attend
   d'etre traitee. Un gris d'attente, volontairement discret : elle ne doit pas
   crier plus fort qu'une intervention en cours, seulement se distinguer.

   Ce n'est pas un etat stocke, c'est un constat — une fiche ouverte sans engin.
   Le cron ne la ferme plus (include/cron/cloture_interventions.php). */
.syn_inter_differee {
    border-left-style: dotted;
    background: linear-gradient(90deg, #F4F5F8 0, #FFFFFF 260px);
}

.syn_differee {
    background: #EBEDF3;
    color: #7E8299;
}

.syn_differee i {
    margin-right: 5px;
    color: #B5B5C3;
}

/* Rattacher une demande interservices a une intervention deja en cours
   (interservices_modal_rattacher.php). La liste des fiches ouvertes, avec de
   quoi reconnaitre la bonne d'un coup d'oeil : numero, sinistre, lieu, heure. */
.rat_liste {
    display: flex;
    flex-direction: column;
}

.rat_ligne {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #EBEDF3;
}

.rat_ligne:last-child {
    border-bottom: 0;
}

.rat_milieu {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 12px;
}

.rat_numero {
    color: #3F4254;
    font-weight: 700;
}

.rat_sinistre {
    margin-left: 8px;
    color: #3F4254;
}

.rat_lieu,
.rat_quand {
    display: block;
    color: #B5B5C3;
    font-size: .85rem;
}

.rat_lieu i,
.rat_quand i {
    margin-right: 5px;
    font-size: 10px;
    color: #D1D3E0;
}

.rat_deja {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 7px;
    border-radius: 4px;
    background: #FFF4DE;
    color: #FFA800;
    font-size: .75rem;
}

.rat_deja i {
    margin-right: 4px;
    font-size: 9px;
    color: #FFA800;
}

.syn_vide .btn + .btn {
    margin-left: 4px;
}

/* ==========================================================================
   Fenêtre « Réception des appels »
   Les appels qui arrivent au centre, quelle que soit leur source. Aujourd'hui
   les bornes d'urgence du réseau autoroutier ; d'autres suivront.
   ========================================================================== */

.app_corps { display: flex; flex-direction: column; gap: 12px; height: 100%; }

.app_fiche {
    padding: 13px 15px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #EBEDF3;
}

/* Un appel qui n'est pas décroché doit attraper l'œil */
.app_sonne {
    border-color: #F64E60;
    background: #FFF5F6;
    animation: app_battre 1.6s ease-in-out infinite;
}

@keyframes app_battre {
    0%, 100% { box-shadow: 0 0 0 0 rgba(246, 78, 96, .28); }
    50% { box-shadow: 0 0 0 6px rgba(246, 78, 96, 0); }
}

@media (prefers-reduced-motion: reduce) { .app_sonne { animation: none; } }

.app_pris { border-color: #C9F7F5; background: #F8FFFE; }

.app_tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.app_source {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #B5B5C3;
}

.app_sonne .app_source { color: #F64E60; }
.app_temps { font-size: .7rem; color: #B5B5C3; font-variant-numeric: tabular-nums; }

.app_nom { font-size: .92rem; font-weight: 700; color: #181C32; }

.app_lieu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 10px;
    margin-top: 5px;
    font-size: .72rem;
    color: #7E8299;
}

.app_motif {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    font-size: .8rem;
    font-weight: 600;
    color: #F64E60;
}

.app_details {
    margin-top: 5px;
    padding: 7px 10px;
    border-radius: 7px;
    background: #F3F6F9;
    font-size: .76rem;
    color: #3F4254;
    white-space: pre-line;
}

.app_appelant,
.app_pris_par {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    font-size: .74rem;
    color: #7E8299;
}

.app_pris_par { color: #1BC5BD; font-weight: 600; }

.app_actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
}

.app_actions .rou_valider { flex: 1 1 auto; justify-content: center; }

/* Le bouton de l'en-tête bat tant qu'un appel attend */
.cta_logiciel_bouton.alerte {
    background: #FFE2E5;
    color: #F64E60;
    animation: app_battre 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) { .cta_logiciel_bouton.alerte { animation: none; } }

/* ==========================================================================
   Fiche de poste de l'opérateur (cta_modal_informations.php)
   Une page de références, pas un formulaire : tout doit se lire d'un coup
   d'œil, sans avoir à cliquer.
   ========================================================================== */

.fpo_corps { padding: 20px 24px; }

.fpo_bloc { margin-bottom: 26px; }
.fpo_bloc:last-child { margin-bottom: 0; }

.fpo_titre {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #EBEDF3;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #B5B5C3;
}

.fpo_titre i { color: #7E8299; font-size: .9rem; }

.fpo_grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

/* ---- Les moyens : le chiffre qui décide d'un départ ---- */

.fpo_moyen {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    padding: 12px 14px;
    border-radius: 9px;
    background: #F9FAFC;
    border: 1px solid #EBEDF3;
}

.fpo_moyen b { font-size: .92rem; font-weight: 700; color: #181C32; }

.fpo_compte {
    grid-row: span 2;
    align-self: center;
    font-size: 1.45rem;
    font-weight: 700;
    color: #1BC5BD;
    line-height: 1;
}

.fpo_compte em { font-style: normal; font-size: .8rem; font-weight: 600; color: #B5B5C3; }

.fpo_moyen_vide { background: #FFF5F6; border-color: #FFC9CD; }
.fpo_moyen_vide .fpo_compte { color: #F64E60; }

.fpo_detail { font-size: .72rem; color: #7E8299; line-height: 1.35; }

.fpo_note { margin: 10px 0 0; font-size: .7rem; color: #B5B5C3; }

/* ---- Rubriques : canaux, services, statuts ---- */

.fpo_rubrique {
    padding: 12px 14px;
    border-radius: 9px;
    background: #F9FAFC;
    border: 1px solid #EBEDF3;
}

.fpo_rubrique > b {
    display: block;
    margin-bottom: 9px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #7E8299;
}

.fpo_canaux { display: flex; flex-wrap: wrap; gap: 6px; }

.fpo_canal,
.fpo_statut,
.fpo_service {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 6px;
    background: #FFFFFF;
    border: 1px solid #E4E6EF;
    font-size: .72rem;
    font-weight: 600;
    color: #3F4254;
}

.fpo_canal em,
.fpo_statut em {
    font-style: normal;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

/* Un statut porte ses vraies couleurs : c'est ce qu'on verra sur le synoptique */
.fpo_statut { border-color: transparent; }

/* Chaque service garde sa teinte, comme partout ailleurs */
.fpo_service_sp { border-color: #F64E60; color: #F64E60; }
.fpo_service_fdo { border-color: #3699FF; color: #3699FF; }
.fpo_service_sam { border-color: #FFA800; color: #B77A00; }
.fpo_service_rou { border-color: #15803D; color: #15803D; }

.fpo_vide {
    padding: 16px;
    border-radius: 9px;
    background: #F9FAFC;
    border: 1px dashed #E4E6EF;
    font-size: .78rem;
    color: #B5B5C3;
    text-align: center;
}

@media (max-width: 767px) {
    .fpo_corps { padding: 16px; }
    .fpo_grille { grid-template-columns: 1fr; }
}

/* ---- Vue 3D du terrain (assets/js/carte3d.js) ---- */

/* Un voile plein ecran, au-dessus de tout — y compris de la barre radio
   flottante, qui est a 1065. */
.c3d {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: #0F1A24;
}

.c3d_barre {
    flex: none;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: #16222E;
    color: #E4E6EF;
}

.c3d_barre b { display: flex; align-items: center; font-size: .98rem; font-weight: 600; }
.c3d_barre b i { margin-right: 9px; color: #3699FF !important; }

.c3d_aide { margin-left: 18px; color: #7E8299; font-size: .82rem; }

.c3d_fermer {
    margin-left: auto;
    width: 32px; height: 32px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: #E4E6EF;
    cursor: pointer;
}
.c3d_fermer:hover { background: #F64E60; color: #FFFFFF; }
.c3d_fermer i { margin: 0 !important; font-size: 14px; color: inherit !important; }

/* La scene occupe tout le reste. position:relative porte l'infobulle. */
.c3d_scene { position: relative; flex: 1 1 auto; min-height: 0; }
.c3d_scene canvas { display: block; }

/* Le chargement : 12 Mo passent, on montre ou on en est plutot qu'un ecran noir */
.c3d_chargement {
    position: absolute;
    top: 50%; left: 50%;
    width: 300px;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #E4E6EF;
}
.c3d_chargement b { display: block; margin-bottom: 12px; font-weight: 600; }
.c3d_chargement small { display: block; margin-top: 8px; color: #7E8299; font-size: .82rem; }

.c3d_jauge { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.c3d_jauge i { display: block; height: 100%; width: 0; border-radius: 2px; background: #3699FF; transition: width .2s ease; }

.c3d_prete .c3d_chargement { display: none; }

.c3d_infobulle {
    position: absolute;
    z-index: 2;
    max-width: 260px;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(15, 26, 36, .92);
    color: #FFFFFF;
    font-size: .85rem;
    white-space: nowrap;
    pointer-events: none;
}

/* Le bouton de l'en-tete pendant le chargement */
.carte_3d_attente { opacity: .6; pointer-events: none; }
.carte_3d_attente i { animation: c3d_tourne 1.1s linear infinite; }

@keyframes c3d_tourne { to { transform: rotate(360deg); } }

/* ---- Telephone ---- */
@media (max-width: 767px) {
    .c3d_aide { display: none; }
}

/* ====================================================================
   COD : VUES DU CIEL ET CAMÉRAS DE SURVEILLANCE
   ====================================================================
   Les listes sous la carte de l'événement (cta.js, cta_cod_ciel et
   cta_cod_cameras), puis la vue plein écran d'une caméra : panorama à 360°
   et direct (assets/js/cod_cameras.js). */

.cod_photos,
.cod_cameras {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

.cod_photos > .cod_elements_vide,
.cod_cameras > .cod_elements_vide {
    grid-column: 1 / -1;
}

/* Une vue du ciel : sa vignette, son texte, ses réglages d'affichage */
.cod_ciel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    background: #FFFFFF;
}

.cod_ciel_ajuste {
    border-color: #3699FF;
    box-shadow: 0 0 0 2px rgba(54, 153, 255, .15);
}

.cod_ciel_vignette {
    flex: none;
    width: 88px;
    height: 56px;
    border-radius: 6px;
    background: #F3F6F9;
    object-fit: cover;
    cursor: pointer;
}

.cod_ciel_texte,
.cod_cam_texte {
    display: flex;
    flex: 1 1 140px;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: #3F4254;
    font-size: 12px;
}

.cod_ciel_texte b,
.cod_cam_texte b {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cod_ciel_texte small,
.cod_cam_texte small {
    color: #7E8299;
    font-size: 11px;
    line-height: 1.35;
}

.cod_ciel_reglages {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.cod_ciel_reglages input[type="range"],
.cod_ciel_ajust input[type="range"] {
    flex: 1 1 80px;
    min-width: 0;
    max-width: 160px;
    height: 4px;
    accent-color: #3699FF;
}

.cod_ciel_oeil {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #F3F6F9;
    color: #B5B5C3;
    font-size: 11px;
    cursor: pointer;
}

.cod_ciel_oeil.actif {
    background: #E1F0FF;
    color: #3699FF;
}

.cod_ciel_actions,
.cod_cam_actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
}

/* Réglage de l'échelle et de la position d'une vue sur la carte */
.cod_ciel_ajust {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px dashed #EBEDF3;
    font-size: 12px;
}

.cod_ciel_ajust_ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.cod_ciel_ajust_ligne > span {
    width: 62px;
    color: #7E8299;
    font-weight: 600;
}

.cod_ciel_ajust_ligne > small {
    flex: 1 1 180px;
    color: #7E8299;
}

.cod_ciel_ajust_ligne output {
    min-width: 42px;
    color: #3F4254;
    font-weight: 600;
}

.cod_ciel_ajust_ligne select {
    height: 26px;
    margin-left: 6px;
    border: 1px solid #E4E6EF;
    border-radius: 6px;
    background: #FFFFFF;
    font-size: 12px;
}

/* Une caméra : pastille, nom, actions */
.cod_cam {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #EBEDF3;
    border-radius: 8px;
    background: #FFFFFF;
}

.cod_cam_icone {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #8950FC;
    color: #FFFFFF;
    font-size: 14px;
}

/* La foule en direct : son resume dans le titre du bloc des cameras */
.cod_foule_resume {
    margin-left: 10px;
    color: #1BC5BD;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

.cod_foule_resume:empty { display: none; }
.cod_foule_vieux { color: #FFA800; }

/* La vue d'une caméra : un voile plein écran, au-dessus de tout — y compris de la barre radio flottante (1065) */
.camv {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: #0B1118;
    color: #E4E6EF;
}

.camv [hidden] { display: none !important; }

.camv_barre {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-height: 48px;
    padding: 6px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: #16222E;
}

.camv_titre {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: .98rem;
    font-weight: 600;
}

.camv_titre i { margin-right: 9px; color: #8950FC; }

.camv_titre small {
    max-width: 28vw;
    margin-left: 10px;
    overflow: hidden;
    color: #7E8299;
    font-size: .82rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.camv_badge {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.camv_puce {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    color: #B5B5C3;
    font-size: .78rem;
    font-weight: 600;
}

.camv_puce i { margin: 0; font-size: .7rem; color: inherit; }
.camv_puce_vert { background: rgba(27, 197, 189, .18); color: #4FE0D8; }
.camv_puce_orange { background: rgba(255, 168, 0, .16); color: #FFC04D; }
.camv_puce_rouge { background: rgba(246, 78, 96, .18); color: #FF8A98; }

.camv_clignote { animation: camv_clignote 1.2s ease-in-out infinite; }
.camv_tourne { animation: c3d_tourne 1.1s linear infinite; }

@keyframes camv_clignote { 50% { opacity: .25; } }

.camv_actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.camv_bouton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 11px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    color: #E4E6EF;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.camv_bouton i { margin: 0; color: inherit; font-size: .8rem; }
.camv_bouton:hover { background: rgba(255, 255, 255, .14); }
.camv_bouton:disabled { opacity: .5; cursor: default; }
.camv_bouton_actif { background: rgba(54, 153, 255, .3); color: #FFFFFF; }

.camv_fermer {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: #E4E6EF;
    cursor: pointer;
}

.camv_fermer:hover { background: #F64E60; color: #FFFFFF; }
.camv_fermer i { margin: 0; color: inherit; font-size: 14px; }

/* La scène occupe tout le reste ; le doigt ou la souris la fait tourner */
.camv_scene {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.camv_saisie { cursor: grabbing; }
.camv_scene canvas { display: block; }

.camv_autres {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 100px);
}

.camv_chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    background: rgba(11, 17, 24, .66);
    color: #E4E6EF;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

.camv_chip i { margin: 0; color: #8950FC; font-size: .72rem; }
.camv_chip:hover { background: rgba(11, 17, 24, .9); }
.camv_chip_actif { border-color: #8950FC; background: rgba(137, 80, 252, .3); }

/* Boussole : la rose tourne avec la vue, le repère rouge en haut est la direction regardée */
.camv_boussole {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(11, 17, 24, .62);
    pointer-events: none;
}

.camv_boussole::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #F64E60;
    border-bottom: 0;
}

.camv_boussole i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }

.camv_boussole s {
    position: absolute;
    color: #B5B5C3;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.camv_boussole s:nth-child(1) { top: 6px; left: 50%; transform: translateX(-50%); color: #F64E60; font-size: 12px; }
.camv_boussole s:nth-child(2) { top: 50%; right: 7px; transform: translateY(-50%); }
.camv_boussole s:nth-child(3) { bottom: 6px; left: 50%; transform: translateX(-50%); }
.camv_boussole s:nth-child(4) { top: 50%; left: 7px; transform: translateY(-50%); }

.camv_message {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(340px, 86%);
    padding: 16px;
    border-radius: 10px;
    background: rgba(11, 17, 24, .78);
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.camv_message span { color: #B5B5C3; font-size: .85rem; }

/* Avec la foule en direct, le message se range en bas de la scene pour ne pas cacher les marques */
.camv_message_bas { top: auto; bottom: 74px; transform: translateX(-50%); }

.camv_jauge { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.camv_jauge i { display: block; height: 100%; border-radius: 2px; background: #8950FC; transition: width .2s ease; }

.camv_bas {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 26px 14px 10px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
    pointer-events: none;
}

.camv_mesure {
    color: #E4E6EF;
    font-size: .82rem;
    font-weight: 600;
    text-shadow: 0 1px 2px #000;
}

.camv_zoom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    pointer-events: auto;
}

.camv_zoom button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #FFFFFF;
    cursor: pointer;
}

.camv_zoom button:hover { background: rgba(255, 255, 255, .26); }
.camv_zoom button i { margin: 0; color: inherit; font-size: 12px; }
.camv_zoom input[type="range"] { width: 160px; accent-color: #8950FC; }

/* COD : quadrillage (cases A1 a Z26). Barre a droite du titre de la SITAC, couche de la carte (canvas dans le plan « cod_grille », sous les
   reperes), couche des cameras (canvas sur le rendu 3D) et ruban des caps en haut de la vue : les puces des autres cameras descendent d'un cran. */
.cod_quadrillage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    letter-spacing: normal;
    text-transform: none;
}

.cod_quadrillage .cod_bascule { margin: 0; }
.cod_quadrillage .btn i { margin: 0 6px 0 0; color: inherit; }
.cod_quadrillage .btn.btn-icon i { margin: 0; }

.cod_quadrillage_curseur {
    min-width: 62px;
    color: #3699FF;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.cod_quadrillage_pas {
    height: 24px;
    padding: 0 4px;
    border: 1px solid #E4E6EF;
    border-radius: 6px;
    background: #FFFFFF;
    color: #3F4254;
    font-size: 11px;
    font-weight: 600;
}

.cod_grille_toile {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.camv_grille {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.camv_scene.camv_grille_active .camv_autres { top: 32px; }

/* COD : carte lisible. Une etiquette qui en chevaucherait une autre est masquee (cta_cod_etiquettes) ; elle revient au survol de son symbole, qui passe
   alors au premier plan. */
.cod_masque { visibility: hidden !important; }

.cod_symbole:hover .cod_symbole_nom.cod_masque,
.leaflet-marker-icon:hover .carte_pin_numero.cod_masque { visibility: visible !important; z-index: 20; }

.leaflet-marker-icon.cod_sur_carte:hover { z-index: 10000 !important; }

.cod_recadrer { margin-left: 4px; }
.cod_recadrer i { margin: 0; color: inherit; }

/* COD : les APERCUS des vues du ciel et des cameras. Une carte par vue : l'image en grand (16/9), des puces dessus (case du quadrillage, altitude,
   profondeur manquante), le texte et les actions dessous. Sur une camera, la souris fait tourner la vue sur le tour d'horizon. */
.cod_photos,
.cod_cameras { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

.cod_apercu {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.cod_apercu:hover {
    border-color: #D1D3E0;
    box-shadow: 0 4px 14px rgba(24, 28, 50, .10);
}

.cod_apercu_image {
    position: relative;
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0E141B;
    cursor: pointer;
}

.cod_apercu_image img,
.cod_apercu_image .cod_ciel_vignette {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    transition: transform .25s ease, opacity .2s ease;
}

.cod_apercu:hover .cod_apercu_image img { transform: scale(1.03); }
.cod_apercu_masque .cod_apercu_image img { opacity: .4; }

.cod_apercu_vide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: repeating-linear-gradient(45deg, #121A24, #121A24 10px, #16212D 10px, #16212D 20px);
    color: #8C94A8;
    font-size: 12px;
    font-weight: 600;
}

.cod_apercu_vide i { color: #8950FC; font-size: 22px; }

.cod_apercu_puces {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: calc(100% - 16px);
    pointer-events: none;
}

.cod_apercu_puce,
.cod_apercu_dim,
.cod_apercu_cap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border-radius: 11px;
    background: rgba(11, 17, 24, .74);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
}

.cod_apercu_puce i { margin: 0; color: inherit; font-size: 10px; }
.cod_apercu_alerte { background: rgba(255, 168, 0, .94); color: #3D2A00; }

.cod_apercu_dim,
.cod_apercu_cap {
    position: absolute;
    bottom: 8px;
    pointer-events: none;
}

.cod_apercu_dim { right: 8px; }

/* Le cap de la vue pendant le balayage : seulement quand la souris est dessus */
.cod_apercu_cap {
    left: 8px;
    opacity: 0;
    transition: opacity .15s ease;
}

.cod_apercu_cap:empty { display: none; }
.cod_apercu_image:hover .cod_apercu_cap { opacity: 1; }

.cod_apercu_jouer {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border-radius: 20px;
    background: rgba(54, 153, 255, .96);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    line-height: 32px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.92);
    transition: opacity .15s ease, transform .15s ease;
}

.cod_apercu_jouer i { margin: 0; color: inherit; font-size: 11px; }

.cod_apercu_image:hover .cod_apercu_jouer {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.cod_apercu_corps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 9px 11px 10px;
}

/* L'aperçu d'une vue du ciel en grand (fenêtre) */
.cod_fenetre .swal2-image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 62vh;
    border-radius: 8px;
    object-fit: contain;
}

@media (max-width: 767px) {
    .cod_photos,
    .cod_cameras { grid-template-columns: 1fr; }
    .cod_ciel_actions,
    .cod_cam_actions { flex: 1 0 100%; }
    .camv_bouton span,
    .camv_titre small { display: none; }
    .camv_bouton { padding: 0 9px; }
    .camv_zoom input[type="range"] { width: 100px; }
    .camv_boussole { width: 52px; height: 52px; }
}

/* ====================================================================
   RÉGLAGES DES ALERTES  (global.js + include/js/alertes.js)
   ====================================================================
   Le haut-parleur du SGO devient un bouton de réglages : quelles alertes
   sonnent, quelles notifications s'affichent, et dans quel coin.

   L'EMPLACEMENT DES BULLES est porté par data-coin sur #cta_notifications.
   Chaque variante remet les quatre côtés à auto avant de poser les siens :
   la règle de base garde « right/bottom: 20px » et il faut les annuler. */

#cta_notifications[data-coin="hg"] { top: 78px; right: auto; bottom: auto; left: 20px; }
#cta_notifications[data-coin="hd"] { top: 78px; right: 20px; bottom: auto; left: auto; }
#cta_notifications[data-coin="bg"] { top: auto; right: auto; bottom: 20px; left: 20px; }
#cta_notifications[data-coin="bd"] { top: auto; right: 20px; bottom: 20px; left: auto; }

#cta_notifications[data-coin="hc"],
#cta_notifications[data-coin="bc"] {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

#cta_notifications[data-coin="hc"] { top: 78px; bottom: auto; }
#cta_notifications[data-coin="bc"] { top: auto; bottom: 20px; }

/* Une bulle posée à gauche sort par la gauche */
#cta_notifications[data-coin="hg"] .cta_notification.cta_notification_sortie,
#cta_notifications[data-coin="bg"] .cta_notification.cta_notification_sortie {
    transform: translateX(-24px);
}

#cta_notifications[data-coin="hc"] .cta_notification.cta_notification_sortie { transform: translateY(-24px); }
#cta_notifications[data-coin="bc"] .cta_notification.cta_notification_sortie { transform: translateY(24px); }

/* L'écran qui clignote, arrêté par le réglage. Trois classes contre deux :
   la règle gagne quel que soit l'ordre de chargement de routes.css. */
body.site_alertes_sans_scintille.cta_alerte_contresens .cta_flash {
    display: none;
    animation: none;
}

/* Le bouton, dans la barre du SGO. La pastille dit qu'une alerte est tue :
   un poste réglé en silence ne doit pas en avoir l'air réglé normalement. */
.site_reglages_bouton { position: relative; }

.site_reglages_bouton.site_reglages_retire::after {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #FFA800;
    content: "";
}

/* ---- Le panneau ---- */

.site_reglages_fond {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1300;          /* au-dessus du dock (1065), des bulles (1070) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(24, 28, 50, 0.55);
    animation: site_reglages_fond_entree 0.15s ease;
}

@keyframes site_reglages_fond_entree {
    from { opacity: 0; }
    to { opacity: 1; }
}

.site_reglages {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    width: 560px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    animation: site_reglages_entree 0.18s ease;
}

@keyframes site_reglages_entree {
    from { opacity: 0; transform: translateY(12px) scale(0.99); }
    to { opacity: 1; transform: none; }
}

.site_reglages_tete {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding: 16px 18px;
    border-bottom: 1px solid #EBEDF3;
}

.site_reglages_tete > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    background: #F3F6F9;
    color: #3F4254;
    font-size: 15px;
}

.site_reglages_tete > div { display: flex; flex-direction: column; min-width: 0; }
.site_reglages_tete b { color: #181C32; font-size: 14px; font-weight: 600; }
.site_reglages_tete small { color: #B5B5C3; font-size: 11px; }

.site_reglages_fermer {
    margin-left: auto;
    padding: 0 4px;
    flex: none;
    border: 0;
    background: none;
    color: #B5B5C3;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.site_reglages_fermer:hover { color: #3F4254; }

.site_reglages_corps {
    overflow-y: auto;
    flex: 1 1 auto;
    padding: 6px 18px 14px;
}

.site_reglages_section + .site_reglages_section { margin-top: 6px; }

.site_reglages_titre {
    padding: 14px 0 6px;
    color: #B5B5C3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site_reglages_ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid #F4F6F9;
}

.site_reglages_ligne > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
    background: #F3F6F9;
    color: #7E8299;
    font-size: 12px;
}

.site_reglages_texte { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.site_reglages_texte b { color: #3F4254; font-size: 13px; font-weight: 600; }
.site_reglages_texte small { color: #B5B5C3; font-size: 11px; line-height: 1.35; }

/* Une alerte tue par l'interrupteur général : montrée, mais sans illusion */
.site_reglages_ligne.est-grise > i,
.site_reglages_ligne.est-grise .site_reglages_texte,
.site_reglages_ligne.est-grise .site_reglages_ecouter { opacity: 0.45; }

.site_reglages_ecouter {
    width: 26px;
    height: 26px;
    flex: none;
    border: 1px solid #EBEDF3;
    border-radius: 50%;
    background: #FFFFFF;
    color: #7E8299;
    font-size: 9px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.site_reglages_ecouter:hover { border-color: #3699FF; background: #3699FF; color: #FFFFFF; }

/* ---- L'interrupteur ---- */

.site_reglages_bascule {
    position: relative;
    width: 40px;
    height: 22px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: #E4E6EF;
    cursor: pointer;
    transition: background 0.15s ease;
}

.site_reglages_bascule > span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

.site_reglages_bascule.est-actif { background: #1BC5BD; }
.site_reglages_bascule.est-actif > span { transform: translateX(18px); }

/* ---- L'emplacement, montré comme un écran ---- */

.site_reglages_place {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0 12px;
    border-top: 1px solid #F4F6F9;
}

.site_reglages_ecran {
    display: grid;
    width: 132px;
    height: 84px;
    flex: none;
    padding: 5px;
    gap: 4px;
    border: 1px solid #E4E6EF;
    border-radius: 8px;
    background: #F8FAFC;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    transition: opacity 0.15s ease;
}

.site_reglages_ecran.est-eteint { opacity: 0.4; }

.site_reglages_coin {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    padding: 3px;
    border: 1px dashed #E4E6EF;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    transition: all 0.12s ease;
}

/* Les deux traits figurent une bulle ; en haut, ils se rangent en haut */
.site_reglages_ecran > .site_reglages_coin:nth-child(-n+3) { justify-content: flex-start; }

.site_reglages_coin > span {
    height: 3px;
    border-radius: 2px;
    background: #E4E6EF;
}

.site_reglages_coin > span:last-child { width: 70%; }

.site_reglages_coin:hover { border-color: #B5B5C3; }

.site_reglages_coin.est-choisi {
    border-style: solid;
    border-color: #3699FF;
    background: rgba(54, 153, 255, 0.08);
}

.site_reglages_coin.est-choisi > span { background: #3699FF; }

.site_reglages_ecran_nom {
    display: none;
}

.site_reglages_pied {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 12px 18px;
    border-top: 1px solid #EBEDF3;
    background: #F8FAFC;
}

.site_reglages_remettre,
.site_reglages_valider {
    padding: 7px 16px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.site_reglages_remettre {
    margin-right: auto;
    border-color: #EBEDF3;
    background: #FFFFFF;
    color: #7E8299;
}

.site_reglages_remettre:hover { border-color: #B5B5C3; color: #3F4254; }

.site_reglages_valider { background: #3699FF; color: #FFFFFF; }
.site_reglages_valider:hover { background: #1F86E8; }

/* Téléphone et tablette : le panneau prend la largeur, l'écran passe dessous */
@media (max-width: 575.98px) {
    .site_reglages_fond { padding: 0; }
    .site_reglages { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    .site_reglages_place { flex-direction: column; align-items: flex-start; }
    .site_reglages_ecran { width: 100%; }
}

/* Les familles de notifications : une liste plus serree que les reglages
   principaux, parce qu'elles sont neuf. */
.site_reglages_titre_fin {
    padding-top: 10px;
    padding-bottom: 2px;
}

.site_reglages_ligne_fine { padding: 6px 0; }
.site_reglages_ligne_fine > i { width: 24px; height: 24px; font-size: 11px; }
.site_reglages_ligne_fine .site_reglages_texte b { font-size: 12px; }
.site_reglages_ligne_fine .site_reglages_texte small { font-size: 10px; }

.site_reglages_ligne_fine .site_reglages_bascule { width: 34px; height: 19px; }
.site_reglages_ligne_fine .site_reglages_bascule > span { width: 13px; height: 13px; }
.site_reglages_ligne_fine .site_reglages_bascule.est-actif > span { transform: translateX(15px); }

/* Un choix parmi quelques valeurs : des boutons colles */
.site_reglages_segments {
    display: flex;
    flex: none;
    overflow: hidden;
    border: 1px solid #EBEDF3;
    border-radius: 7px;
}

.site_reglages_segment {
    padding: 5px 9px;
    border: 0;
    border-left: 1px solid #EBEDF3;
    background: #FFFFFF;
    color: #7E8299;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.12s ease;
}

.site_reglages_segment:first-child { border-left: 0; }
.site_reglages_segment:hover { background: #F3F6F9; color: #3F4254; }

.site_reglages_segment.est-choisi {
    background: #3699FF;
    color: #FFFFFF;
}

/* Bulles masquees : leurs filtres n'auraient aucun effet, ils deviennent inertes.
   Les interrupteurs de SONS, eux, restent cliquables quand le son general est
   coupe : on doit pouvoir preparer ses choix avant de le retablir. */
.site_reglages_ligne_fine.est-grise .site_reglages_bascule,
.site_reglages_ligne.est-grise .site_reglages_segments {
    opacity: 0.45;
    pointer-events: none;
}

/* ====================================================================
   LOCALISATION DE L'APPELANT  (include/js/cta/interventions/localisation_appel.js)
   ====================================================================
   Un releve de position : un point, son disque de precision qui se resserre,
   et c'est tout. Le bandeau reprend l'habillage des messages deja poses sous
   cette carte (.creation_carte_etat) : meme taille, meme rondeur, memes
   teintes — il doit avoir l'air d'appartenir au formulaire, pas d'y avoir
   ete greffe. */

/* Le disque de precision. Le rayon est anime en JS image par image : pas de
   transition CSS ici, elle se battrait avec lui. */
.loc_disque {
    fill: #3699FF;
    fill-opacity: 0.09;
    stroke: #3699FF;
    stroke-opacity: 0.55;
    stroke-width: 1.5;
}

/* Le point releve : pastille cerclee de blanc, et son halo qui respire */
.loc_point {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loc_point::before {
    width: 12px;
    height: 12px;
    border: 2.5px solid #FFFFFF;
    border-radius: 50%;
    background: #3699FF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    content: "";
}

.loc_point > span {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3699FF;
    opacity: 0.35;
    animation: loc_souffle 1.8s ease-out infinite;
}

@keyframes loc_souffle {
    0% { opacity: 0.35; transform: scale(0.6); }
    100% { opacity: 0; transform: scale(2.6); }
}

/* ---- Le bandeau, sur la carte, dans l'habillage du formulaire ---- */

.loc_etat {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: calc(100% - 24px);
    padding: 9px 12px;
    border-radius: 8px;
    background: #F3F6F9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: #7E8299;
    font-size: 12px;
    line-height: 1.45;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.loc_etat > i { flex: none; color: inherit; }
.loc_etat b { color: #3F4254; font-weight: 600; }
.loc_etat > span { color: inherit; }

/* En cours : les teintes du site, et le viseur qui bat doucement */
.loc_etat_cherche { background: #E1F0FF; color: #1B74C4; }
.loc_etat_cherche b { color: #1B74C4; }
.loc_etat_cherche > i { animation: loc_bat 1.2s ease-in-out infinite; }

@keyframes loc_bat {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Acquis : exactement la teinte de .creation_carte_etat_precise */
.loc_etat_acquis { background: #C9F7F5; color: #0B8F88; }
.loc_etat_acquis b { color: #0B8F88; }

/* Acquis mais date : la teinte d'alerte du formulaire. L'appelant a pu bouger,
   l'operateur doit le savoir sans avoir a lire deux fois. */
.loc_etat_datee { background: #FFF4DE; color: #B37A00; }
.loc_etat_datee b { color: #B37A00; }

.loc_etat_echec { background: #FFE2E5; color: #D13A4A; }
.loc_etat_echec b { color: #D13A4A; }

/* Parti : le bandeau s'efface sans laisser de trou */
.loc_etat_parti {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .loc_etat { right: 12px; bottom: 8px; left: 8px; font-size: 11px; }
}


/* ---- Feuille de garde : la fenetre du programme de la garde (calendrier, sport, manoeuvre, information) ---- */

.fgp { display: flex; flex-wrap: wrap; gap: 28px; }
.fgp_calendrier { flex: 0 0 300px; max-width: 100%; }
.fgp_jour { flex: 1 1 340px; min-width: 0; }

.fgp_cal_tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fgp_cal_mois { font-weight: 700; font-size: 1rem; color: #181C32; text-transform: capitalize; }
.fgp_cal_fleche {
    width: 32px; height: 32px;
    border: 0; border-radius: 8px;
    background: #F3F6F9; color: #3F4254;
    cursor: pointer;
}
.fgp_cal_fleche:hover:not(:disabled) { background: #E4E6EF; }
.fgp_cal_fleche:disabled { opacity: .4; cursor: default; }
.fgp_cal_fleche i { font-size: 11px; color: inherit !important; }

.fgp_cal_grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.fgp_cal_semaine { padding-bottom: 4px; text-align: center; color: #7E8299; font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.fgp_cal_jour {
    position: relative;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #F8FAFC;
    color: #3F4254;
    font-size: .9rem;
    font-weight: 600;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
}
button.fgp_cal_jour:hover { border-color: #3699FF; }
.fgp_cal_passe { background: #FFFFFF; color: #B5B5C3; }
.fgp_cal_aujourdhui { border-color: #3699FF; color: #3699FF; }
.fgp_cal_choisi, button.fgp_cal_choisi:hover { border-color: #3699FF; background: #3699FF; color: #FFFFFF; }
.fgp_cal_hors { opacity: .35; cursor: default; }

.fgp_pts { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; line-height: 0; }
.fgp_pt { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; }
.fgp_pt_sport { background: #3699FF; }
.fgp_pt_manoeuvre { background: #FFA800; }
.fgp_cal_choisi .fgp_pt { box-shadow: 0 0 0 1px #FFFFFF; }

.fgp_legende { margin-top: 12px; color: #7E8299; font-size: .78rem; }
.fgp_legende span { display: block; margin-top: 3px; }
.fgp_legende .fgp_pt { margin: 0 8px 0 2px; vertical-align: middle; }

.fgp_jour_tete { display: flex; align-items: center; flex-wrap: wrap; }
.fgp_jour_tete b { margin-right: 12px; font-size: 1.05rem; color: #181C32; }
.fgp_etat { padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.fgp_etat_courante { background: #E3F6EC; color: #0E9F6E; }
.fgp_etat_avenir { background: #E7F0FE; color: #0061EF; }
.fgp_etat_passee { background: #F3F6F9; color: #7E8299; }
.fgp_jour_aide { margin: 6px 0 10px; color: #7E8299; font-size: .82rem; }

.fgp_info { margin-top: 20px; padding-top: 16px; border-top: 1px solid #EBEDF3; }
.fgp_info_tete { display: flex; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.fgp_info_tete b { margin-right: 12px; color: #181C32; }
.fgp_info_tete b i { margin-right: 8px; color: #3699FF !important; }
.fgp_info_tete span { color: #7E8299; font-size: .82rem; }
.fgp_info_texte {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #E4E6EF;
    border-radius: 8px;
    color: #3F4254;
    font-size: .92rem;
    resize: vertical;
}
.fgp_info_texte:focus { border-color: #3699FF; outline: 0; }
.fgp_info_pied { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; }
.fgp_info_meta { margin-right: 12px; color: #7E8299; font-size: .8rem; }
.fgp_info_lecture { padding: 10px 12px; border-radius: 8px; background: #F8FAFC; color: #3F4254; }
.fgp_info_lecture em { color: #B5B5C3; }
.fgp_info_lecture small { display: block; margin-top: 4px; color: #7E8299; }

/* Les lignes sport / manoeuvre (horaires + theme) */
.fg_programme_ligne {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px dashed #EBEDF3;
}
.fg_programme_nom { flex: none; width: 120px; font-weight: 600; color: #3F4254; }
.fg_programme_nom i { width: 20px; margin-right: 6px; color: #7E8299 !important; }
.fg_programme_heures { flex: none; display: inline-flex; align-items: center; margin-right: 12px; }
.fg_programme_heures > span { margin: 0 6px; color: #7E8299; }
.fg_programme_heures input[type=time],
.fg_programme_texte {
    height: 36px;
    padding: 0 10px;
    border: 1px solid #E4E6EF;
    border-radius: 8px;
    background: #FFFFFF;
    color: #3F4254;
    font-size: .92rem;
}
.fg_programme_heures input[type=time] { width: 112px; }
.fg_programme_texte { flex: 1 1 100%; min-width: 0; margin-top: 6px; }
.fg_programme_texte:focus, .fg_programme_heures input[type=time]:focus { border-color: #3699FF; outline: 0; }
.fg_programme_valeur { flex: 1 1 100%; margin-top: 4px; color: #3F4254; }
.fg_programme_valeur em { color: #B5B5C3; }
.fg_programme_actions { padding-top: 12px; text-align: right; }

@media (max-width: 767px) {
    .fgp_calendrier { flex-basis: 100%; }
    .fg_programme_nom { width: 100%; margin-bottom: 4px; }
}

/* Sonorisation du poste du stationnaire : l'annonce en direct, et les messages par categorie */
.st_sono_direct {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    margin: 0 0 18px;
    border-radius: 10px;
    background: #FFF5F5;
    border: 1px dashed #F1416C;
}

.st_sono_direct .st_sono_enregistre {
    animation: st_sono_pulse 1.1s ease-in-out infinite;
}

@keyframes st_sono_pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(241, 65, 108, .55); }
    50% { box-shadow: 0 0 0 10px rgba(241, 65, 108, 0); }
}

.st_sono_categorie {
    margin: 16px 0 8px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7E8299;
}

.st_sono_messages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
}

.st_sono_message {
    text-align: left;
    white-space: normal;
}

/* ---- Gestion de l'engin, réorganisée (2026-10-17) : bandeau, actions | équipage + carte, historique ; l'inventaire en pleine fenêtre ---- */
.ge_resume { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.ge_resume_case { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 96px; padding: 10px 14px; border: 1px solid #EBEDF3; border-radius: 10px; background: #FFFFFF; }
.ge_resume_case > span { color: #A1A5B7; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ge_resume_case > b { color: #181C32; font-size: 15px; font-weight: 700; line-height: 1.2; }
.ge_resume_case > b.ge_resume_statut, .ge_resume_case > b.gi_etat { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 12px; }
.ge_resume_case > b.ge_resume_texte { font-size: 12.5px; font-weight: 600; }
.ge_resume_large { flex: 1 1 200px; }
.ge_resume .ge_fonctions { margin: 0; }
#ge_vue .ge_grille > div > .creation_bloc + .creation_bloc { margin-top: 16px; }
.ge_bas { margin-top: 16px; }
.ge_bas .ge_historique { max-height: 220px; overflow-y: auto; }
#ge_vue[hidden], .gi_vue[hidden] { display: none !important; }
@media (max-width: 767px) { #ge_vue .ge_grille { grid-template-columns: minmax(0, 1fr); } .ge_resume_case { flex: 1 1 40%; } }

.gi_etat { padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.gi_etat_ok { background: #E3F5EC; color: #0B7B56; } .gi_etat_anomalie { background: #FFF0E6; color: #B54708; }
.gi_etat_vieux { background: #FFF4DE; color: #8A5A00; } .gi_etat_jamais { background: #EEF1F6; color: #5E6278; }
.gi_anomalies { list-style: none; margin: 0 0 10px; padding: 0; font-size: 12.5px; }
.gi_anomalies li { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; } .gi_anomalies i { color: #E8590C; } .gi_anomalies span { color: #7E8299; }

.gi_tete { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #EBEDF3; }
.gi_tete_texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gi_tete_texte b { color: #181C32; font-size: 15px; }
.gi_tete_texte span { color: #7E8299; font-size: 12.5px; }
.gi_tete .gi_etat { flex: none; font-size: 12px; }
.gi_aide { margin: 12px 0 4px; color: #7E8299; font-size: 12.5px; } .gi_aide i { margin-right: 6px; color: #3699FF; }
.gi_colonnes { columns: 2 300px; column-gap: 24px; }
.gi_groupe { break-inside: avoid; padding-top: 4px; }
.gi_section { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A8FA8; }
.gi_section small { padding: 0 7px; border-radius: 999px; background: #F3F6F9; color: #7E8299; font-size: 10.5px; letter-spacing: 0; }
.gi_item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 6px 0; border-top: 1px solid #F1F3F8; }
.gi_item_nom { font-size: 13px; font-weight: 600; color: #181C32; } .gi_item_nom em { font-style: normal; color: #8A8FA8; font-weight: 500; }
.gi_item.est-ouverte .gi_item_nom::after { content: ' · signalé'; color: #B54708; font-size: 11px; }
.gi_choix { display: inline-flex; border: 1px solid #E4E6EF; border-radius: 8px; overflow: hidden; }
.gi_choix label { margin: 0; width: 34px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #A1A5B7; }
.gi_choix label + label { border-left: 1px solid #E4E6EF; }
.gi_choix input { display: none; }
.gi_choix label.gi_present:has(input:checked) { background: #E3F5EC; color: #0B7B56; }
.gi_choix label.gi_manquant:has(input:checked) { background: #FFF0E6; color: #B54708; }
.gi_choix label.gi_defaut:has(input:checked) { background: #FEECEC; color: #A80A10; }
.gi_note { grid-column: 1 / -1; display: none; }
.gi_item:has(.gi_manquant input:checked) .gi_note, .gi_item:has(.gi_defaut input:checked) .gi_note { display: block; }
.gi_vue { padding: 16px 18px 0; border-radius: 10px; background: #FFFFFF; }
.gi_bas { position: sticky; bottom: -20px; display: grid; grid-template-columns: 140px 160px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 18px -18px 0; padding: 12px 18px; border-radius: 0 0 10px 10px; box-shadow: 0 -6px 14px -10px rgba(15, 23, 42, .25); border-top: 1px solid #EBEDF3; background: #FFFFFF; }
.gi_actions { display: flex; gap: 8px; }
@media (max-width: 767px) { .gi_bas { grid-template-columns: 1fr 1fr; } .gi_bas .gi_remarque, .gi_actions { grid-column: 1 / -1; } .gi_actions .btn { flex: 1; } }

/* ---- Photo des engins (2026-10-18) : vignette sur la puce du parc et la carte de la feuille de garde ---- */
.engins_min .nom .engin_vignette_min { width: 22px; height: 22px; margin: -2px 5px 0 -1px; border-radius: 50%; object-fit: cover; vertical-align: middle; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); pointer-events: none; }
.engin_photo_zone { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
/* Image de l'engin sur les cartes : grille de la banque d'icônes du service (2026-11-05) */
.engin_image_grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; padding: 2px; }
.engin_image_choix { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border: 2px solid #EBEDF3; border-radius: 10px; background: #FFFFFF;
    font-size: 10.5px; font-weight: 600; color: #5E6278; line-height: 1.15; cursor: pointer; }
.engin_image_choix img { height: 40px; max-width: 80px; object-fit: contain; }
.engin_image_choix i { height: 40px; line-height: 40px; font-size: 20px; color: #B5B5C3; }
.engin_image_choix:hover { border-color: #C9F7F5; }
.engin_image_choix.active { border-color: #1BC5BD; background: #F0FFFE; color: #181C32; }
.engins_min .nom .engin_vignette_min.engin_vignette_type { object-fit: contain; border-radius: 4px; background: #FFFFFF; width: 30px; }
.engin_photo_apercu { width: 160px; max-height: 110px; border-radius: 8px; object-fit: cover; border: 1px solid #EBEDF3; background: #F3F6F9; }
.fg_engin_photo { flex: none; width: 34px; height: 34px; border-radius: 8px; object-fit: cover; cursor: pointer; border: 1px solid #EBEDF3; background: #F3F6F9; }
.fg_engin_photo:hover { box-shadow: 0 0 0 2px rgba(54, 153, 255, .45); }
.fg_engin_photo_vide { display: inline-flex; align-items: center; justify-content: center; color: #B5B5C3; font-size: 13px; border-style: dashed; }
.fg_engin_photo_vide:hover { color: #3699FF; }

/* ---- Bornes SOS (2026-10-18) : fiche d appel, renvoi, position, voix par le telephone ---- */
.app_xy { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; color: #B5B5C3; }
.app_renvoi { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: .74rem; font-weight: 600; color: #FFA800; }
.app_voix { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: .72rem; font-weight: 600; color: #3699FF; }
.app_voix_ko { color: #B5B5C3; }
.app_repere_bulle { font-weight: 700; }

/* Fiche « Compte et affectation » du dossier (gestion des personnels réunie aux dossiers, 2026-10-19) */
.prs_fiche { display: block; padding: 4px 2px; }
.prs_fiche_tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.prs_fiche_grade { font-size: 17px; font-weight: 700; color: #181C32; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.prs_fiche_actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prs_fiche_grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 18px; margin-bottom: 16px; }
.prs_fiche_ligne { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #F7F9FC; border-radius: 12px; min-width: 0; }
.prs_fiche_ligne i { color: #7E8299; width: 16px; text-align: center; }
.prs_fiche_ligne span { color: #7E8299; font-size: 12px; white-space: nowrap; }
.prs_fiche_ligne b { margin-left: auto; text-align: right; color: #181C32; overflow-wrap: anywhere; }
.prs_fiche_compteurs { display: flex; gap: 10px; margin-bottom: 10px; }
.prs_fiche_aide { color: #7E8299; font-size: 12.5px; margin: 6px 0 0; }

/* Localisation de l'appelant à la création d'une intervention : l'animation de la géolocalisation police
   (geoloc.php), 2026-10-19 — balayage pendant l'attente, relais, traits qui convergent, point rouge final */
.loc_radar { position: absolute; inset: 0; z-index: 450; pointer-events: none; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle, rgba(14, 165, 233, .04), rgba(2, 6, 23, .28)); }
.loc_radar span { width: min(70%, 320px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(34, 211, 238, .6);
    background: conic-gradient(from 0deg, rgba(34, 211, 238, .45), rgba(34, 211, 238, 0) 25%); animation: loc_tour 1.6s linear infinite; }
@keyframes loc_tour { to { transform: rotate(360deg); } }
.loc_relais { color: #0EA5E9; font-size: 18px; text-shadow: 0 0 6px #FFFFFF; display: flex; align-items: center; justify-content: center; }
.loc_trait { stroke: #22D3EE; stroke-width: 1.5; stroke-dasharray: 6 6; stroke-opacity: .85; fill: none; }
.loc_disque_final { fill: #F64E60; fill-opacity: .15; stroke: #F64E60; stroke-width: 2; }
.loc_cible span { display: block; width: 22px; height: 22px; border-radius: 50%; background: #F64E60; border: 3px solid #FFFFFF;
    box-shadow: 0 0 0 0 rgba(246, 78, 96, .7); animation: loc_pouls 1.4s infinite; }
@keyframes loc_pouls { 70% { box-shadow: 0 0 0 18px rgba(246, 78, 96, 0); } 100% { box-shadow: 0 0 0 0 rgba(246, 78, 96, 0); } }
/* Le cercle qui se resserre prend la teinte cyan des relais */
.loc_disque { fill: #22D3EE; fill-opacity: .12; stroke: #22D3EE; stroke-opacity: .9; stroke-width: 2; }

/* ---- SITAC pompier (charte GOC) et poste de commandement du COD (2026-10-19, include/js/cta/cod_pc.js) ---- */
#cod_outils { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.codpc_rangee { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; }
.codpc_famille { min-width: 92px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7E8299; display: inline-flex; align-items: center; gap: 6px; }
.codpc_famille i { width: 14px; text-align: center; }

/* Un moyen : rectangle à la couleur de l'action, étiquette dedans, échelon au-dessus */
.codpc_moyen { display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); cursor: grab; }
.codpc_echelon { font: 700 10px Arial, sans-serif; color: var(--c); line-height: 1; height: 10px; letter-spacing: 1px; }
.codpc_moyen_cadre { min-width: 46px; padding: 3px 7px; border: 2.5px solid var(--c); border-radius: 3px; background: #FFFFFF; color: var(--c);
    font: 800 11px Arial, sans-serif; text-align: center; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.codpc_moyen .cod_symbole_nom { margin-top: 2px; }
.codpc_texte { transform: translate(-50%, -50%); font: 700 13px Arial, sans-serif; white-space: nowrap; text-shadow: 0 0 3px #FFFFFF, 0 0 3px #FFFFFF, 0 0 3px #FFFFFF; cursor: grab; }

/* La pointe (ou la barre de protection) au bout d'une action */
.codpc_bout { background: none; border: 0; }
.codpc_pointe { position: absolute; left: 4px; top: 3px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 16px solid #DC2626; transform-origin: 7px 8px; }
.codpc_barre { position: absolute; left: 9px; top: 0; width: 4px; height: 22px; border-radius: 2px; transform-origin: 2px 11px; }

/* Légende et plein écran */
.codpc_legende { position: absolute; left: 10px; bottom: 10px; z-index: 600; background: rgba(255, 255, 255, .95); border-radius: 10px; padding: 8px 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18); font-size: 11.5px; display: flex; flex-direction: column; gap: 3px; max-width: 280px; }
.codpc_legende span { display: flex; align-items: center; gap: 7px; }
.codpc_legende i { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.codpc_legende small { color: #7E8299; }
.cod_sitac { position: relative; }
.cod_sitac.codpc_plein { position: fixed; inset: 0; z-index: 1050; background: #FFFFFF; padding: 0; }
.cod_sitac.codpc_plein .cod_carte { height: 100vh !important; border-radius: 0; }
body.codpc_plein_corps { overflow: hidden; }

/* Poste de commandement */
.codpc { border: 1px solid #EBEDF3; border-radius: 12px; overflow: hidden; }
.codpc_maj { margin-left: auto; font-size: 11px; font-weight: 500; color: #7E8299; text-transform: none; letter-spacing: 0; }
.codpc_onglets { display: flex; flex-wrap: wrap; gap: 2px; background: #F3F6F9; padding: 4px; }
.codpc_onglet { border: 0; background: transparent; padding: 7px 12px; border-radius: 8px; font-weight: 600; font-size: 12.5px; color: #5E6278; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.codpc_onglet.active { background: #FFFFFF; color: #7C3AED; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.codpc_onglet:disabled { opacity: .45; cursor: not-allowed; }
.codpc_corps { padding: 14px; }
.codpc_barre_haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px; }
.codpc_titre { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7E8299; margin: 16px 0 8px; display: flex; align-items: center; }
.codpc_grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.codpc_carte { background: #F7F9FC; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.codpc_carte label { font-size: 11px; font-weight: 600; color: #7E8299; margin: 0; }
.codpc_carte b { color: #181C32; }
.codpc_carte small { color: #5B21B6; font-weight: 600; }
.codpc_carte small i { margin-right: 4px; }
.codpc_carte_secteur { border-left: 4px solid #7C3AED; }
.codpc_vide { color: #7E8299; font-size: 12.5px; padding: 6px 0; }
.codpc_secteur_ligne { display: grid; grid-template-columns: 1.1fr 1.3fr 1.2fr 1fr auto; gap: 6px; margin-bottom: 6px; }
.codpc_pied { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.codpc_oct { overflow-x: auto; background: #FFFFFF; }
.codpc_defile { overflow-x: auto; }
.codpc_table { width: 100%; border-collapse: collapse; }
.codpc_table th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #7E8299; padding: 6px 8px; border-bottom: 1px solid #EBEDF3; text-align: left; }
.codpc_table td { padding: 7px 8px; border-bottom: 1px solid #F3F6F9; font-size: 12.5px; vertical-align: middle; }
.codpc_statut { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; }
.codpc_saoiec { display: block; margin-bottom: 10px; font-size: 12.5px; }
.codpc_saoiec b, .codpc_saoiec_vue > b { display: inline-flex; width: 24px; height: 24px; border-radius: 6px; background: #7C3AED; color: #FFFFFF; align-items: center; justify-content: center; margin-right: 6px; }
.codpc_saoiec textarea { margin-top: 4px; }
.codpc_saoiec_vue { display: flex; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.codpc_saoiec_vue small { display: block; font-weight: 700; color: #7E8299; text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
.codpc_saisie { margin-bottom: 14px; }
.codpc_point { border-left: 3px solid #7C3AED; background: #F7F9FC; border-radius: 0 10px 10px 0; padding: 8px 12px; margin-bottom: 8px; font-size: 12.5px; }
.codpc_point_tete { color: #7E8299; font-size: 11.5px; margin-bottom: 3px; }
.codpc_champ { display: block; text-align: left; font-size: 12.5px; font-weight: 600; margin: 8px 0 0; }
.codpc_champ .swal2-input, .codpc_champ .swal2-select { margin: 4px 0 0; width: 100%; max-width: none; }
@media (max-width: 767px) { .codpc_secteur_ligne { grid-template-columns: 1fr 1fr; } }

/* Événements clos du COD : section repliable, 10 par page (2026-10-19) */
.cod_clos_bascule { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }
.cod_clos_bascule i { width: 12px; }
.cod_clos_nombre { margin-left: auto; background: #E4E6EF; color: #3F4254; border-radius: 999px; padding: 0 8px; font-size: 11px; }
.cod_clos_pages { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 0 2px; font-size: 12px; color: #7E8299; }
.cod_vide_petit { padding: 10px 0; font-size: 12.5px; }

/* Mode édition de la SITAC (2026-10-19) : consultation par défaut, bordure violette quand on modifie */
.codpc_edition_bouton { font-weight: 700; }
.codpc_edition_bouton.active { background: #7C3AED; border-color: #7C3AED; color: #FFFFFF; }
.codpc_edition_bouton.active i { color: #FFFFFF !important; }
.codpc_edition_note { font-size: 11.5px; color: #7E8299; display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.cod_sitac.codpc_en_edition .cod_carte { outline: 3px solid #7C3AED; outline-offset: -3px; }

/* Standard : le nom du centre ouvre la liste des centres du service (2026-11-02), au dessin des menus d'ORION */
.st_bandeau { position: relative; z-index: 5; }
.st_centre_menu { position: relative; }
.st_centre .st_centre_bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: -3px 0 1px -8px;
    padding: 3px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #181C32;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease;
}
.st_centre .st_centre_bouton span { color: inherit; font-size: inherit; }
.st_centre .st_centre_bouton i { color: #A1A5B7; font-size: 10px; transition: transform .2s ease; }
.st_centre .st_centre_bouton:hover, .st_centre_menu.est-ouvert .st_centre_bouton { background: #F3F6F9; }
.st_centre .st_centre_bouton:focus-visible { outline: 2px solid var(--or-accent, #3699FF); outline-offset: 1px; }
.st_centre_menu.est-ouvert .st_centre_bouton i { transform: rotate(180deg); }

.st_centre_liste {
    position: absolute;
    top: calc(100% + 8px);
    left: -8px;
    z-index: 1100;
    min-width: 260px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #EEF0F6;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 16px 40px -12px rgba(16, 24, 40, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.st_centre_menu.est-ouvert .st_centre_liste { opacity: 1; visibility: visible; transform: none; transition: opacity .15s ease, transform .15s ease; }
.st_centre .st_centre_liste_titre { display: block; padding: 8px 10px 6px; color: #A1A5B7; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.st_centre_option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #181C32;
    text-decoration: none;
}
.st_centre_option:hover { background: #F4F6FA; color: #181C32; text-decoration: none; }
.st_centre .st_centre_option_icone {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #F3F6F9;
    color: #A1A5B7;
    font-size: 12px;
}
.st_centre .st_centre_option_texte { display: block; flex: 1 1 auto; min-width: 0; color: inherit; font-size: inherit; }
.st_centre .st_centre_option_texte b { font-size: 13.5px; }
.st_centre .st_centre_option_texte small { display: block; overflow: hidden; color: #A1A5B7; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.st_centre_option.est-actif { background: var(--or-accent-doux, rgba(54, 153, 255, .1)); cursor: default; }
.st_centre_option.est-actif .st_centre_option_icone { background: var(--or-accent, #3699FF); color: #FFFFFF; }
.st_centre_option_coche { flex: none; color: var(--or-accent, #3699FF); font-size: 12px; }

@media (max-width: 575.98px) {
    .st_centre_liste { min-width: 0; width: calc(100vw - 48px); }
}

/* SGO : fenêtres détachées et dispositions (2026-11-04, include/js/cta/sgo_fenetres.js) */

/* ---- Fenêtre principale : les onglets ---- */
.cta_onglets .nav-link.sgo-onglet-detache { opacity: .55; font-style: italic; }
.cta_onglets .nav-link.sgo_rouvrir { margin-left: auto; color: #3699FF; }
.cta_onglets .nav-link.sgo_rouvrir[hidden] { display: none; }
#sgo_bouton_fenetres.sgo-actif { background: #E1F0FF; color: #3699FF; }
#sgo_bouton_fenetres.sgo-actif i { color: #3699FF; }
.cta_logiciel_bouton.sgo-logiciel-detache { box-shadow: inset 0 0 0 1px rgba(54, 153, 255, .45); }
.sgo_vide { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 80px 20px; color: #7E8299; text-align: center; }
.sgo_vide i { font-size: 34px; color: #B5B5C3; }
.sgo_vide b { color: #3F4254; font-size: 15px; }

/* ---- Fenêtre détachée : ni en-tête ni onglets, un bandeau soigné ---- */
body.sgo-detache #kt_header,
body.sgo-detache .cta_onglets,
body.sgo-detache-carte #contenu { display: none !important; }
body.sgo-detache .wrapper { padding-top: 0 !important; }
body.sgo-detache .content { padding-top: 12px !important; padding-bottom: 12px !important; }
body.sgo-detache-telephone #kt_content,
body.sgo-detache-radio #kt_content { display: none !important; }

.sgo_flottant {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 12px;
    border-radius: 999px;
    background: rgba(18, 19, 27, .86);
    color: #fff;
    font: 600 12px Poppins, "Segoe UI", Arial, sans-serif;
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.sgo_flottant.est-visible { opacity: 1; transform: none; pointer-events: auto; }
.sgo_flottant i { color: rgba(255, 255, 255, .7); }
.sgo_flottant_sp { box-shadow: inset 3px 0 0 #F64E60, 0 6px 20px -6px rgba(0, 0, 0, .5); }
.sgo_flottant_fdo { box-shadow: inset 3px 0 0 #3699FF, 0 6px 20px -6px rgba(0, 0, 0, .5); }
.sgo_flottant_sam { box-shadow: inset 3px 0 0 #FFA800, 0 6px 20px -6px rgba(0, 0, 0, .5); }
.sgo_flottant_rou { box-shadow: inset 3px 0 0 #1BC5BD, 0 6px 20px -6px rgba(0, 0, 0, .5); }
.sgo_flottant button { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .14); color: #fff; font: inherit; cursor: pointer; }
.sgo_flottant button:hover { background: rgba(255, 255, 255, .26); }
.sgo_flottant button i { color: inherit; }

/* La carte entière : toute la fenêtre sous le bandeau */
body.sgo-detache-carte #carte_operationnelle .card { margin: 0 !important; height: calc(100vh - 24px); display: flex; flex-direction: column; }
body.sgo-detache-carte #carte_operationnelle .card-title { display: none !important; }
body.sgo-detache-carte #carte_operationnelle .card-header { min-height: 0 !important; padding-top: 10px !important; padding-bottom: 6px !important; justify-content: flex-end; }
body.sgo-detache-carte #carte_operationnelle .card-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
body.sgo-detache-carte #carte_operationnelle .carte_ops_corps { flex: 1 1 auto; height: auto !important; min-height: 0; }
body.sgo-detache-carte .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }

/* Le téléphone et la radio : leur panneau prend la fenêtre */
body.sgo-detache-telephone #cta_panneau_appels,
body.sgo-detache-radio #cta_panneau_radio {
    position: fixed;
    top: 0;
    right: 0;
    bottom: var(--cta-dock-espace, 0px);
    left: 0;
    z-index: 1;
    display: flex !important;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
}
body.sgo-detache-telephone #cta_panneau_appels .cta_logiciel_panneau_tete,
body.sgo-detache-radio #cta_panneau_radio .cta_logiciel_panneau_tete { display: none; }
body.sgo-detache-telephone .cta_logiciel_corps,
body.sgo-detache-radio .cta_logiciel_corps { flex: 1 1 auto; max-height: none; }

/* ---- Le panneau « Fenêtres et disposition » ---- */
.sgo_panneau {
    position: fixed;
    top: 75px;
    right: 25px;
    z-index: 1070;
    display: flex;
    flex-direction: column;
    width: 440px;
    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 100px);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 50px -12px rgba(16, 24, 40, .35);
    font-family: Poppins, "Segoe UI", Arial, sans-serif;
}
.sgo_panneau[hidden] { display: none; }
.sgo_panneau_tete { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #EEF0F6; }
.sgo_panneau_tete span { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #181C32; }
.sgo_panneau_tete span i { color: #3699FF; }
.sgo_panneau_fermer { border: 0; background: transparent; color: #A1A5B7; font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.sgo_panneau_fermer:hover { background: #F3F6F9; color: #181C32; }
.sgo_panneau_corps { overflow-y: auto; padding: 6px 16px 16px; }
.sgo_section { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 8px; color: #A1A5B7; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sgo_section small { font-weight: 600; letter-spacing: 0; text-transform: none; }
.sgo_modules { display: flex; flex-direction: column; gap: 6px; }
.sgo_module { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 1px solid #EEF0F6; border-radius: 10px; }
.sgo_module.est-detache { background: #F4F9FF; border-color: #D6E9FF; }
.sgo_module_icone { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: #F3F6F9; color: #7E8299; font-size: 13px; }
.sgo_module.est-detache .sgo_module_icone { background: #3699FF; color: #fff; }
.sgo_module.est-detache .sgo_module_icone i { color: #fff; }
.sgo_module_nom { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.sgo_module_nom b { font-size: 13px; color: #181C32; font-weight: 600; }
.sgo_module_nom small { font-size: 11px; color: #A1A5B7; }
.sgo_btn { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 11px; border: 0; border-radius: 7px; background: #3699FF; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
.sgo_btn:hover { background: #187DE4; }
.sgo_btn i { color: inherit; }
.sgo_btn_clair { background: #F3F6F9; color: #3F4254; }
.sgo_btn_clair:hover { background: #E4E6EF; color: #181C32; }
.sgo_dispos { display: flex; flex-direction: column; gap: 6px; }
.sgo_dispo { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #EEF0F6; border-radius: 10px; }
.sgo_dispo.est-impossible { opacity: .55; }
.sgo_dispo_texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sgo_dispo_texte b { font-size: 13px; color: #181C32; font-weight: 600; }
.sgo_dispo_texte small { font-size: 11px; color: #A1A5B7; }
.sgo_rien { padding: 10px; border: 1px dashed #E4E6EF; border-radius: 10px; color: #A1A5B7; font-size: 12px; text-align: center; }
.sgo_enregistrer { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 9px; border: 1px dashed #3699FF; border-radius: 10px; background: #F4F9FF; color: #3699FF; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sgo_enregistrer:hover { background: #E1F0FF; }
.sgo_enregistrer i { color: inherit; }
.sgo_demarrage { width: 100%; padding: 8px 10px; border: 1px solid #E4E6EF; border-radius: 9px; background: #fff; color: #3F4254; font-size: 12.5px; }
.sgo_aide { display: flex; gap: 8px; margin-top: 12px; color: #7E8299; font-size: 11.5px; line-height: 1.45; }
.sgo_aide:empty { display: none; }
.sgo_aide i { color: #3699FF; margin-top: 2px; }

/* Les maquettes des dispositions : un ou deux écrans à l'échelle, chaque module à sa place */
.sgo_dispo.avec-maquette { flex-wrap: wrap; }
.sgo_dispo.avec-maquette .sgo_dispo_texte { flex: 1 1 140px; }
.sgo_maquette { display: flex; align-items: flex-end; gap: 8px; width: 100%; margin-bottom: 6px; cursor: pointer; }
.sgo_dispo.est-impossible .sgo_maquette { cursor: default; }
.sgo_ecran { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border: 3px solid #2B2B40; border-bottom-width: 6px; border-radius: 6px; background: #F3F6F9; }
.sgo_ecran_fond { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; color: #B5B5C3; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sgo_ecran_fond i { color: inherit; }
.sgo_zone { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden;
    border: 1.5px solid #fff; border-radius: 3px; color: #fff; font-size: 9.5px; line-height: 1.1; text-align: center; box-sizing: border-box; }
.sgo_zone i { color: #fff; font-size: 11px; }
.sgo_zone em { font-style: normal; font-weight: 600; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sgo_maquette:hover .sgo_ecran { border-color: #3699FF; }
.sgo_dispo.est-impossible .sgo_maquette:hover .sgo_ecran { border-color: #2B2B40; }
.sgo_appli { display: flex; flex-direction: column; gap: 8px; }
.sgo_appli_texte { color: #7E8299; font-size: 11.5px; line-height: 1.45; }
.sgo_appli_texte b { color: #3F4254; }
.sgo_appli_ok { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: #E8FFF3; color: #0BB783; font-size: 12px; font-weight: 600; }
.sgo_appli_ok i { color: inherit; }
.sgo_installer { align-self: flex-start; }
.sgo_maquette .sgo_ecran:only-child { flex: 0 0 64%; margin: 0 auto; }
/* Le choix « 1 écran / 2 écrans » des dispositions prêtes */
.sgo_choix_ecrans { display: flex; gap: 4px; margin-bottom: 10px; padding: 4px; border-radius: 10px; background: #F3F6F9; }
.sgo_choix_ecrans button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; height: 32px; border: 0; border-radius: 7px;
    background: transparent; color: #7E8299; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sgo_choix_ecrans button i { color: inherit; font-size: 11px; }
.sgo_choix_ecrans button i + i { margin-left: -3px; }
.sgo_choix_ecrans button:hover { color: #3F4254; }
.sgo_choix_ecrans button.est-actif { background: #fff; color: #3699FF; box-shadow: 0 1px 4px rgba(16, 24, 40, .12); }
/* La porte du panneau : installer le SGO en application avant tout */
.sgo_porte { display: none; flex-direction: column; align-items: center; gap: 10px; padding: 22px 22px 20px; text-align: center; color: #5E6278; font-size: 12.5px; line-height: 1.5; overflow-y: auto; }
.sgo_panneau.sgo-a-installer .sgo_porte { display: flex; }
.sgo_panneau.sgo-a-installer .sgo_panneau_corps { display: none; }
.sgo_porte_icone { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; background: #E1F0FF; color: #3699FF; font-size: 22px; }
.sgo_porte_icone i { color: inherit; }
.sgo_porte > b { color: #181C32; font-size: 16px; }
.sgo_porte p { margin: 0; }
.sgo_porte ul { margin: 0; padding: 0; list-style: none; text-align: left; display: flex; flex-direction: column; gap: 7px; }
.sgo_porte li { display: flex; gap: 10px; align-items: baseline; }
.sgo_porte li i { flex: none; width: 16px; color: #3699FF; text-align: center; }
.sgo_porte b { color: #3F4254; }
.sgo_porte_action { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-top: 6px; }
.sgo_porte_action .sgo_btn { height: 40px; padding: 0 22px; font-size: 13.5px; }
.sgo_porte_action small { color: #A1A5B7; font-size: 11px; }
.sgo_porte_note { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #F3F6F9; text-align: left; font-size: 11.5px; }
.sgo_porte_note i { color: #3699FF; margin-top: 3px; }
.sgo_porte_lien { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: #3699FF; font-size: 12px; font-weight: 600; }
.sgo_porte_lien:hover { text-decoration: underline; }
.sgo_porte_lien i { color: inherit; }
/* Fenêtres en attente : Chrome n'en ouvre qu'une par clic */
.sgo_attente { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px; background: #FFF4DE; }
.sgo_attente span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.sgo_attente b { color: #8A5A00; font-size: 12.5px; }
.sgo_attente small { color: #A07A2C; font-size: 11px; }
.sgo_attente .sgo_btn { background: #FFA800; }
.sgo_attente .sgo_btn:hover { background: #EE9D01; }
/* La carte détachée : la carte seule, sans le panneau des interventions et des engins libres */
body.sgo-detache-carte .carte_ops_panneau { display: none !important; }
/* Les synoptiques détachés : plus de titre, leurs outils (filtres, recherche, clôturées) sur une ligne fine */
body.sgo-detache:not(.sgo-detache-carte) #contenu > .card > .card-header .card-title,
body.sgo-detache:not(.sgo-detache-carte) #contenu > #synoptique > .card > .card-header .card-title { display: none !important; }
body.sgo-detache:not(.sgo-detache-carte) #contenu > .card > .card-header,
body.sgo-detache:not(.sgo-detache-carte) #contenu > #synoptique > .card > .card-header { min-height: 0 !important; padding: 8px 14px !important; justify-content: flex-end; border-bottom: 1px solid #F3F6F9; }
body.sgo-detache:not(.sgo-detache-carte) #contenu > .card > .card-header .card-toolbar,
body.sgo-detache:not(.sgo-detache-carte) #contenu > #synoptique > .card > .card-header .card-toolbar { margin: 0 !important; }
body.sgo-detache .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
/* L'encart d'ouverture en chaîne, en bas à droite de chaque fenêtre détachée */
.sgo_suite { position: fixed; right: 14px; bottom: 14px; z-index: 1090; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 28px);
    padding: 10px 10px 10px 12px; border-radius: 12px; background: #1E1E2D; color: #fff; font: 12.5px Poppins, "Segoe UI", Arial, sans-serif;
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .55); animation: sgo_suite_entree .25s ease-out; }
@keyframes sgo_suite_entree { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sgo_suite_icone { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: #3699FF; }
.sgo_suite_icone i { color: #fff; }
.sgo_suite_texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sgo_suite_texte b { font-weight: 600; }
.sgo_suite_texte small { color: rgba(255, 255, 255, .6); font-size: 11px; }
.sgo_suite_ouvrir { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: #3699FF; color: #fff; font: 600 12.5px Poppins, "Segoe UI", Arial, sans-serif; cursor: pointer; }
.sgo_suite_ouvrir:hover { background: #187DE4; }
.sgo_suite_ouvrir i, .sgo_suite_fermer i { color: inherit; }
.sgo_suite_fermer { border: 0; background: transparent; color: rgba(255, 255, 255, .5); padding: 4px 6px; cursor: pointer; }
.sgo_suite_fermer:hover { color: #fff; }
/* La fenêtre principale du SGO sur les maquettes */
.sgo_zone.sgo_zone_principale { background: #E4E6EF; border-color: #fff; color: #5E6278; }
.sgo_zone.sgo_zone_principale i { color: #7E8299; }
/* Fenêtre détachée étroite (< 992 px) : l'en-tête mobile du site (bandeau noir et logo) n'a rien à y faire */
body.sgo-detache #kt_header_mobile { display: none !important; }
body.sgo-detache .wrapper, body.sgo-detache #kt_wrapper { padding-top: 0 !important; margin-top: 0 !important; }

/* Intervention programmée (2026-11-04, interventions_programmees.php) : une tournée prévue, pas une urgence. Liseré
   turquoise continu, fond lavande, repère « Programmée · nom du programme » avec l'icône de répétition. */
.syn_inter_programmee {
    border-left-color: #0BB7AF !important;
    background: linear-gradient(90deg, #E6F8F6 0, #FFFFFF 260px);
}

.syn_programmee {
    background: #D9F5F2;
    color: #0BB7AF;
}

.syn_programmee i {
    margin-right: 5px;
    color: #0BB7AF;
}

/* La fiche police d'une intervention programmée (2026-11-04, refait plus léger) : une tournée prévue, pas un appel.
   Contour en pointillés turquoise et fines rayures ; le liseré de gauche garde la couleur de l'état de la fiche.
   Repère : une pastille ↻ à côté du numéro et une petite ligne « Programmée · nom » sous la nature. */
.pf_fiche.pf_fiche_programmee {
    border-top: 1px dashed #0BB7AF;
    border-right: 1px dashed #0BB7AF;
    border-bottom: 1px dashed #0BB7AF;
    background-color: #FFFFFF;
    background-image: repeating-linear-gradient(135deg, rgba(11, 183, 175, .07) 0 6px, transparent 6px 14px);
}

.pf_prog_icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #D9F5F2;
    color: #0BB7AF;
    font-size: 9px;
    flex: none;
}

.pf_prog_icone i { color: #0BB7AF; font-size: 9px; }

.pf_prog_ligne {
    margin: 1px 0 2px;
    color: #0A9E97;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf_prog_ligne i { margin-right: 4px; font-size: 9px; }

/* Zones de vigilance de la carte opérationnelle (2026-11-04, carte_zones.js) */
.czn_en_dessin { cursor: crosshair !important; }
.czn_panneau { position: absolute; top: 12px; left: 12px; z-index: 1000; width: 300px; max-width: calc(100% - 24px); display: flex; flex-direction: column; gap: 8px;
    padding: 12px 14px; background: #FFFFFF; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); font-size: 12px; color: #3F4254; cursor: default; }
.czn_panneau > b { font-size: 13px; }
.czn_panneau > b i { margin-right: 6px; color: #FFA800; }
.czn_panneau > span { color: #7E8299; }
.czn_actions { display: flex; flex-wrap: wrap; gap: 6px; }
.czn_ligne { display: flex; align-items: center; gap: 8px; }
.czn_ligne label { margin: 0; width: 60px; color: #7E8299; flex: none; }
.czn_couleurs { display: flex; gap: 6px; }
.czn_couleur { margin: 0; cursor: pointer; }
.czn_couleur input { display: none; }
.czn_couleur span { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px #E4E6EF; }
.czn_couleur input:checked + span { box-shadow: 0 0 0 2px #3F4254; }
.czn_pop { min-width: 200px; font-size: 12px; }
.czn_pop b i { margin-right: 6px; color: #FFA800; }
.czn_pop p { margin: 6px 0; color: #3F4254; }
.czn_pop small { color: #7E8299; }
.czn_pop .btn i { margin-right: 4px; }
.czn_alerte { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.czn_alerte > div { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-radius: 8px; background: #FFF4DE; color: #8A5A00; font-size: 12px; }
.czn_alerte > div > i { margin-top: 2px; color: #FFA800; }
.czn_alerte b { display: block; color: #6B4600; }
.czn_alerte span { display: block; }
.czn_alerte small { display: block; opacity: .8; }

/* Cartographie opérationnelle (2026-11-04, ex-« Tableau de bord ») : la carte seule, sur toute la largeur — plus de
   panneau « Interventions en cours / Engins libres » (demande de l'utilisateur) */
.carte_ops_panneau { display: none !important; }

/* ---- Cartographie opérationnelle : barre d'outils de la carte (2026-11-05, carte_outils.js) ---- */
.cto_barre { margin: 12px 0 0 12px !important; width: 160px; background: rgba(255, 255, 255, .97); border-radius: 14px; box-shadow: 0 8px 28px rgba(24, 28, 50, .16);
    padding: 8px; font-family: inherit; }
.cto_replier { display: flex; align-items: center; gap: 7px; width: 100%; padding: 4px 6px 6px; border: 0; background: none; color: #3F4254; font-weight: 700; font-size: 12px; cursor: pointer; }
.cto_replier .fa-tools { color: #3699FF; }
.cto_replier .cto_chevron { margin-left: auto; color: #B5B5C3; font-size: 10px; transition: transform .2s; }
.cto_barre.cto_replie { width: auto; }
.cto_barre.cto_replie .cto_groupes { display: none; }
.cto_barre.cto_replie .cto_chevron { transform: rotate(180deg); }
.cto_groupe { padding: 6px 2px 4px; border-top: 1px solid #F1F1F4; }
.cto_groupe small { display: block; margin: 0 0 5px 2px; color: #A1A5B7; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cto_boutons { display: flex; flex-wrap: wrap; gap: 4px; }
.cto_bouton { position: relative; width: 33px; height: 33px; border: 0; border-radius: 9px; background: #F5F8FA; color: #5E6278; font-size: 14px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .1s, box-shadow .15s; }
.cto_bouton:hover { background: #E1F0FF; color: #3699FF; }
.cto_bouton:active { transform: scale(.94); }
.cto_bouton.cto_actif { background: #3699FF; color: #FFFFFF; box-shadow: 0 4px 12px rgba(54, 153, 255, .35); }
.cto_bouton.cto_filtre_actif { color: #FFA800; background: #FFF4DE; }
.cto_bouton[data-compte]:not([data-compte=""])::after { content: attr(data-compte); position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 8px; background: #FFA800; color: #FFFFFF; font-size: 9px; font-weight: 700; line-height: 15px; }

.cto_panneau { position: absolute; top: 12px; left: 184px; z-index: 1000; width: 290px; max-width: calc(100% - 196px); max-height: calc(100% - 24px); overflow-y: auto;
    background: #FFFFFF; border-radius: 14px; box-shadow: 0 8px 28px rgba(24, 28, 50, .18); font-size: 12px; color: #3F4254; cursor: default; }
.cto_panneau_tete { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid #F1F1F4; }
.cto_panneau_tete i { color: #3699FF; }
.cto_panneau_tete b { font-size: 13px; }
.cto_fermer { margin-left: auto; border: 0; background: none; color: #B5B5C3; font-size: 18px; line-height: 1; cursor: pointer; }
.cto_fermer:hover { color: #F64E60; }
.cto_panneau_corps { display: flex; flex-direction: column; gap: 8px; padding: 11px 14px 13px; }
.cto_aide { margin: 0; color: #7E8299; }
.cto_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cto_segment { display: flex; padding: 3px; border-radius: 9px; background: #F3F6F9; }
.cto_segment button { flex: 1; padding: 5px 6px; border: 0; border-radius: 7px; background: none; color: #7E8299; font-weight: 600; font-size: 11.5px; cursor: pointer; }
.cto_segment button.cto_on { background: #FFFFFF; color: #3699FF; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.cto_legende_ligne { display: flex; align-items: center; gap: 8px; }
.cto_legende_ligne > i { flex: none; width: 14px; height: 14px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-style: normal; }
.cto_legende_titre { margin-top: 4px; color: #A1A5B7; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cto_liste { display: flex; flex-direction: column; gap: 4px; }
.cto_ligne { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 1px solid #F1F1F4; border-radius: 9px; background: #FFFFFF; text-align: left; cursor: pointer; }
.cto_ligne:hover, .cto_ligne.cto_on { border-color: #3699FF; background: #F3F9FF; }
.cto_rang { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #3699FF; color: #FFFFFF; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.cto_ligne_nom { flex: 1; min-width: 0; }
.cto_ligne_nom b, .cto_ligne_temps b { display: block; color: #181C32; font-size: 12px; }
.cto_ligne_nom small, .cto_ligne_temps small { display: block; color: #A1A5B7; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cto_ligne_temps { text-align: right; }
.cto_filtres { display: flex; flex-direction: column; gap: 4px; }
.cto_filtre { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 7px; border-radius: 8px; cursor: pointer; }
.cto_filtre:hover { background: #F5F8FA; }
.cto_filtre span { flex: 1; }
.cto_filtre em { font-style: normal; color: #A1A5B7; font-weight: 700; }
.cto_mesures { display: flex; gap: 6px; }
.cto_mesures > div { flex: 1; padding: 8px; border-radius: 9px; background: #F5F8FA; text-align: center; }
.cto_mesures small { display: block; color: #A1A5B7; font-size: 10px; }
.cto_mesures b { font-size: 14px; color: #181C32; }
.cto_types { display: flex; flex-wrap: wrap; gap: 5px; }
.cto_types label { margin: 0; cursor: pointer; }
.cto_types input { display: none; }
.cto_types span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px; border: 1px solid #E4E6EF; color: #5E6278; font-weight: 600; font-size: 11px; }
.cto_types span i { color: var(--cto-r); }
.cto_types input:checked + span { border-color: var(--cto-r); background: var(--cto-r); color: #FFFFFF; }
.cto_types input:checked + span i { color: #FFFFFF; }
.czn_partage { display: block; margin: 0; color: #5E6278; font-size: 11.5px; line-height: 1.5; cursor: pointer; }
.czn_partage input { margin: 0 6px 0 0; vertical-align: -2px; }
.czn_ligne .czn_couleurs label { width: auto; }
.czn_couleurs { gap: 8px; }
.czn_panneau { left: 184px; width: 290px; max-width: calc(100% - 196px); max-height: calc(100% - 24px); overflow-y: auto; }
.czn_ligne { flex-wrap: wrap; }
.czn_couleurs { flex-wrap: wrap; }
@media (max-width: 767.98px) { .czn_panneau { left: 12px; top: auto; bottom: 12px; width: calc(100% - 24px); max-width: none; max-height: 60%; } }

.cto_en_mode { cursor: crosshair !important; }
.cto_cible { display: flex !important; align-items: center; justify-content: center; color: #181C32; font-size: 20px; text-shadow: 0 0 3px #FFFFFF, 0 0 6px #FFFFFF; }
.cto_autre span { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--cto-s); color: #FFFFFF; font-size: 10px; font-weight: 700; opacity: .8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25); white-space: nowrap; transform: translate(-50%, -50%); }
.cto_repere > div { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 14px; background: #FFFFFF; border: 2px solid var(--cto-r);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25); white-space: nowrap; transform: translate(-14px, -50%); font-size: 11px; color: #181C32; }
.cto_repere i { width: 20px; height: 20px; border-radius: 50%; background: var(--cto-r); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }

/* Mode nuit : le fond de carte s'assombrit, les repères restent lisibles */
.cto_nuit { background: #0E1525 !important; }
.cto_nuit .leaflet-image-layer { filter: brightness(.42) contrast(1.2) saturate(.65); }

/* Plein écran : la carte prend tout l'écran, en-tête compris */
#carte_operationnelle.cto_plein { background: #FFFFFF; }
#carte_operationnelle.cto_plein > .card { height: 100vh; margin: 0; border-radius: 0; display: flex; flex-direction: column; }
#carte_operationnelle.cto_plein .card-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#carte_operationnelle.cto_plein .carte_ops_corps { flex: 1; height: auto !important; min-height: 0; }

@media (max-width: 767.98px) {
    .cto_barre { width: 138px; }
    .cto_bouton { width: 28px; height: 28px; font-size: 12px; }
    .cto_panneau { left: 12px; top: auto; bottom: 12px; width: calc(100% - 24px); max-width: none; max-height: 55%; }
}

/* Barre d'outils : le groupe « Vue » (2026-11-05) et l'état « active » posé par cta.js et carte_zones.js */
.cto_segment_barre { margin-bottom: 5px; }
.cto_segment_barre button { padding: 4px 2px; font-size: 10.5px; }
.cto_segment_barre button.active { background: #FFFFFF; color: #3699FF; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.cto_bouton.active { background: #3699FF; color: #FFFFFF; box-shadow: 0 4px 12px rgba(54, 153, 255, .35); }
.cto_bouton.carte_3d_attente i { animation: fa-spin 1s linear infinite; }

/* Les boutons du bas à droite (réseau autoroutier, relais radio, lieux particuliers, zoom) : même style que la barre */
.carte_cta .leaflet-bottom.leaflet-right .leaflet-bar { margin: 0 12px 6px 0; border: 0; border-radius: 11px; overflow: hidden; background: rgba(255, 255, 255, .97);
    box-shadow: 0 6px 20px rgba(24, 28, 50, .16); }
.carte_cta .leaflet-bottom.leaflet-right .leaflet-bar:last-child { margin-bottom: 12px; }
.carte_cta .leaflet-bottom.leaflet-right .leaflet-bar a { width: 36px; height: 36px; line-height: 36px; border: 0; background: transparent; color: #5E6278; font-size: 14px;
    transition: background .15s, color .15s; }
.carte_cta .leaflet-bottom.leaflet-right .leaflet-bar a + a { border-top: 1px solid #F1F1F4; }
.carte_cta .leaflet-bottom.leaflet-right .leaflet-bar a:hover { background: #E1F0FF; color: #3699FF; }
.carte_cta .leaflet-bottom.leaflet-right .leaflet-bar a.carte_reseau_actif,
.carte_cta .leaflet-bottom.leaflet-right .leaflet-bar a.carte_etare_actif,
.carte_cta .leaflet-bottom.leaflet-right .leaflet-bar a.carte_antennes_actif { background: #3699FF; color: #FFFFFF; }
.carte_cta .leaflet-bottom.leaflet-right .leaflet-control-zoom a { font-size: 17px; font-weight: 400; }

/* Interrupteur « Véhicules engagés seulement » de la barre d'outils (2026-11-05) */
.cto_interrupteur { display: flex; align-items: center; gap: 7px; width: 100%; margin: 0 0 6px; padding: 5px 6px; border: 0; border-radius: 8px; background: #F5F8FA;
    color: #5E6278; font-size: 10.5px; font-weight: 600; text-align: left; line-height: 1.25; cursor: pointer; }
.cto_interrupteur:hover { background: #E1F0FF; }
.cto_interrupteur span { position: relative; flex: none; width: 26px; height: 15px; border-radius: 8px; background: #D1D3E0; transition: background .15s; }
.cto_interrupteur span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #FFFFFF; transition: left .15s; }
.cto_interrupteur.active { color: #3699FF; }
.cto_interrupteur.active span { background: #3699FF; }
.cto_interrupteur.active span::after { left: 13px; }

/* Fonds de carte en grille 2 x 2 dans la barre d'outils (2026-11-05) */
.cto_segment_grille { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cto_segment_grille button { white-space: normal; line-height: 1.15; }

/* Noms des rues écrits le long des rues (noms_rues.js, 2026-11-05) : halo pour rester lisible sur tous les fonds */
.nr_svg { pointer-events: none; }
.nr_t { font-family: Poppins, Helvetica, sans-serif; letter-spacing: 0.4px; fill: #FFFFFF; stroke: rgba(15, 23, 42, 0.85);
    stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; }
.nr_r1 { fill: #FFF4C2; }
.carte_fond_plan .nr_t { fill: #3F4254; stroke: rgba(255, 255, 255, 0.92); }
.carte_fond_plan .nr_r1 { fill: #1E1E2D; }
/* Le fond « Routes » façon Waze (2026-11-05) : texte gris foncé, halo blanc */
.carte_fond_routes .nr_t { fill: #4B4B4B; stroke: rgba(255, 255, 255, 0.95); }
.carte_fond_routes .nr_r1 { fill: #2B2B2B; }

/* ---- Sauveteurs citoyens (2026-11-05, include/js/cta/sauveteurs.js) ---- */
.cta_sauveteurs_fenetre .modal-xl { max-width: min(1240px, 96vw); }
.sv_tete .modal-title { display: flex; align-items: center; gap: 10px; }
.sv_coeur { width: 34px; height: 34px; border-radius: 50%; background: #FFE2E5; color: #F64E60; display: inline-flex; align-items: center; justify-content: center; animation: sv_battement 1.1s ease-in-out infinite; }
@keyframes sv_battement { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
.sv_corps { display: flex; gap: 16px; padding: 16px !important; height: min(70vh, 640px); }
.sv_carte_zone { position: relative; flex: 1.5; border-radius: 12px; overflow: hidden; min-width: 0; }
.sv_carte { position: absolute; inset: 0; }
.sv_rayon_barre { position: absolute; z-index: 800; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); font-size: 12px; }
.sv_rayon_barre b { min-width: 52px; text-align: center; font-size: 14px; color: #F64E60; }
.sv_cote { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sv_lieu { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #F3F6F9; border-left: 4px solid #F64E60; }
.sv_lieu span { color: #7E8299; font-size: 12px; }
.sv_compteurs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sv_compte { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 8px; background: #F3F6F9; font-size: 10.5px; color: #7E8299; text-align: center; }
.sv_compte b { font-size: 18px; color: #3F4254; }
.sv_compte.sv_alerte b { color: #FFA800; }
.sv_compte.sv_accepte b { color: #3699FF; }
.sv_compte.sv_sur_place b { color: #1BC5BD; }
.sv_actions { display: flex; gap: 8px; }
.sv_actions .btn { flex: 1; }
.sv_liste { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.sv_vide { margin: auto; text-align: center; color: #7E8299; padding: 20px; line-height: 1.8; }
.sv_vide i { font-size: 24px; color: #F64E60; }
.sv_ligne { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid #EBEDF3; background: #fff; }
.sv_ligne.sv_hors { opacity: .6; }
.sv_ligne.sv_absent .sv_qui b { text-decoration: line-through; }
.sv_pastille { width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #FFE2E5; color: #F64E60; }
.sv_alerte .sv_pastille { background: #FFF4DE; color: #FFA800; }
.sv_accepte .sv_pastille { background: #E1F0FF; color: #3699FF; }
.sv_sur_place .sv_pastille { background: #C9F7F5; color: #1BC5BD; }
.sv_refuse .sv_pastille { background: #F3F6F9; color: #B5B5C3; }
.sv_qui { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sv_qui small { color: #7E8299; }
.sv_etat { font-size: 11px; font-weight: 700; color: #7E8299; white-space: nowrap; }
.sv_accepte .sv_etat { color: #3699FF; }
.sv_sur_place .sv_etat { color: #1BC5BD; }
.sv_alerte .sv_etat { color: #FFA800; }
.sv_pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #7E8299; }
.sv_icone { background: none !important; border: 0 !important; }
.sv_lieu_pin { position: relative; transform: translate(-50%, -100%); width: 38px; height: 38px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #F64E60; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; }
.sv_lieu_pin i { rotate: 45deg; color: #fff; font-size: 16px; }
.sv_pion { position: relative; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 16px; background: #fff; border: 2px solid var(--c); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); font-size: 11px; font-weight: 700; white-space: nowrap; color: #3F4254; }
.sv_pion i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.sv_pion_vu { box-shadow: 0 0 0 4px rgba(246, 78, 96, .35), 0 2px 6px rgba(0, 0, 0, .3); z-index: 10; }
@media (max-width: 900px) { .sv_corps { flex-direction: column; height: auto; } .sv_carte_zone { height: 320px; flex: none; } }

/* ---- Les défibrillateurs (DAE) sur les cartes : carto ops, sauveteurs (2026-11-06) ---- */
.cto_dae span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #00963D; color: #fff; font-size: 11px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); transform: translate(-50%, -50%); }
.cto_dae_vide span { background: #7E8299; }