.overflow-x-hidden { overflow-x: hidden; }
.section-heading    { color: #2c3e50; margin-bottom: 20px; font-weight: 700; }
.mb-20             { margin-bottom: 20px; }
.card-flex-column  { height: 320px; display: flex; flex-direction: column; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card-flex-column-large { height: 360px; }
.card-header-primary { background-color: #3498db; color: white; font-weight: 600; }
.card-header-danger  { background-color: #e74c3c; color: white; font-weight: 600; }
.card-header-success { background-color: #27ae60; color: white; font-weight: 600; }
.p-15              { padding: 15px; }
.p-10              { padding: 10px; }
.flex              { display: flex; }
.flex-column       { flex-direction: column; }
.flex-1            { flex: 1; }
.flex-shrink-0     { flex-shrink: 0; }
.gap-5             { gap: 5px; }
.align-start       { align-items: flex-start; }
.mb-10             { margin-bottom: 10px; }
.position-relative { position: relative; }
.min-w-0           { min-width: 0; }
.btn-espece-add {
    background-color: #27ae60; 
    border-color: #27ae60;
    padding: 8px 14px; 
    font-size: 16px; 
    font-weight: bold;
    flex-shrink: 0; 
    border-radius: 5px;
}

.strong-title { color: #2c3e50; font-size: 0.9em; }

/* liste d'espèces sélectionnées */
.espece-item { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #eee; }
.espece-name { flex: 1; }
.btn-remove-espece { background-color: #e74c3c; border-color: #e74c3c; color: white; font-weight: bold; padding: 2px 8px; border-radius: 4px; }
.strong-title { color: #2c3e50; font-size: 0.9em; }
.section-heading    { color: #2c3e50; margin-bottom: 20px; font-weight: 700; }
.mb-20             { margin-bottom: 20px; }
.card-flex-column  { height: 320px; display: flex; flex-direction: column; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card-header-primary { background-color: #3498db; color: white; font-weight: 600; }
.card-header-danger  { background-color: #e74c3c; color: white; font-weight: 600; }
.card-header-success { background-color: #27ae60; color: white; font-weight: 600; }
.p-10              { padding: 10px; }
.overflow-auto     { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.field-value       { margin:0; font-size:14px; font-weight:500; color:#111827; }
.table-proc-name   { font-weight:500; color:#111827; }
.nowrap            { white-space: nowrap; }
.icon-small        { font-size:11px; }
.success-text      { color:#15803d; font-weight:600; font-size:15px; }
.success-mono      { color:#15803d; font-family:monospace; font-weight:700; }
.field-value       { margin:0; font-size:14px; font-weight:500; color:#111827; }
/* Enlève les marges non désirées */
.container-fluid,
.container-fluid > .row,
.nav-content,
.tab-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0;
}

.login-background {
    background-image: url('../img/vecteezy_abstract-template-background-white-and-bright-blue-squares_4243021.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    min-height: 100vh;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    padding: 30px 0;
}

.login-container {
    width: 300px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-top: 50px;
}

.bubble-title {
    background-color: white;
    color: black;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 26px;
    line-height: 30px;
    margin-bottom: 30px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    width: 60%;
    text-align: center;
    white-space: pre-line;
}

.internal-usage-notice {
    text-align: center;
}

.internal-usage-notice p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
}

.internal-usage-notice--login {
    max-width: 420px;
    margin-top: 20px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.internal-usage-notice--login p {
    color: #374151;
}

.internal-usage-notice--sidebar {
    margin-bottom: 10px;
}

.internal-usage-notice--sidebar p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
}

.sidebar.collapsed .internal-usage-notice--sidebar {
    display: none;
}

.app-version-band {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 8px;
    background: transparent;
    border-top: 1px solid #f3f4f6;
}

.app-version-band__text {
    font-size: 10px;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.2;
}

.content-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ── Page Contact ─────────────────────────────────────────────────────────── */

.contact-page {
    padding: 0 4px 32px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: 1fr; }
}

.contact-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.contact-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.contact-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.contact-card-desc {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.55;
}

.contact-card-email {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
    margin-top: 4px;
}

.contact-card-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

.contact-card-link:hover {
    text-decoration: underline;
}

.contact-card-email-label {
    color: #9ca3af;
    font-size: 12px;
}

.contact-card-footnote {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
}

.contact-rgpd-block {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    padding: 18px 20px;
}

.contact-rgpd-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ede9fe;
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.contact-rgpd-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #374151;
}

.contact-rgpd-text {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.55;
}

/* ── Page Données personnelles (RGPD) ─────────────────────────────────────── */

.legal-page {
    width: 100%;
    box-sizing: border-box;
    padding: 0 4px 40px;
}

.legal-notice-banner {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 24px;
}

.legal-section {
    margin-bottom: 22px;
}

.legal-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}

.legal-section-text {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.65;
    margin: 0 0 8px;
}

.legal-list {
    margin: 0 0 10px;
    padding-left: 22px;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.65;
}

.legal-list li {
    margin-bottom: 4px;
}

.legal-inline-link {
    color: #2563eb;
    text-decoration: underline;
    cursor: pointer;
}

.legal-inline-link:hover {
    color: #1d4ed8;
}

.custom-navset {
    height: 68px;
    justify-content: space-between;
    padding: 0 5%;
    position: fixed;
    width: 100%;
    z-index: 10;
}

.suggestion-box {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    /* Doit passer au-dessus des champs (y compris selectize), sinon il est masqué */
    z-index: 10070;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
}

/* Bloc saisie « Espèces, espaces et habitats » : pas de scroll forcé, marges resserrées */
.jur-taxons-block {
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 0;
}
.jur-taxons-block .jur-taxons-subtitle {
    margin-bottom: 6px !important;
}
.jur-taxons-block .espece-search-wrapper .shiny-input-container,
.jur-taxons-block .espace-search-wrapper .shiny-input-container,
.jur-taxons-block .habitat-search-wrapper .shiny-input-container {
    margin-bottom: 0 !important;
}
.jur-taxons-block .suggestion-box {
    max-height: none !important;
    overflow-y: visible !important;
}
.jur-taxons-block .espece-liste-wrap {
    max-height: none !important;
    overflow-y: visible !important;
}

.suggestion-item:hover {
    background-color: #f0f0f0;
}

/* ---------------- SELECTIZE (LISTES DÉROULANTES) ---------------- */
/* Assure que les listes déroulantes restent au premier plan */
.selectize-dropdown,
.selectize-dropdown.form-control {
    z-index: 10050 !important;
}
/* Le contrôle doit aussi être dans un contexte au-dessus si des parents ont des z-index */
.selectize-control {
    position: relative;
    /* IMPORTANT: ne pas surélever le champ lui-même, sinon il recouvre d'autres popups
       (ex. listes de suggestions espèces/habitats). Seul le dropdown doit être au-dessus. */
    z-index: 1;
}

/* Dans les formulaires "jur-*": garder l'INPUT aligné comme les autres champs,
   tout en laissant la LISTE déroulante au-dessus. */
.jur-section-wrap .selectize-control,
.jur-section-wrap .selectize-control .selectize-input {
    width: 100%;
    box-sizing: border-box;
}
.jur-section-wrap .selectize-control { z-index: 1; }
.jur-section-wrap .selectize-input,
.jur-section-wrap .selectize-input.form-control {
    min-height: 34px;
    padding: 6px 10px !important;
    border-radius: 6px;
}
.jur-section-wrap .selectize-control.single .selectize-input,
.jur-section-wrap .selectize-control.multi .selectize-input {
    line-height: 20px;
}
.jur-section-wrap .selectize-input > input {
    line-height: 20px !important;
}

/* ---------------- DATEPICKER (CALENDRIERS) ---------------- */
/* Shiny Python utilise bootstrap-datepicker : le popup doit toujours passer au-dessus. */
.datepicker,
.datepicker-dropdown,
.bootstrap-datepicker,
.bootstrap-datepicker-dropdown,
.bootstrap-datepicker.dropdown-menu {
    z-index: 10060 !important;
}

/* Surcouche: uniquement pour les champs de dépôt (pénal)
   Objectif: le dropdown doit passer au-dessus des champs suivants. */
.gn-selectize-depot-top {
    position: relative;
    z-index: 200000;
}
.gn-selectize-depot-top .selectize-control {
    z-index: 199990 !important;
}
.gn-selectize-depot-top .selectize-dropdown,
.gn-selectize-depot-top .selectize-dropdown.form-control {
    z-index: 200000 !important;
}

/* ---------------- TOPBAR ---------------- */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    width: 100%;
    background-color: #4e8cff;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0 1rem;
    z-index: 1000;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Toggle bouton */
.topbar-toggle {
    cursor: pointer;
    font-size: 24px;
    margin-right: 10px;
}

/* Zone droite de la topbar */
.topbar-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

/* Bloc utilisateur connecté */
.topbar-user {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13.5px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    margin-right: 10px;
}
.topbar-user-name {
    white-space: nowrap;
}

/* Bouton déconnexion (même style que btn-valider / btn-add-procedure, couleur danger) */
.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #fff !important;
    background: #f88585 !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25);
    transition: background 0.15s;
    cursor: pointer;
    text-decoration: none !important;
}
.btn-logout:hover {
    background: #b91c1c !important;
}

.app-body {
    display: flex;
    flex-direction: row;
    margin-top: 60px; /* espace pour la topbar */
    height: calc(100vh - 60px);
}

.app-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.app-body {
    display: flex;
    flex: 1;
    margin-top: 60px; /* hauteur de la topbar */
    height: calc(100vh - 60px);
}

/* ---------------- SIDEBAR ---------------- */
.sidebar {
    position: relative;
    width: 200px;
    background-color: #75b8ff;
    color: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    z-index: 999;
}

.sidebar.collapsed {
    width: 60px;
}

/* Zone scrollable de la sidebar (menu) */
.sidebar-menu-wrap {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-footer {
    flex: 0 0 auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
}

.sidebar-logo {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 8px;
}

.sidebar.collapsed .sidebar-footer {
    padding: 10px 6px;
}

.sidebar.collapsed .sidebar-logo {
    max-width: 46px;
    border-radius: 6px;
}

/* Masquer le texte des labels quand la sidebar est réduite */
.sidebar.collapsed .label {
    display: none;
}

.sidebar.collapsed .sidebar-item {
    flex-direction: column;
    align-items: center;
}

.sidebar-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap: 0px; 
}

.sidebar-item {
    list-style: none;
    border-bottom: 1px solid #75b8ff;
}

.sidebar-item .label {
    margin-left: 10px;
    font-size: 14px;
}

.sidebar-item .fa {
    font-size: 20px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: white;
    text-decoration: none;
    background-color: #75b8ff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.sidebar-link.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-left: 3px solid #007bff;
    color: #ffffff !important;
}

.sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

/* Assurer que les liens ne se comportent pas comme des liens normaux */
.sidebar-link {
    text-decoration: none !important;
    color: inherit;
}

.sidebar-link:visited {
    color: inherit;
}

/* .sidebar-link:hover {
    background-color: #304b66;
} */

.sidebar-link i {
    margin-right: 10px;
    min-width: 20px;
    text-align: center;
}

.sidebar a {
    text-decoration: none;
    color: inherit;
}

.topbar-toggle {
    cursor: pointer;
}


/* ---------------- contenu principal ---------------- */
.main-content {
    flex: 1;
    background-color: rgb(255, 255, 255);
    padding: 20px;
    overflow-y: auto;
    min-height: 0;
}

body {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 21px;
}

body, html {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
}

.breadcrumb-link {
    text-decoration: none;
    cursor: pointer;
    color: #000000; /* couleur de lien */
    transition: text-decoration 0.2s ease;
}

.breadcrumb-link:hover {
    text-decoration: underline;
}

/* Découverte_individu : Elément environnement */
.table1_n-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* ajustable */
    gap: 16px;
    padding: 0%;
}
  
.table1_n-grid_alongee {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr)); /* ajustable */
    gap: 16px;
    padding: 10px;
}

.table1_n-block {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

.table1_n-petit-block {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
    max-width: 350px;
    width: 100%;
}

/* ---------------- BOUTONS PERSONNALISÉS ---------------- */
.btn-rounded {
    border-radius: 10px;
    color: white !important;
    font-weight: bold;
}

/* Bloc auteur : grille 3/12 + 4/12 + 4/12 + 1/12 */
.auteur-block {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: #fff;
    max-width: 100%;
    box-sizing: border-box;
}
.auteur-block .auteur-row {
    margin-left: 0;
    margin-right: 0;
    align-items: center;
}
.auteur-block .auteur-col-identite,
.auteur-block .auteur-col-nom,
.auteur-block .auteur-col-prenom,
.auteur-block .auteur-col-btn {
    padding-left: 8px;
    padding-right: 8px;
}
.auteur-block .shiny-input-container,
.auteur-block .form-group { margin-bottom: 0 !important; }
.auteur-block .auteur-col-identite .form-group { display: flex; align-items: center; }
.auteur-block .auteur-col-identite label { white-space: nowrap; margin-bottom: 0; }
.auteur-block input[type="text"] {
    width: 100% !important;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    height: 34px;
    box-sizing: border-box;
}
.auteur-block .auteur-col-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.auteur-block .btn-remove-auteur {
    width: 30px;
    height: 30px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
}

/* Sanction avec durée (mois) accolée à la checkbox — tout sur une ligne */
.sanction-avec-duree {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}
.sanction-avec-duree .shiny-input-container,
.sanction-avec-duree .form-group {
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}
.sanction-avec-duree .form-group label,
.sanction-avec-duree label {
    white-space: nowrap !important;
    margin-bottom: 0 !important;
}
.sanction-avec-duree input[type="number"] { width: 64px !important; min-width: 64px; box-sizing: border-box; }
.sanction-avec-duree input[type="checkbox"] { flex-shrink: 0; }
/* Bloc durée + "mois" collé : ne pas prendre toute la largeur, rester groupé */
.sanction-avec-duree .sanction-duree-mois {
    flex: 0 0 auto;
    width: fit-content;
}
.sanction-duree-mois {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.sanction-duree-mois .shiny-input-container { margin: 0 !important; width: auto !important; }
.sanction-duree-mois .form-group { margin: 0 !important; }
.sanction-duree-mois .shiny-input-container + span,
.sanction-duree-mois input + span { margin-left: 2px; }

/* Liste espèces sélectionnées : compact */
.espece-liste-wrap .espece-ligne + .espece-ligne { margin-top: 0; }
.espece-liste-wrap .shiny-input-container { margin-bottom: 0 !important; }
.espece-liste-wrap input[type="number"] { padding: 4px 6px !important; font-size: 12px !important; width: 100% !important; }

/* ---------------- RECHERCHE D'ESPÈCES ---------------- */
.espece-search-wrapper input[type="text"] {
    width: 100% !important;
    box-sizing: border-box;
}

/* ---------------- NOMENCLATURES ---------------- */
/* Masquer la barre de défilement horizontale */
.nomenclature-container {
    overflow-x: hidden !important;
}

.nomenclature-container > div {
    overflow-x: hidden !important;
}

/* Espacement entre chaque élément de checkbox */
.nomenclature-container > div > div {
    margin-top: 5px;
}

.nomenclature-container > div > div:first-child {
    margin-top: 0;
}

/* Suppression de l'espace en dessous des catégories (checkbox shiny) */
.nomenclature-container .form-group.shiny-input-container {
    margin-bottom: 0 !important;
}

/* Catégories sans sous-catégories : checkbox à droite + texte en gras */
.nomenclature-container [class^="nomenclature-category-"] .form-group.shiny-input-container {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.nomenclature-container [class^="nomenclature-category-"] .form-group.shiny-input-container label {
    font-weight: bold !important;
    margin-left: 10px !important;
    margin-bottom: 0 !important;
    order: 2;
}

.nomenclature-container [class^="nomenclature-category-"] .form-group.shiny-input-container input[type="checkbox"] {
    order: 1;
    margin: 0 !important;
}

/* ---------------- ACCORDÉONS PERSONNALISÉS ---------------- */

/* Conteneur principal de chaque panneau d'accordéon */
.accordion-item {
    border: 1px solid #d3d3d3 !important;        /* Bordure grise tout autour du panneau */
    border-top: 2px solid #3498db !important;    /* Bordure bleue au-dessus du panneau */
    border-radius: 4px !important;                 /* Coins légèrement arrondis (4px) */
    margin-bottom: 15px !important;                /* Espacement de 15px entre chaque panneau */
    background-color: #ffffff !important;        /* Fond blanc pour le panneau */
    box-shadow: none !important;                   /* Pas d'ombre portée pour un design plat */
}

/* Bouton cliquable de l'en-tête de l'accordéon */
.accordion-button {
    background-color: #f5f5f5 !important;        /* Fond gris clair pour l'en-tête */
    color: #333333 !important;                   /* Texte gris foncé */
    font-weight: 500 !important;                   /* Texte semi-gras */
    padding: 15px 20px !important;                 /* Espacement interne : 15px haut/bas, 20px gauche/droite */
    border: none !important;                       /* Pas de bordure par défaut sur le bouton */
    border-bottom: 1px solid #d3d3d3 !important; /* Ligne de séparation grise sous l'en-tête */
    box-shadow: none !important;                   /* Pas d'ombre sur le bouton */
    font-size: 16px !important;                    /* Taille de police de 16px */
}

/* Style du bouton quand l'accordéon est OUVERT (not collapsed = ouvert) */
.accordion-button:not(.collapsed) {
    background-color: #f5f5f5 !important;        /* Garde le même fond gris clair quand ouvert */
    color: #333333 !important;                   /* Garde la même couleur de texte */
    box-shadow: none !important;                   /* Pas d'ombre même quand ouvert */
    border-bottom: 1px solid #d3d3d3 !important; /* Garde la bordure inférieure quand ouvert */
}

/* Style du bouton quand l'accordéon est FERMÉ (collapsed) */
.accordion-button.collapsed {
    border-bottom: none !important;                /* Supprime la bordure inférieure quand fermé */
}

/* Style au survol de la souris sur le bouton */
.accordion-button:hover {
    background-color: #ebebeb !important;        /* Fond un peu plus foncé au survol pour l'effet interactif */
}

/* Style quand le bouton est cliqué/focalisé */
.accordion-button:focus {
    box-shadow: none !important;                   /* Pas d'ombre bleue par défaut de Bootstrap */
    border-color: #d3d3d3 !important;            /* Garde la bordure grise */
    outline: none !important;                      /* Supprime le contour du navigateur */
}

/* Style du symbole +/− à droite du bouton (::after = pseudo-élément après le texte) */
.accordion-button::after {
    content: "−" !important;                       /* Affiche le symbole "−" (moins) quand ouvert */
    background-image: none !important;             /* Supprime l'icône par défaut de Bootstrap */
    margin-left: auto !important;                  /* Pousse le symbole tout à droite */
    font-size: 1.5rem !important;                  /* Taille du symbole (1.5x la taille normale) */
    font-weight: normal !important;                /* Épaisseur normale du symbole */
    transform: none !important;                    /* Pas de rotation (Bootstrap fait tourner par défaut) */
}

/* Style du symbole quand l'accordéon est FERMÉ */
.accordion-button.collapsed::after {
    content: "+" !important;                       /* Affiche le symbole "+" (plus) quand fermé */
    transform: none !important;                    /* Pas de rotation */
}

/* Contenu/corps de l'accordéon (la partie qui s'ouvre/ferme) */
.accordion-body {
    padding: 5px !important;                       /* Espacement interne de 20px tout autour du contenu */
    background-color: #ffffff !important;        /* Fond blanc pour le contenu */
}

/* ------------------------------------------------------------------ */
/* Styles importés depuis les fichiers Python (inline -> centralisé) */

/* variables et design partagés pour les pages de saisie */
:root {
    --c-bg:#f5f6f8; --c-surface:#fff; --c-border:#e5e7eb;
    --c-text:#111827; --c-muted:#6b7280; --c-label:#9ca3af;
    --c-accent:#2563eb;
}
.jur-breadcrumb{display:flex;align-items:center;gap:6px;
    font-size:13px;color:var(--c-muted);margin-bottom:20px;}
.jur-breadcrumb .breadcrumb-link{color:var(--c-muted)!important;
    text-decoration:none!important;background:none!important;
    border:none!important;padding:0!important;font-size:13px!important;cursor:pointer;}
.jur-breadcrumb .breadcrumb-link:hover{color:var(--c-accent)!important;}
.jur-breadcrumb .sep{color:var(--c-border);}
.jur-breadcrumb .current{color:var(--c-text);font-weight:600;}
.jur-page-title{font-size:20px;font-weight:700;color:var(--c-text);
    margin:0 0 0px 0;letter-spacing:-.3px;}
/* Titre page consultation pénale : espace avant le bloc contentieux */
.jur-page-title.jur-consultation-titre{margin-bottom:32px!important;}
/* Grande partie : pas de fond */
.jur-section-wrap {
    background: none !important;
    border-radius: 0;
    padding: 20px 0;
    margin-bottom: 28px;
}
/* Gros titres de section : trait en dessous (couleur définie en inline par partie), pas de fond ni trait à gauche */
.jur-section-main-title {
    margin-top: 2rem;
    margin-bottom: 16px;
    padding: 0 0 10px 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.jur-section-main-title:first-child { margin-top: 0; }
.jur-section-main-title .jur-section-main-title-text {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.02em;
}
/* Sous-titres de section : titre avec un trait en dessous (couleur en inline, même que le main title de la partie) */
.jur-section-sub-title {
    margin-top: 32px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    font-weight: 600;
    font-size: 1.05rem;
    color: #1e293b;
}
.jur-form-row{display:flex;background:var(--c-surface);
    border:1px solid #f8f9fa;border-radius:10px;
    overflow:visible;margin-bottom:20px;}
    
.jur-form-col{flex:1;padding:20px 24px;
    border-right:15px solid #f8f9fa;}
.jur-form-col:last-child{
    border-right:none;
}
/* Même grille que .jur-form-col mais séparateurs fins (saisie nouvelle procédure) */
.jur-form-col-saisie-procedure{flex:1;padding:20px 24px;
    border-right:1px solid var(--c-border);}
.jur-form-col-saisie-procedure:last-child{
    border-right:none;
}
.jur-form-col-wide{
    flex:2;
}
.jur-section-label{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--c-muted);
    margin-bottom:14px;
    display:block;
}
.jur-col-label{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--c-label);
    margin-bottom:14px;
    display:block;
}

/* Sanctions civiles : 4 champs en 1 ligne (grand écran) ou 2 lignes de 2 (petit écran), jamais 3+1 */
.jur-sanctions-civiles-row-4 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: flex-start;
    margin-bottom: 8px;
}
.jur-sanctions-civiles-row-4 > * {
    flex: 1 1 calc(25% - 18px);
    min-width: 180px;
}
@media (max-width: 768px) {
    .jur-sanctions-civiles-row-4 > * {
        min-width: calc(50% - 12px);
        flex-basis: calc(50% - 12px);
    }
}

.btn-valider{display:inline-flex;align-items:center;gap:7px;
    padding:9px 18px;font-size:13px;font-weight:600;
    color:#fff!important;background:var(--c-accent)!important;
    border:none!important;border-radius:8px!important;
    box-shadow:0 1px 3px rgba(37,99,235,.25);transition:background .15s;
    cursor:pointer;width:100%;justify-content:center;}
.btn-valider:hover:not([disabled]){background:#1d4ed8!important;}
.btn-valider[disabled]{opacity:.45;cursor:not-allowed;}

/* petits utilitaires utilisés dans plusieurs composants */
.flex              { display: flex; }
.gap-24            { gap: 24px; }
.flex-1            { flex: 1; }
.mt-16             { margin-top: 16px; }
.mt-8              { margin-top: 8px; }
.error-box         { padding:12px 16px; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; margin-bottom:16px; }
.error-text        { color:#ef4444; font-weight:500; }
.success-box       { padding:12px 16px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; margin-bottom:20px; }
.success-text      { color:#15803d; font-weight:600; font-size:15px; }
.success-mono      { color:#15803d; font-family:monospace; font-weight:700; }

/* autres règles glanées de l'ancien code */
.saisie-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 20px 0; border-bottom: 1px solid #e5e7eb; margin-bottom: 28px; }
.saisie-header h2 { margin: 0; font-size: 22px; font-weight: 700; color: #111827; letter-spacing: -0.3px; }
.saisie-header p { margin: 3px 0 0 0; font-size: 13px; color: #6b7280; }
.btn-add-procedure { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; font-size: 13px; font-weight: 600; color: #fff !important; background: #2563eb !important; border: none !important; border-radius: 8px !important; box-shadow: 0 1px 3px rgba(37,99,235,.25); transition: background .15s, box-shadow .15s; cursor: pointer; text-decoration: none !important; }
.btn-add-procedure:hover { background: #1d4ed8 !important; box-shadow: 0 4px 10px rgba(37,99,235,.3); }
/* ── Panneau de filtres tableau ────────────────────────────────── */
.filtres-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.filtre-item {
    display: flex;
    flex-direction: column;
    flex: 1 1 160px;
    min-width: 140px;
    max-width: 240px;
}
.filtre-item .form-group { margin-bottom: 0; }
.filtre-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    margin-bottom: 4px;
    display: block;
}
.filtre-item select,
.filtre-item input[type="text"] {
    font-size: 12.5px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    padding: 5px 8px;
    color: #374151;
    background: #f9fafb;
    transition: border-color .15s, box-shadow .15s;
    height: 32px;
    width: 100%;
}
.filtre-item select:focus,
.filtre-item input[type="text"]:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
    background: #fff;
}
.filtre-reset-wrap {
    flex: 0 0 auto;
    justify-content: flex-end;
    align-self: flex-end;
}
.btn-reset-filtres {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    height: 32px;
}
.btn-reset-filtres:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

/* ── Tableau procédures ────────────────────────────────────────── */
.proc-table-wrap { background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.proc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.proc-table thead tr { background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.proc-table thead th { padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; white-space: nowrap; }
.proc-table tbody tr { border-bottom: 1px solid #f3f4f6; transition: background .1s; }
.proc-table tbody tr:last-child { border-bottom: none; }
.proc-table tbody tr:hover { background: #f9fafb; }
.proc-table td { padding: 12px 16px; color: #374151; vertical-align: middle; }
.proc-table td:first-child { font-family: monospace; font-size: 12px; color: #9ca3af; font-weight: 600; }

/* ── En-têtes triables ─────────────────────────────────────────── */
.sortable-th { cursor: pointer; user-select: none; transition: background .15s, color .15s; }
.sortable-th:hover { background: #f0f4ff; color: #374151; }
.sortable-th.sorted { color: #1d4ed8; background: #eff6ff; }
.sort-arrow { margin-left: 5px; font-size: 10px; color: #d1d5db; display: inline-block; }
.sort-arrow--active { color: #1d4ed8; }
.badge-statut { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; background: #eff6ff; color: #1d4ed8; white-space: nowrap; }
.btn-action { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 6px; font-size: 12px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: all .15s; margin-right: 4px; text-decoration: none !important; }
.btn-consulter  { background:#f0f9ff; color:#0369a1; border-color:#bae6fd; }
.btn-consulter:hover  { background:#e0f2fe; }
.btn-modifier   { background:#fffbeb; color:#92400e; border-color:#fde68a; }

.btn-modifier:hover   { background:#fef3c7; }

/* Même gabarit que .btn-valider, couleurs .btn-modifier (en-tête consultation pénale) */
.btn-modifier-sommaire {
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    gap: 7px !important;
    border-radius: 8px !important;
    width: auto !important;
    max-width: max-content;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center;
    white-space: nowrap !important;
    margin-right: 0 !important;
}

.btn-supprimer-consultation {
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    gap: 7px !important;
    border-radius: 8px !important;
    width: auto !important;
    max-width: max-content;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center;
    white-space: nowrap !important;
    margin-right: 0 !important;
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

/* Shiny enveloppe le label dans .action-label ; forcer une seule ligne horizontale */
.btn-modifier-sommaire .action-label,
.btn-supprimer-consultation .action-label {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px;
    white-space: nowrap !important;
}

.btn-modifier-sommaire .action-label > span,
.btn-supprimer-consultation .action-label > span {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px;
    white-space: nowrap !important;
}
.btn-supprimer-consultation:hover {
    background: #fee2e2 !important;
}

.empty-state { text-align: center; padding: 56px 0; color: #9ca3af; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE VISUALISATION
   ═══════════════════════════════════════════════════════════════════════════ */

.vis-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── En-tête filtres : une ligne — organisme, période, type ───────────────── */
.vis-header {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.vis-filters-heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #374151;
    margin: 0;
}

.vis-header-filters-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 22px 40px;
    width: 100%;
}

.vis-header-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.vis-header-cell--org {
    flex: 0 1 280px;
    min-width: 200px;
}

.vis-header-cell--dates {
    flex: 0 0 auto;
}

.vis-header-cell--types {
    flex: 1 1 220px;
    min-width: 180px;
}

.vis-header-cell--types .vis-pill-filter .shiny-input-container { margin-bottom: 0 !important; }

.vis-header .vis-filter-label {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 6px;
    font-weight: 500;
    white-space: nowrap;
}

.vis-header-dates-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px 14px;
}
.vis-header-dates-row .form-group {
    margin-bottom: 0 !important;
}
.vis-header-date-infix {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    line-height: 1.2;
    flex-shrink: 0;
    padding-bottom: 1px;
}
.vis-header-dates-row .shiny-input-container {
    min-width: 0 !important;
    max-width: 104px;
    width: 104px !important;
    flex-shrink: 0;
}
.vis-header-dates-row .shiny-input-container > label.shiny-label-null {
    display: none !important;
}
.vis-header-dates-row .shiny-input-container .form-control,
.vis-header-dates-row input.form-control {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 13px;
}

.vis-org-label { font-size: 12px; color: #6b7280; margin: 0 0 6px; }

/* Sélecteur d'organisme dans le header (ligne unique) */
.vis-header-select-wrap { min-width: 180px; max-width: 360px; width: 100%; }
.vis-header-select-wrap .shiny-input-container { margin-bottom: 0 !important; }
.vis-header-select-wrap .selectize-control { margin-bottom: 0 !important; }
.vis-header-select-wrap .selectize-input {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    border: none !important;
    border-bottom: 2px solid #e5e7eb !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4px 28px 4px 0 !important;
    background: transparent !important;
    cursor: pointer;
}
.vis-header-select-wrap .selectize-input:focus,
.vis-header-select-wrap .selectize-input.focus {
    border-bottom-color: #3b82f6 !important;
    box-shadow: none !important;
}
.vis-header-select-wrap .selectize-input .placeholder { color: #9ca3af !important; font-weight: 400 !important; }
.vis-header-select-wrap .selectize-dropdown { border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.vis-header-select-wrap .selectize-dropdown-content .option { font-size: 14px; }

.vis-header-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.vis-header-pill {
    display: inline-block;
    padding: 5px 18px;
    border: 1.5px solid #93c5fd;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #1e40af;
    line-height: 1.4;
    background: #dbeafe;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.vis-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}

/* Ligne titre + pills de type sur la même ligne */
.vis-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.vis-section-header .vis-section-title { margin-bottom: 0; }
.vis-section-header .vis-pill-filter .shiny-input-container { margin-bottom: 0 !important; }
.vis-section-header .vis-pill-filter .shiny-options-group { flex-wrap: wrap; }

.vis-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #374151;
    text-transform: uppercase;
    margin: 0 0 16px;
}

/* ── Filtre années (pills) ────────────────────────────────────────────────── */
.vis-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.vis-filter-label {
    font-size: 13px;
    color: #374151;
    white-space: nowrap;
}

/* Suppression des marges par défaut du conteneur Shiny */
.vis-pill-filter .shiny-input-container { margin-bottom: 0 !important; }

/* Alignement horizontal des options */
.vis-pill-filter .shiny-options-group {
    display: flex;
    gap: 0px;
    flex-wrap: wrap;
}

/* ── Structure Shiny : label.checkbox-inline > input + span
   Le SPAN est la pill visible ; le label est juste un wrapper cliquable ── */

/* Label : wrapper transparent, curseur pointer */
.vis-pill-filter label.checkbox-inline,
.vis-pill-filter label.radio-inline {
    display: inline-block;
    cursor: pointer;
    margin: 0 !important;
    user-select: none;
    line-height: 0;      /* évite tout espace vertical résiduel */
    padding-left: calc(.35em * 2) !important;
}

/* Cacher l'input natif — display:none pour le sortir totalement du layout */
.vis-pill-filter label.checkbox-inline input,
.vis-pill-filter label.radio-inline input {
    display: none;
}

/* ── Le SPAN est la pill ── */
.vis-pill-filter label.checkbox-inline span,
.vis-pill-filter label.radio-inline span {
    display: inline-block;
    padding: 4px 14px;
    border: 1.5px solid #c7d9f0;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    background: #fff;
    line-height: 1.5;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.vis-pill-filter label.checkbox-inline:hover span,
.vis-pill-filter label.radio-inline:hover span {
    border-color: #93c5fd;
    background: #f0f7ff;
    color: #1e40af;
}

/* ── Sélectionné ── */
.vis-pill-filter label.checkbox-inline:has(input:checked) span,
.vis-pill-filter label.radio-inline:has(input:checked) span {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
    font-weight: 600;
}

/* ── Grille KPI ──────────────────────────────────────────────────────────── */
.vis-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
@media (max-width: 900px) { .vis-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .vis-kpi-grid { grid-template-columns: 1fr; } }

.vis-kpi-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
}
.vis-kpi-title {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 6px;
}
.vis-kpi-value {
    font-size: 30px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
    line-height: 1.1;
}

/* ── Barres de progression ───────────────────────────────────────────────── */
.vis-prog-block { display: flex; flex-direction: column; gap: 14px; }

.vis-prog-row { display: flex; align-items: center; gap: 14px; }

.vis-prog-label { width: 82px; font-size: 13px; color: #374151; flex-shrink: 0; }

.vis-prog-track {
    flex: 1;
    height: 10px;
    background: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
}
.vis-prog-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s ease;
}
.vis-prog-count { width: 48px; font-size: 12px; color: #6b7280; text-align: right; flex-shrink: 0; }
.vis-prog-pct   { width: 36px; font-size: 13px; color: #374151; text-align: right; flex-shrink: 0; font-weight: 600; }

/* ── Cartes financières ──────────────────────────────────────────────────── */
.vis-fin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}
@media (max-width: 768px) { .vis-fin-grid { grid-template-columns: 1fr; } }

.vis-fin-card {
    border: 1px solid;
    border-radius: 10px;
    padding: 20px;
}

/* ── Carte Folium ────────────────────────────────────────────────────────── */

/*
  Hauteur = viewport - barre de navigation (68px) - en-tête organisme (~96px)
            - barre d'onglets (~44px) - padding tab-content (20px) - titre section (~52px)
*/
:root { --vis-map-h: calc(100vh - 300px); }

.vis-map-frame {
    width: 100%;
    height: var(--vis-map-h);
    min-height: 420px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.vis-map-frame > div       { height: var(--vis-map-h) !important; min-height: 420px !important; padding-bottom: 0 !important; }
.vis-map-frame > div > div { height: var(--vis-map-h) !important; min-height: 420px !important; padding-bottom: 0 !important; }
.vis-map-frame iframe      { width: 100% !important; height: var(--vis-map-h) !important; min-height: 420px !important; border: none; }

.vis-map-legend {
    display: flex;
    gap: 20px;
    font-size: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    color: #374151;
}

/* ── État vide ───────────────────────────────────────────────────────────── */
.vis-empty {
    padding: 32px 0;
    color: #9ca3af;
    font-size: 14px;
    text-align: center;
}

/* ── Onglets de la page visualisation ───────────────────────────────────── */
.vis-tabs-wrap {
    margin-top: 8px;
}

/* Barre d'onglets */
.vis-tabs-wrap .nav-tabs {
    border-bottom: 2px solid #e5e7eb;
    gap: 4px;
    padding: 0 4px;
}

/* Chaque onglet */
.vis-tabs-wrap .nav-tabs .nav-link {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 20px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -2px;
    background: transparent;
    transition: color .15s, border-color .15s;
}

.vis-tabs-wrap .nav-tabs .nav-link:hover {
    color: #1d4ed8;
    border-bottom-color: #93c5fd;
    background: transparent;
}

/* Onglet actif */
.vis-tabs-wrap .nav-tabs .nav-link.active {
    color: #1d4ed8;
    font-weight: 600;
    border-bottom: 2px solid #1d4ed8;
    background: transparent;
}

/* Contenu de chaque panneau */
.vis-tab-content {
    padding-top: 20px;
}

/* Onglet Carte : pas de padding, la carte prend toute la place */
.vis-tab-content--map {
    padding-top: 0;
}

/* ── Tableau Délais ──────────────────────────────────────────────────────── */
.vis-delais-wrap {
    overflow-x: auto;
}

.vis-dt {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.vis-dt-th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
}
.vis-dt-th--center { text-align: center; }

.vis-dt-row:hover { background: #f9fafb; }

.vis-dt-td {
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    color: #111827;
    vertical-align: middle;
}
.vis-dt-td--center { text-align: center; }

/* Date en gras + police monospace */
.vis-dt-date {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Urgences : ≤ 7 jours → rouge pâle, ≤ 30 jours → orange pâle */
.vis-delay-urgent .vis-dt-td       { background: #fef2f2; }
.vis-delay-urgent .vis-dt-date     { color: #b91c1c; }

.vis-delay-soon .vis-dt-td         { background: #fff7ed; }
.vis-delay-soon .vis-dt-date       { color: #c2410c; }

/* Bouton Voir */
.vis-dt-link {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    background: #eff6ff;
    cursor: pointer;
    line-height: 1.6;
    transition: background .15s, border-color .15s;
}
.vis-dt-link:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}

/* Masquer la scrollbar du sommaire (Chrome, Edge, Safari) */
/*#sommaire-sticky::-webkit-scrollbar { display: none; }*/
#sommaire-sticky {
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE D'ACCUEIL
   ══════════════════════════════════════════════════════════════════════════ */

.home-page {
    width: 100%;
    padding: 0px 0 40px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Bandeau de bienvenue ─────────────────────────────────────────────────── */

.home-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    background: linear-gradient(135deg, #4e8cff 0%, #2563eb 100%);
    border-radius: 16px;
    padding: 28px 32px;
    color: #fff;
}

.home-hero-icon {
    font-size: 48px;
    flex-shrink: 0;
    opacity: 0.9;
}

.home-hero-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.home-hero-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    line-height: 1.2;
}

.home-hero-org {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.home-hero-desc {
    font-size: 14px;
    margin: 4px 0 0;
    color: rgba(255,255,255,0.88);
    line-height: 1.6;
    max-width: 620px;
}

@media (max-width: 600px) {
    .home-hero { flex-direction: column; text-align: center; }
    .home-hero-desc { max-width: 100%; }
}

/* ── Titre de section ─────────────────────────────────────────────────────── */

.home-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #374151;
    text-transform: uppercase;
    margin: 0 0 16px;
}

/* ── Grille de navigation rapide ─────────────────────────────────────────── */

.home-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 700px) { .home-nav-grid { grid-template-columns: 1fr; } }

.home-nav-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 20px 16px;
    cursor: pointer;
    transition: box-shadow 0.18s, transform 0.18s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-nav-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    transform: translateY(-2px);
}

.home-nav-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 4px;
}

.home-nav-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.home-nav-card-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.55;
    flex: 1;
}

.home-nav-card-link {
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
}

/* ── Grille d'information ─────────────────────────────────────────────────── */

.home-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (max-width: 600px) { .home-info-grid { grid-template-columns: 1fr; } }

.home-info-block {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-info-block-header {
    display: flex;
    align-items: center;
}

.home-info-block-title {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.home-info-block-text {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE ADMINISTRATION DES DROITS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lien admin dans la sidebar */
.sidebar-link-admin {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 8px;
    padding-top: 12px !important;
}
.sidebar-item-admin {
    margin-top: 4px;
}

/* Page principale */
.admin-page {
    width: 100%;
    box-sizing: border-box;
}

/* En-tête */
.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.admin-page-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.admin-page-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Filtres (recherche + organisme) */
.admin-filters-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 14px 0;
}
.admin-filter {
    width: 320px;
    max-width: 320px;
}
.admin-filter--sm {
    width: 260px;
    max-width: 260px;
}
.admin-page-icon {
    font-size: 2rem;
    color: #e74c3c;
}
.admin-page-title {
    margin: 0;
    font-weight: 700;
    color: #1e293b;
    font-size: 1.5rem;
}
.admin-page-subtitle {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

/* Notification flottante */
.admin-notification {
    background: #fff;
    border-radius: 8px;
    padding: 10px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    font-size: 14px;
    display: flex;
    align-items: center;
    max-width: 380px;
}

/* Accès refusé */
.admin-access-denied {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: #64748b;
    text-align: center;
    gap: 8px;
}

/* Légende des rôles */
.admin-roles-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.admin-legend-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.admin-legend-header {
    padding: 10px 14px;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
}
.admin-legend-desc {
    padding: 10px 14px;
    font-size: 12px;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

/* Badge de rôle inline */
.admin-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Corps des onglets */
.admin-tab-body {
    padding: 20px 0;
}

/* En-tête de section */
.admin-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f1f5f9;
}
.admin-section-icon {
    font-size: 1.4rem;
    color: #3498db;
}
.admin-section-title {
    margin: 0;
    font-weight: 700;
    color: #1e293b;
    font-size: 1rem;
}
.admin-section-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: #64748b;
}

/* Tableau utilisateurs */
.admin-table-wrapper {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.admin-table thead tr {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}
.admin-table thead th {
    padding: 12px 16px;
    font-weight: 700;
    color: #475569;
    text-align: left;
    white-space: nowrap;
}
.admin-table-row {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.admin-table-row:hover {
    background: #f8fafc;
}
.admin-table-row:last-child {
    border-bottom: none;
}
.admin-table-row td {
    padding: 12px 16px;
    vertical-align: middle;
}
.admin-table-row-editing {
    background: #fffbeb !important;
}
.admin-table-row-protected {
    background: #f8fafc;
    opacity: 0.75;
}
.admin-protected-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    white-space: nowrap;
}
.admin-action-btns {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

/* Mise en page deux colonnes */
.admin-two-cols {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 700px) {
    .admin-two-cols {
        grid-template-columns: 1fr;
    }
}
.admin-col-select,
.admin-col-detail {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.admin-col-title {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-coord-card {
    background: #f8fafc;
    border-radius: 7px;
    padding: 10px 12px;
    margin-top: 14px;
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

/* Liste items */
.admin-list-container {
    min-height: 60px;
    margin-bottom: 14px;
    max-height: 280px;
    overflow-y: auto;
}
.admin-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 7px;
    transition: background 0.12s;
}
.admin-list-item:hover {
    background: #f1f5f9;
}
.admin-list-item-label {
    flex: 1;
    font-size: 13.5px;
    color: #1e293b;
}
.admin-list-item-remove {
    flex-shrink: 0;
    padding: 2px 7px !important;
}

/* Ligne d'ajout */
.admin-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}
.admin-add-row .selectize-control {
    flex: 1;
}

/* Panneau de propriétés (sous le tableau) */
.admin-detail-panel {
    margin-top: 16px;
    border: 2px solid #e67e22;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(230,126,34,0.12);
    animation: slideDown 0.18s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.admin-detail-panel-header {
    background: #fff8f0;
    border-bottom: 1px solid #fde8cc;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
.admin-detail-panel-body {
    padding: 16px 18px;
}

/* Badge compteur d'organismes (conservé pour compatibilité) */
.admin-orgs-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: #fff3e0;
    color: #e67e22;
    border: 1px solid #fcd498;
}

/* Liste d'organismes attribués dans le tableau coordinateurs */
.admin-coord-orgs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.admin-coord-org-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: #fff3e0;
    color: #d35400;
    border: 1px solid #fcd498;
    white-space: nowrap;
}

/* Badges actif / inactif */
.admin-active-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.admin-active-badge--on {
    background: #eafaf1;
    color: #1e8449;
    border: 1px solid #a9dfbf;
}
.admin-active-badge--off {
    background: #f9f9f9;
    color: #95a5a6;
    border: 1px solid #d5d8dc;
}

/* Ligne de tableau pour un compte inactif */
.admin-table-row-inactive td {
    opacity: 0.55;
}
.admin-table-row-inactive td:first-child strong {
    text-decoration: line-through;
}

/* Rôles en attente : visuellement inactifs mais non barrés */
.admin-table-row-pending td:first-child strong {
    text-decoration: none;
}

/* Gestion des rôles : désactivés visibles (opacité) mais noms non barrés */
.admin-table-gestion-roles .admin-table-row-inactive td:first-child strong {
    text-decoration: none;
}

/* Coordinateurs, Utilisateurs, Lecteurs : idem (noms non barrés si inactifs) */
.admin-table-coordinateurs .admin-table-row-inactive td:first-child strong,
.admin-table-utilisateurs .admin-table-row-inactive td:first-child strong,
.admin-table-lecteurs .admin-table-row-inactive td:first-child strong {
    text-decoration: none;
}

/* État vide */
.admin-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    gap: 8px;
    text-align: center;
}
.admin-empty-text {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
}