/* ============================================================
   BREAKPOINTS MEDEF54 — convention 3 paliers (avril 2026)
   ============================================================
   - Mobile  : viewport < 768px  (téléphone, tablette portrait)
   - Laptop  : 768px → 1599px    (PC portable 1366×768 → 1920×1080)
   - Desktop : ≥ 1600px          (écran fixe / grand écran pro)

   Le module Prospection a été conçu pour Desktop ≥ 2560px ; cette
   convention vise à le rendre 100 % utilisable en Laptop sans
   dégrader le rendu Desktop.

   Convention d'écriture (mobile-first) :
       .element { ... }                         // base = mobile
       @media (min-width: 768px)  { ... }       // laptop+
       @media (min-width: 1600px) { ... }       // desktop only

   Règle sacrée : aucune règle en dehors d'un @media ne doit modifier
   le rendu au-delà de 1600px sans validation de capture before/after.
   ============================================================ */
:root {
    --bp-mobile-max:   767.98px;
    --bp-laptop-min:   768px;
    --bp-laptop-max:   1599.98px;
    --bp-desktop-min:  1600px;

    /* Exception sub-laptop : NavMenu hamburger (palier hérité). */
    --bp-nav-collapse: 640.98px;
}

/* ========================================
   CARTE LEAFLET
   ======================================== */

.carte-marker-container {
    background: transparent !important;
    border: none !important;
}

.carte-pin {
    width: 20px;
    height: 20px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,.45);
}

.leaflet-popup-content a {
    color: #0078d4;
    text-decoration: none;
}
.leaflet-popup-content a:hover {
    text-decoration: underline;
}

.leaflet-container {
    isolation: isolate;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Empêche le scroll global */
    height: 100vh;
}

/* Anti-flash dark mode : background immédiat avant chargement FluentUI */
html[data-bs-theme="dark"], html[data-bs-theme="dark"] body {
    background-color: #1a1a1a;
}

/* ========================================
   FLUENT MESSAGE BAR — contraste dark mode
   Les MessageBars ont un fond clair (vert, orange, rouge, bleu) :
   le texte doit rester foncé quel que soit le thème.
   Le Shadow DOM nécessite ::part() pour atteindre les éléments internes.
   ======================================== */
fluent-message-bar {
    --neutral-foreground-rest: #1a1a1a;
    color: #1a1a1a;
}

html[data-bs-theme="dark"] fluent-message-bar {
    --neutral-foreground-rest: #1a1a1a !important;
    --foreground-on-accent-rest: #1a1a1a !important;
    color: #1a1a1a !important;
}

html[data-bs-theme="dark"] fluent-message-bar::part(control) {
    color: #1a1a1a !important;
}

html[data-bs-theme="dark"] fluent-message-bar::part(title) {
    color: #1a1a1a !important;
}

html[data-bs-theme="dark"] fluent-message-bar::part(body) {
    color: #1a1a1a !important;
}

html[data-bs-theme="dark"] fluent-message-bar * {
    color: #1a1a1a !important;
}

/* ========================================
   LAYOUT PRINCIPAL FULL-VIEWPORT
   ======================================== */

/* FluentLayout : conteneur principal en flexbox vertical */
fluent-layout {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Header fixe en haut */
fluent-header {
    flex-shrink: 0 !important;
    z-index: 1001;
}

/* Zone principale (nav + content) - prend l'espace restant */
.main {
    flex: 1 1 auto !important;
    min-height: 0 !important; /* Permet le shrink en flexbox */
    overflow: hidden !important;
    display: flex !important;
    width: 100%;
}

/* Menu latéral - hauteur auto dans le conteneur flex */
@media (min-width: 769px) {
    .nav-sidebar {
        height: 100%;
        overflow-y: auto;
        flex-shrink: 0;
        transition: width 0.2s ease;
    }
}

/* Contenu principal - scrolle en interne, se redéploie quand le menu collapse */
.main > fluent-body-content,
.main > .main-content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow-y: auto !important;
    width: 0 !important;
}

/* Footer - reste fixe en bas */
fluent-footer {
    flex-shrink: 0 !important;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Header des pages de liste */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: hidden;
}

.page-header > .stack-horizontal,
.page-header > .stackhorizontal {
    justify-content: flex-end !important;
}

fluent-body-content {
    flex: 1 1 0 !important;
    width: 0 !important;
    max-width: 100% !important;
    padding-right: 20px;
}

fluent-body-content > * {
    width: 100% !important;
    max-width: 100% !important;
}

/* Force FluentStack dans main-content à prendre toute la largeur */
.main-content {
    flex: 1 1 0 !important;
    width: 0 !important;
    max-width: 100% !important;
    min-width: 0; /* Permet le shrink en flexbox */
}

.main-content fluent-stack,
.main-content > fluent-stack {
    width: 100% !important;
    max-width: 100% !important;
}

/* Page d'accueil */
.home-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100vh - 200px);
    padding: 40px 20px;
    text-align: center;
    box-sizing: border-box;
}

.home-logo {
    height: 140px;
    width: auto;
    margin-bottom: 24px;
}

.home-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0;
}

.home-subtitle {
    font-size: 18px;
    color: var(--neutral-foreground-hint);
    margin: 4px 0 0 0;
}

.home-description {
    max-width: 520px;
    margin: 24px 0;
    color: var(--neutral-foreground-rest);
    font-size: 15px;
    line-height: 1.6;
}

.home-features {
    display: flex;
    gap: 24px;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.home-feature {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 24px;
    border-radius: 8px;
    background: var(--neutral-layer-card-container);
    border: 1px solid var(--neutral-stroke-divider-rest);
    min-width: 200px;
    max-width: 240px;
}

.home-feature strong {
    font-size: 15px;
    color: var(--accent-fill-rest);
}

.home-feature span {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* Footer version */
.app-footer-version {
    font-size: 12px !important;
    font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    opacity: 0.6;
    cursor: pointer;
}

a.app-footer-version:hover {
    opacity: 1;
    text-decoration: underline !important;
}

/* Bouton Nouveautés dans le header */
.changelog-badge-link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    opacity: 0.85;
    transition: opacity 0.15s, background 0.15s;
}

.changelog-badge-link:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
}

.changelog-badge-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ef4444;
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 8px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Footer */
.footer {
    margin-top: auto;
}

.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 8px 0;
}

.app-footer span {
    color: var(--neutral-foreground-hint);
    font-size: 15px;
}

.app-footer-logo {
    height: 66px;
    width: auto;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Stepper workflow campagne */
.workflow-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 16px 24px 32px;
    width: 100%;
}
.workflow-step {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    position: relative;
}
.workflow-step:last-child {
    flex: 0;
}
.workflow-step-circle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 1;
    border: 2px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-hint);
}
.workflow-step-circle.done {
    background: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
    color: white;
}
.workflow-step-circle.active {
    border-color: var(--accent-fill-rest);
    color: var(--accent-fill-rest);
    background: var(--neutral-layer-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fill-rest) 25%, transparent);
}
.workflow-step-circle.scheduled {
    border-color: #22c55e;
    color: #22c55e;
    background: var(--neutral-layer-1);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.workflow-step-circle.rejected {
    border-color: #ef4444;
    color: #ef4444;
    background: var(--neutral-layer-1);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.workflow-step-label {
    position: absolute;
    top: 38px;
    left: 16px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
}
.workflow-step-label.active,
.workflow-step-label.done {
    color: var(--neutral-foreground-rest);
    font-weight: 600;
}
.workflow-step-label.scheduled {
    color: #22c55e;
    font-weight: 600;
}
.workflow-step-date {
    position: absolute;
    top: 52px;
    left: 16px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.65rem;
    color: #22c55e;
    font-weight: 600;
}
.workflow-step-label.rejected {
    color: #ef4444;
    font-weight: 600;
}
.workflow-step-line {
    flex: 1;
    height: 2px;
    background: var(--neutral-stroke-rest);
    margin: 0 4px;
}
.workflow-step-line.done {
    background: var(--accent-fill-rest);
}

/* Lignes envoi cliquables */
.envoi-row:hover {
    background-color: var(--neutral-layer-2);
}

/* Bouton Soumettre sur le stepper */
.workflow-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border: none;
    border-radius: 4px;
    background: var(--accent-fill-rest);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.workflow-submit-btn:hover {
    background: var(--accent-fill-hover);
}
.workflow-submit-btn:active {
    background: var(--accent-fill-active);
}
.workflow-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.workflow-reject-btn {
    background: #ef4444;
}
.workflow-reject-btn:hover {
    background: #dc2626;
}
.workflow-reject-btn:active {
    background: #b91c1c;
}
.workflow-neutral-btn {
    background: #6b7280;
}
.workflow-neutral-btn:hover {
    background: #4b5563;
}
.workflow-neutral-btn:active {
    background: #374151;
}
.workflow-archive-btn {
    background: #92400e;
}
.workflow-archive-btn:hover {
    background: #78350f;
}
.workflow-archive-btn:active {
    background: #451a03;
}

/* Lignes cliquables dans les grilles */
.clickable-row {
    cursor: pointer;
}
.clickable-row:hover {
    background-color: var(--neutral-layer-2);
}

/* Désinscriptions déjà consultées : visuellement atténuées */
.desinscription-traitee {
    color: var(--neutral-foreground-hint);
    background-color: var(--neutral-layer-1);
}
.desinscription-traitee td {
    opacity: 0.72;
}
.desinscription-traitee:hover {
    opacity: 1;
    background-color: var(--neutral-layer-2);
}

/* Menu contextuel pour images (clic droit sur vignette bibliothèque) */
.image-context-menu {
    min-width: 240px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: 4px 0;
    font-size: 13px;
}
.image-context-menu-header {
    padding: 6px 12px 8px;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    border-bottom: 1px solid var(--neutral-stroke-rest);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
.image-context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--neutral-foreground-rest);
    font-size: 13px;
    font-family: inherit;
}
.image-context-menu-item:hover {
    background-color: var(--neutral-layer-3);
}
.image-context-menu-separator {
    height: 1px;
    background: var(--neutral-stroke-rest);
    margin: 4px 0;
}

/* TeamsFileExplorer : menu actions fichier */
.file-action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    transition: background-color 0.1s ease;
}
.file-action-item:hover {
    background-color: var(--neutral-fill-stealth-hover);
}
.file-action-danger {
    color: var(--error);
}

/* Upload dialog : zone de drop */
.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    border: 2px dashed var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-2);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    cursor: default;
}
.upload-dropzone-active,
.upload-dropzone:hover {
    border-color: var(--accent-fill-rest);
    background: rgba(0, 120, 212, 0.04);
}
.upload-dropzone-browse {
    display: inline-block;
    padding: 4px 16px;
    border: 1px solid var(--accent-fill-rest);
    border-radius: 4px;
    color: var(--accent-fill-rest);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.upload-dropzone-browse:hover {
    background: rgba(0, 120, 212, 0.08);
}

/* Drop zone drag & drop feedback (grille principale) */
.teams-dropzone {
    position: relative;
    transition: border-color 0.2s ease;
}
.teams-dropzone.drop-active::after {
    content: 'Déposer les fichiers ici';
    position: absolute;
    inset: 0;
    background: rgba(0, 120, 212, 0.08);
    border: 2px dashed var(--accent-fill-rest);
    border-radius: 8px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-fill-rest);
    pointer-events: none;
}

/* Grid rôles : cellules auto-height pour badges multi-lignes */
.roles-grid-autoheight td {
    height: auto !important;
    min-height: 32px;
    overflow: visible !important;
}

/* Coloration rôles actifs/terminés */
.role-actif {
    background-color: #E8F5E9 !important;
}
.role-actif:hover {
    background-color: #C8E6C9 !important;
}
.role-termine {
    background-color: #FFEBEE !important;
}
.role-termine:hover {
    background-color: #FFCDD2 !important;
}

/* Éviter la troncature des textes dans les sous-menus (toujours appliqué) */
fluent-nav-link::part(content),
fluent-nav-group::part(content) {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}

/* Mode compact uniquement — font-size réduit */
.nav-menu-compact fluent-nav-link,
.nav-menu-compact fluent-nav-group {
    font-size: 0.875rem;
}
.nav-menu-compact fluent-nav-group::part(content) {
    font-size: 0.875rem;
}

/* Styles responsive pour les pages d'édition */

/* Header des pages d'édition - empile verticalement sur mobile */
.edit-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .edit-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .edit-page-header > * {
        width: 100%;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 0 12px;
    }
}

/* ResponsiveActions : barre de boutons (desktop) ou menu deroulant (<1024px) */
.responsive-actions {
    display: contents;
}

.responsive-actions-bar {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
}

.responsive-actions-toggle {
    display: none !important;
}

@media (max-width: 1023.98px) {
    .responsive-actions-bar {
        display: none;
    }

    .responsive-actions-toggle {
        display: inline-flex !important;
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    .responsive-actions-toggle {
        align-self: flex-end;
    }
}

/* Groupe de champs responsive */
.responsive-field-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    align-items: end;
}

.responsive-field-group > * {
    min-width: 0;
}

@media (max-width: 768px) {
    .responsive-field-group {
        grid-template-columns: 1fr;
    }
}

/* Variant 2-1-1 pour ligne avec un champ principal large + 2 secondaires
   (ex: Entreprise/Ville/SIRET, Contact/Téléphone/Email).
   Bascule en 1 colonne en mobile (cf règle ci-dessus). */
.responsive-field-group.entreprise-row,
.responsive-field-group.contact-row {
    grid-template-columns: 2fr 1fr 1fr;
}

@media (max-width: 768px) {
    .responsive-field-group.entreprise-row,
    .responsive-field-group.contact-row {
        grid-template-columns: 1fr;
    }
}

/* Groupe de checkboxes responsive */
.responsive-checkbox-group {
    display: flex;
    gap: 24px;
    width: 100%;
    align-items: flex-end;
    flex-wrap: wrap;
}

.responsive-checkbox-group > fluent-checkbox,
.responsive-checkbox-group > .checkbox-item {
    flex: 0 0 auto;
    margin-bottom: 8px;
}

.responsive-checkbox-group > fluent-date-picker,
.responsive-checkbox-group > .date-item {
    flex: 1 1 180px;
    min-width: 0;
}

@media (max-width: 768px) {
    .responsive-checkbox-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .responsive-checkbox-group > fluent-date-picker,
    .responsive-checkbox-group > .date-item {
        width: 100%;
    }
}

/* Groupe de 4 champs - style de base */
.responsive-field-group-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.responsive-field-group-4col > * {
    min-width: 0;
}

.responsive-field-group > * {
    min-width: 0;
}

/* Forcer display: block sur les composants FluentUI dans les grilles */
/* Par défaut FluentUI utilise display: contents qui casse le layout */
.responsive-field-group fluent-text-field,
.responsive-field-group fluent-number-field,
.responsive-field-group fluent-select,
.responsive-field-group fluent-combobox,
.responsive-field-group fluent-autocomplete,
.responsive-field-group-4col fluent-text-field,
.responsive-field-group-4col fluent-number-field,
.responsive-field-group-4col fluent-select,
.responsive-field-group-4col fluent-combobox,
.responsive-field-group-4col fluent-autocomplete {
    display: block !important;
}

@media (max-width: 1024px) {
    .responsive-field-group-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .responsive-field-group-4col {
        grid-template-columns: 1fr;
    }
}

/* Champ forfaitaire : supprimer le liseré, aligner à droite */
/* Utiliser background (shorthand) et non background-color car FluentUI injecte
   un background-image: linear-gradient(white, white) en interne qui passe devant */
fluent-text-field#forfait-montant::part(root) {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
fluent-text-field#forfait-montant::part(control) {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    text-align: right;
}

/* Fond bleu clair pour le champ forfaitaire actif */
fluent-text-field#forfait-montant[data-forfait="active"]::part(root),
fluent-text-field#forfait-montant[data-forfait="active"]::part(control) {
    background: #e6f0fb;
}

/* Réduire l'espacement entre labels et champs FluentUI */
fluent-text-field::part(label),
fluent-number-field::part(label),
fluent-select::part(label),
fluent-combobox::part(label) {
    margin-bottom: 4px;
}

/* ========================================
   RESPONSIVE MOBILE (< 768px)
   ======================================== */

/* Bouton hamburger - visible uniquement sur mobile */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    margin-right: 8px;
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Navigation — le sidebar s'adapte à la largeur du FluentNavMenu */
.nav-sidebar {
    transition: transform 0.3s ease, width 0.3s ease;
    width: fit-content;
}

@media (max-width: 768px) {
    /* Masquer le menu par defaut sur mobile */
    .nav-sidebar {
        position: fixed;
        left: 0;
        top: 50px;
        height: calc(100vh - 50px);
        z-index: 1000;
        background: var(--neutral-layer-1);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
        transform: translateX(-100%);
    }

    .nav-sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Overlay pour fermer le menu */
    .nav-overlay {
        display: none;
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .nav-overlay.visible {
        display: block;
    }

    /* Contenu principal prend toute la largeur */
    .main-content {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Header responsive */
    .header-title {
        font-size: 14px !important;
    }

    .header-title-full {
        display: none;
    }

    .header-title-short {
        display: inline;
    }
}

@media (min-width: 769px) {
    .header-title-full {
        display: inline;
    }

    .header-title-short {
        display: none;
    }

    .nav-overlay {
        display: none !important;
    }
}

/* Table responsive - scroll horizontal */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .table-responsive fluent-data-grid {
        min-width: 600px;
    }
}

/* Cards responsive */
@media (max-width: 768px) {
    fluent-card {
        padding: 12px !important;
    }

    /* Boutons d'action en bas - stack vertical */
    .action-buttons-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .action-buttons-row > * {
        width: 100%;
    }

    /* FluentGrid items - force full width */
    fluent-grid-item {
        width: 100% !important;
    }
}

/* Header de page responsive */
@media (max-width: 768px) {
    .edit-page-header {
        padding: 0 8px;
    }

    .edit-page-header fluent-button {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Dialog rôle: plus large pour Position|Fonction côte à côte */
fluent-dialog.dialog-role::part(control) {
    width: min(850px, 95vw) !important;
    max-width: 850px !important;
    max-height: 95vh !important;
    padding: 16px 24px !important;
}

fluent-dialog.dialog-role .fluent-dialog-header {
    padding-bottom: 12px !important;
}

fluent-dialog.dialog-role .fluent-dialog-footer {
    padding-top: 12px !important;
}

fluent-dialog.dialog-role .fluent-dialog-body {
    overflow-y: visible !important;
}

/* Dialogs standard: max-height et scroll interne */
fluent-dialog:not(.dialog-large)::part(control) {
    max-height: 95vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

fluent-dialog:not(.dialog-large) .fluent-dialog-body {
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Dialog avec dropdown/select : overflow visible pour que le popup dépasse */
fluent-dialog.dialog-dropdown .fluent-dialog-body {
    overflow: visible !important;
}

/* Dialog large: largeur adaptée et scroll interne */
fluent-dialog.dialog-large::part(control) {
    width: min(1100px, 95vw) !important;
    max-width: 95vw !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

fluent-dialog.dialog-large .fluent-dialog-body {
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Dialog Teams Documents: grande taille fixe pour l'explorateur de fichiers
   (dialog Documents Teams sur événement, Pièces jointes Teams sur campagne).
   Cible ::part(control) — le Style inline sur <FluentDialog> ne suffit pas car
   il s'applique au host fluent-dialog, pas au panel interne. */
fluent-dialog.dialog-teams-documents::part(control) {
    width: min(1280px, 95vw) !important;
    max-width: 95vw !important;
    height: min(800px, 92vh) !important;
    max-height: 92vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

fluent-dialog.dialog-teams-documents .fluent-dialog-body {
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Dialog Question Formulaire : largeur intermédiaire pour faciliter la saisie
   de descriptions multi-lignes (cf. memory FluentDialog width).*/
fluent-dialog.dialog-question-formulaire::part(control) {
    width: min(880px, 95vw) !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

fluent-dialog.dialog-question-formulaire .fluent-dialog-body {
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Fix: DatePicker/TimePicker popups coupés dans les FluentTabs */
fluent-tab-panel {
    overflow: visible !important;
}

fluent-tabs {
    overflow: visible !important;
}

/* Dialogs responsive */
@media (max-width: 768px) {
    fluent-dialog {
        min-width: auto !important;
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 0 auto;
    }

    fluent-dialog::part(control) {
        max-height: 90vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    fluent-dialog .fluent-dialog-body {
        max-height: calc(90vh - 120px) !important;
        overflow-y: auto !important;
        flex: 1 !important;
        min-height: 0 !important;
    }

    fluent-dialog .fluent-dialog-footer {
        flex-shrink: 0 !important;
    }

    /* Exception responsive pour dialogs avec dropdown */
    fluent-dialog.dialog-dropdown::part(control) {
        overflow: visible !important;
    }

    fluent-dialog.dialog-dropdown .fluent-dialog-body {
        overflow: visible !important;
        max-height: none !important;
    }
}

/* ========================================
   OPTIMISATION GRANDS ECRANS (4K)
   ======================================== */

/* Base styles for edit forms - mobile first */
.edit-form-4k {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 4px; /* Espace pour les ombres des cards */
}

.edit-form-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.edit-form-4k-full {
    width: 100%;
}

/* Medium screens (≥1024px) */
@media (min-width: 1024px) {
    .edit-form-4k {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 12px;
        align-items: start;
        max-width: 100%;
    }

    .edit-form-4k-full {
        grid-column: span 2;
    }
}

/* Large screens (≥1400px) */
@media (min-width: 1400px) {
    /* Layout en colonnes pour les formulaires d'edition */
    .edit-form-4k {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 12px;
        align-items: start;
        max-width: 100%;
    }

    .edit-form-column {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .edit-form-4k-full {
        grid-column: span 2;
    }

    /* Champs en 3 colonnes sur grands ecrans */
    .responsive-field-group-3col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* ========================================
   EditReunion — Layout 40/60 (Réunion / Communication)
   ======================================== */
.reunion-top-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

.reunion-top-row > .fluent-card,
.reunion-top-row > fluent-card {
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .reunion-top-row {
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: 12px;
        align-items: start;
    }
}


/* ========================================
   RESPONSIVE MOBILE — Colonnes secondaires DataGrid
   ========================================
   Sprint 1 mobile : masquer les colonnes secondaires des FluentDataGrid
   sur smartphones (<768px) pour conserver une lisibilité acceptable.

   Usage :
     1. Ajouter Class="col-hide-mobile" sur les PropertyColumn/TemplateColumn secondaires
     2. Ajouter Class="<page>-grid" sur le FluentDataGrid
     3. Définir l'override grid-template-columns mobile ci-dessous

   Note : le mode sélection (col-select) ajoute une colonne checkbox en début ;
   en mobile l'override ne le gère pas — l'alignement sera approximatif si activé.
*/
@media (max-width: 767.98px) {
    .col-hide-mobile {
        display: none !important;
    }

    /*
     * Les overrides grid-template-columns doivent lister TOUTES les pistes,
     * y compris celles des colonnes masquées (mise à 0px), car FluentDataGrid
     * écrit un style inline sur <table> qui inclut chaque colonne.
     * Sans override complet, les pistes vides occupent de l'espace et repoussent
     * les colonnes visibles hors du viewport.
     *
     * Colonnes masquées (col-hide-mobile) → 0px
     * Colonnes visibles → minmax(min, fr)
     *
     * Note : le mode sélection ajoute 1 colonne checkbox au début — l'override
     * ne couvre pas ce cas (acceptable en Sprint 1, la sélection multi est rare mobile).
     */

    /* ListeMembres : (22%) RaisonSociale | (13%) Enseigne× | (14%) SIRET× | (14%) Ville | (14%) Catégorie× | (14%) Statut | (8%) Contacts× */
    table.membres-grid {
        grid-template-columns:
            minmax(120px, 2fr) 0px 0px minmax(70px, 1fr) 0px minmax(80px, 1fr) 0px
            !important;
    }

    /* ListeAdhesions filtreEnCours : (30%) RaisonSociale | (11%) DateAdhésion | (15%) Processus× | (9%) Type× | (12%) Cotisation× | (13%) StatutCotisation */
    table.adhesions-grid {
        grid-template-columns:
            minmax(110px, 2fr) 100px 0px 0px 0px minmax(80px, 0.8fr)
            !important;
    }

    /* ListePersonnesPhysiques : (5%) Civilité× | (15%) Nom | (20%) Organisation | (20%) Position× | (20%) Email | (12%) Téléphone× | (8%) Rôles× */
    table.pp-grid {
        grid-template-columns:
            0px minmax(90px, 1fr) minmax(100px, 1.3fr) 0px minmax(120px, 1.4fr) 0px 0px
            !important;
    }

    /* ListeEvenements : (20%) Titre | (10%) Type× | (16%) Statut× | (14%) Date | (10%) Lieu× | (10%) Catégorie× | (10%) Thématique× | (9%) Inscrits | (8%) Présents× */
    table.evenements-grid {
        grid-template-columns:
            minmax(110px, 2fr) 0px 0px minmax(75px, 0.9fr) 0px 0px 0px minmax(50px, 0.5fr) 0px
            !important;
    }

    /* ListeLieux : (22%) Nom | (16%) Type | (20%) Contact× | (20%) Adresse× | (8%) Événements */
    table.lieux-grid {
        grid-template-columns:
            minmax(120px, 2fr) minmax(80px, 1fr) 0px 0px minmax(50px, 0.6fr)
            !important;
    }

    /* ListePrestataires : (22%) Entreprise | (12%) Type | (14%) Contact× | (18%) Email× | (12%) Téléphone× | (10%) Événements */
    table.prestataires-grid {
        grid-template-columns:
            minmax(120px, 2fr) minmax(80px, 1fr) 0px 0px 0px minmax(50px, 0.6fr)
            !important;
    }

    /* ListeGroupesTravail : (30%) Nom | (50%) Description | (10%) Membres | (10%) Teams× */
    table.groupes-travail-grid {
        grid-template-columns:
            minmax(110px, 1.5fr) minmax(120px, 2.5fr) minmax(50px, 0.6fr) 0px
            !important;
    }

    /* Requetes : (22%) Nom | (16%) Usages | (10%) Cible | (10%) Canal× | (10%) Résultats | (10%) Campagnes× | (12%) Créée× | (8%) Statut× */
    table.requetes-grid {
        grid-template-columns:
            minmax(110px, 2fr) minmax(80px, 1.4fr) minmax(60px, 0.8fr) 0px minmax(50px, 0.6fr) 0px 0px 0px
            !important;
    }

    /* Listes : (22%) Nom | (12%) Usage | (12%) Cible× | (12%) Canal× | (12%) Destinataires | (10%) Campagnes× | (12%) Créée× | (8%) Statut× */
    table.listes-grid {
        grid-template-columns:
            minmax(110px, 2fr) minmax(70px, 1fr) 0px 0px minmax(70px, 1fr) 0px 0px 0px
            !important;
    }

    /* Campagnes : (18%) Nom | (8%) Canal | (12%) Statut | (16%) Liste× | (16%) Template× | (8%) Dest× | (12%) Envois | (10%) Créé× */
    table.campagnes-grid {
        grid-template-columns:
            minmax(100px, 2fr) minmax(50px, 0.7fr) minmax(70px, 1fr) 0px 0px 0px minmax(70px, 1fr) 0px
            !important;
    }

    /* Désinscriptions : Traitée(80) | Date×(160) | Personne | Entreprise | Campagne× | Canal×(90) | Destinataire× | RGPD(140) */
    table.desinscriptions-grid {
        grid-template-columns:
            60px 0px minmax(90px, 1.5fr) minmax(90px, 1.5fr) 0px 0px 0px minmax(80px, 1fr)
            !important;
    }

    /* Paiements : (25%) RaisonSociale | (10%) Date | (11%) Type | (7%) Année× | (16%) N°× | (11%) Modalité× | (13%) Montant */
    table.paiements-grid {
        grid-template-columns:
            minmax(110px, 2fr) minmax(80px, 1fr) minmax(70px, 0.9fr) 0px 0px 0px minmax(70px, 1fr)
            !important;
    }

    /* Mandats : (22%) Organisme× | (20%) Titre | (13%) Pôle | (10%) Échelon× | (10%) Titulaires | (10%) Suppléants | (10%) Fin prév× */
    table.mandats-grid {
        grid-template-columns:
            0px minmax(110px, 2fr) minmax(70px, 1fr) 0px minmax(50px, 0.6fr) minmax(50px, 0.6fr) 0px
            !important;
    }

    /* Mandataires : (18%) Nom | (18%) Prénom | (22%) Email× | (10%) Mandats actifs | (32%) Pôles */
    table.mandataires-grid {
        grid-template-columns:
            minmax(80px, 1fr) minmax(80px, 1fr) 0px minmax(50px, 0.5fr) minmax(100px, 1.6fr)
            !important;
    }

    /* ListeCotisations : (30%) RaisonSociale | (10%) Année× | (12%) Type× | (18%) Montant | (25%) Situation */
    table.cotisations-grid {
        grid-template-columns:
            minmax(130px, 2fr) 0px 0px minmax(70px, 0.8fr) minmax(90px, 1fr)
            !important;
    }
}


/* ========================================
   RESPONSIVE MOBILE — Sprint 2
   Sidebar + paddings + densité supercompact
   ========================================
   Ces règles s'appliquent à tous les viewports <768px quelle que soit
   la densité configurée par l'utilisateur en base de données.
   La densité BDD reste inchangée — seule l'apparence mobile est compactée.
*/
@media (max-width: 767.98px) {

    /* --- Sidebar : 320px → 260px (gain de 60px de contenu visible) ---
       FluentNavMenu pose sa largeur via CSS var. On contraint le conteneur
       et le web component directement. */
    .nav-sidebar {
        width: 260px !important;
        max-width: 80vw !important;
        overflow-x: hidden;
    }
    .nav-sidebar fluent-nav-menu {
        width: 260px !important;
        max-width: 260px !important;
    }

    /* --- Paddings réduits : 20px → 10px sur .content et .page-header --- */
    .content {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 0.6rem !important;
        font-size: 13px !important;
    }
    .page-header {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 6px !important;
    }

    /* --- Densité auto supercompact sur mobile --- */
    .list-page-container {
        gap: 8px !important;
    }
    .responsive-field-group {
        gap: 8px !important;
    }
    .list-page-card-content {
        gap: 6px !important;
    }
    .list-page-footer {
        padding-top: 6px !important;
        gap: 4px !important;
    }
    .list-page-grid-container fluent-data-grid-row {
        min-height: 24px !important;
        height: 24px !important;
    }
    .list-page-grid-container fluent-data-grid-cell {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        font-size: 13px !important;
    }
    fluent-card::part(control) {
        padding: 12px !important;
    }
}


/* ========================================
   CODE NAF - Troncature du texte long
   ======================================== */

/* Conteneur du Code NAF - forcer la largeur max */
.code-naf-truncate {
    min-width: 0;
    overflow: hidden;
}

/* Limiter la largeur du composant autocomplete */
.code-naf-truncate fluent-autocomplete {
    width: 100%;
    max-width: 100%;
}

/* Cibler le conteneur des options sélectionnées */
.code-naf-truncate fluent-autocomplete::part(selected-options),
.code-naf-truncate fluent-autocomplete [part="selected-options"] {
    max-width: 100%;
    overflow: hidden;
}

/* Le tag/badge sélectionné dans le FluentAutocomplete */
.code-naf-truncate fluent-badge,
.code-naf-truncate [class*="badge"],
.code-naf-truncate [class*="tag"],
.code-naf-truncate [class*="chip"] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* Texte à l'intérieur du tag */
.code-naf-truncate fluent-badge span,
.code-naf-truncate fluent-badge div {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* ========================================
   FLUENT SELECT - STABILISATION DROPDOWN
   ======================================== */

/* S'assurer que les dropdowns FluentSelect s'affichent correctement */
.responsive-field-group fluent-select,
.responsive-field-group fluent-combobox {
    position: relative;
}

/* Le listbox du FluentSelect doit utiliser position fixed pour éviter les problèmes de overflow */
fluent-select::part(listbox),
fluent-combobox::part(listbox) {
    z-index: 9999;
    /* Borner la hauteur quand la liste est très longue (templates, contacts, etc.)
       sinon le popup déborde du viewport et le premier item se retrouve sous la barre
       de titre du navigateur. Le scroll interne prend le relais. */
    max-height: min(360px, 60vh) !important;
    overflow-y: auto !important;
}

/* Carte des adhérents : filtres en <select> HTML natifs (issue #22 — FluentSelect popup
   ignorait position="below" dans .list-page-container et s'ouvrait masqué par le header) */
.carte-filtre {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.carte-filtre label {
    font-size: 12px;
    color: var(--neutral-foreground-rest);
    line-height: 1;
}

.carte-filtre-select {
    height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--neutral-stroke-rest, #ccc);
    border-radius: 4px;
    background: var(--neutral-fill-input-rest, #fff);
    color: var(--neutral-foreground-rest);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}

.carte-filtre-select:focus {
    outline: 2px solid var(--accent-fill-rest, #0078d4);
    outline-offset: -2px;
}

/* Civilité (M./Mme/Dr/Me/Pr) — colonne étroite : forcer le composant FluentSelect à
   respecter la width du wrapper (sans cela, min-width interne ~180px → débord sur Prénom). */
fluent-select.civilite-select,
fluent-select.civilite-select::part(control) {
    min-width: 0 !important;
    width: 100% !important;
}

/* Convention collective - conteneur large pour les longs libellés */
.code-naf-large {
    min-width: 0;
    width: 100%;
}

.code-naf-large fluent-autocomplete {
    width: 100%;
}

/* Date fields side by side - fix for FluentDatePicker display:contents behavior */
.date-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.date-fields-row fluent-date-picker {
    display: block !important;
}

/* Diff rows for bulk operations */
.diff-row {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.diff-row-added {
    background-color: rgba(34, 197, 94, 0.1);
    border-left: 3px solid #22c55e;
}

.diff-row-removed {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
    text-decoration: line-through;
    opacity: 0.8;
}

.diff-row-unchanged {
    opacity: 0.6;
}

.diff-icon {
    font-weight: bold;
    width: 20px;
    text-align: center;
}

.diff-row-added .diff-icon {
    color: #22c55e;
}

.diff-row-removed .diff-icon {
    color: #ef4444;
}

.diff-row-unchanged .diff-icon {
    color: var(--neutral-foreground-hint);
}

.diff-name {
    font-weight: 600;
    min-width: 200px;
}

.diff-detail {
    color: var(--neutral-foreground-hint);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   Monaco Editor - BlazorMonaco Styles
   ============================================ */

/* Container wrapper for Monaco */
.monaco-container {
    width: 100%;
    height: 398px; /* Fixed height in pixels */
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    overflow: hidden;
}

/* BlazorMonaco - dimensions du conteneur */
/* La navigation vers cette page utilise forceLoad:true pour éviter les problèmes d'enhanced navigation */
/* AutomaticLayout=true gère le redimensionnement, mais le conteneur a besoin de dimensions initiales */
/* et de position:relative car Monaco utilise position:absolute en interne */
#template-html-editor,
.template-monaco-editor {
    width: 100% !important;
    height: 50vh !important;
    position: relative !important;
}

#contrat-html-editor,
.contrat-monaco-editor {
    width: 100% !important;
    height: 50vh !important;
    position: relative !important;
}

#template-document-editor,
.template-document-monaco-editor {
    width: 100% !important;
    height: 50vh !important;
    position: relative !important;
}

#pageweb-html-editor,
.pageweb-monaco-editor,
.tpw-monaco-fill {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

/* Contraindre les images dans l'éditeur Radzen des templates pages web */
.tpw-editor-content .rz-html-editor-content img {
    max-width: 100%;
    height: auto;
}

/* FluentTextArea : forcer le textarea interne (shadow DOM) à remplir l'espace flex */
.stretch-textarea::part(control) {
    flex: 1;
}

/* FluentTextArea : forcer le host (inline par défaut) en block + textarea interne 100% */
.fulltextarea {
    display: block !important;
    width: 100% !important;
}

.fulltextarea::part(control) {
    width: 100%;
    box-sizing: border-box;
}

/* ============================================
   Suivi Communication Événement
   ============================================ */

/* Pastilles compactes de statut d'envoi */
.suivi-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.suivi-dot-delivre { background-color: #22c55e; }
.suivi-dot-ouvert { background-color: #3b82f6; }
.suivi-dot-clique { background-color: #8b5cf6; }
.suivi-dot-bounce { background-color: #ef4444; }
.suivi-dot-erreur { background-color: #dc2626; }
.suivi-dot-envoye { background-color: #f59e0b; }
.suivi-dot-planifie { background-color: #9ca3af; }

/* Ligne de cartes stats */
.suivi-stats-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.suivi-stat-card {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
    background: var(--neutral-layer-card-container);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
}

.suivi-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.suivi-stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.suivi-stat-detail {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

.suivi-stat-date {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}

.suivi-liste-card {
    margin-left: auto;
    background: var(--neutral-layer-card-container);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 140px;
    max-width: 280px;
}

/* Légende */
.suivi-legende {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    padding: 8px 0;
}

.suivi-legende .suivi-dot {
    width: 18px;
    height: 18px;
    font-size: 9px;
    margin-right: 2px;
}

@media (max-width: 768px) {
    .suivi-stat-card {
        min-width: 90px;
        padding: 8px 10px;
    }

    .suivi-stat-value {
        font-size: 18px;
    }
}

/* ===========================================
   PagePubliqueLayout — pages web publiques
   =========================================== */

/* Fond sombre par défaut sur les pages publiques (inscription, adhésion) */
html:has(.page-publique-layout),
html:has(.page-publique-layout) body {
    background: #0b1026 !important;
    color: #ffffff !important;
}

.page-publique-layout {
    min-height: 100vh;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    color: #ffffff;
    --neutral-foreground-rest: #ffffff;
    --neutral-foreground-hint: rgba(255, 255, 255, 0.7);
    --accent-foreground-rest: #60cdff;
    --neutral-stroke-rest: rgba(255, 255, 255, 0.3);
}

.page-publique-layout img {
    max-width: 100%;
    height: auto;
}

.page-publique-iframe {
    width: 100%;
    border: none;
    overflow: hidden;
    min-height: 200px;
    border-radius: 8px;
}

/* FluentDesignTheme Dark gère les couleurs des composants FluentUI automatiquement.
   On ne conserve que les overrides structurels nécessaires. */

/* FluentCards transparentes pour laisser voir le fond sombre de la page */
.page-publique-layout fluent-card {
    background: transparent !important;
}

.page-publique-layout fluent-card .stack-vertical {
    align-items: stretch !important;
    width: 100%;
}

/* Alertes pages publiques — remplace FluentMessageBar (Shadow DOM illisible sur fond sombre) */
.public-alert {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 700px;
    margin: 0 auto 8px;
}

.public-alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.public-alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.public-alert-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.public-alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ========================== */
/* Dashboard personnalisable  */
/* ========================== */

/* Grille du dashboard */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px;
    gap: 16px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

@media (max-width: 600px) {
    .dashboard-grid {
        padding: 8px;
        gap: 10px;
    }
}

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Largeurs de widgets */
.dashboard-widget.largeur-1 { grid-column: span 1; }
.dashboard-widget.largeur-2 { grid-column: span 2; }
.dashboard-widget.largeur-3 { grid-column: span 3; }
.dashboard-widget.largeur-4 { grid-column: span 4; }

/* Hauteurs de widgets (multiples de la hauteur KPI 160px) */
.dashboard-widget.hauteur-1 { grid-row: span 1; }
.dashboard-widget.hauteur-2 { grid-row: span 2; }
.dashboard-widget.hauteur-3 { grid-row: span 3; }
.dashboard-widget.hauteur-4 { grid-row: span 4; }

.dashboard-widget.hauteur-2 > .liste-widget,
.dashboard-widget.hauteur-3 > .liste-widget,
.dashboard-widget.hauteur-4 > .liste-widget {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-widget.hauteur-2 > .liste-widget > .liste-widget-items,
.dashboard-widget.hauteur-3 > .liste-widget > .liste-widget-items,
.dashboard-widget.hauteur-4 > .liste-widget > .liste-widget-items {
    flex: 1;
    overflow-y: auto;
}

@media (max-width: 900px) {
    .dashboard-widget.largeur-2,
    .dashboard-widget.largeur-3,
    .dashboard-widget.largeur-4 {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .dashboard-widget.largeur-1,
    .dashboard-widget.largeur-2,
    .dashboard-widget.largeur-3,
    .dashboard-widget.largeur-4 {
        grid-column: span 1;
    }
}

/* KPI Card */
.kpi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--neutral-layer-card-container);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    text-align: center;
    height: 160px;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.kpi-year-nav {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 1;
}

.kpi-year-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    min-width: 32px;
    text-align: center;
}

.kpi-card-clickable {
    cursor: pointer;
}

.kpi-card-clickable:hover {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.kpi-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.kpi-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
}

.kpi-title {
    font-size: 14px;
    color: var(--neutral-foreground-hint);
    font-weight: 500;
}

.kpi-subtitle {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-top: 4px;
}

/* KPI Strip — bande de KPI facturation (Cotisations, Paiements) */
.kpi-strip {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    margin-bottom: 10px;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    max-width: 1400px;
}
.kpi-strip .kpi-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.kpi-strip .kpi-group > div {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}
.kpi-strip .kpi-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5px 10px;
    border-radius: 6px;
    min-width: 90px;
    flex: 1;
    border: 1px solid transparent;
    text-align: left;
    align-items: flex-start;
    position: static;
    transition: none;
    box-shadow: none;
    height: auto;
}
.kpi-strip .kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    margin-bottom: 1px;
    white-space: nowrap;
}
.kpi-strip .kpi-value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
}
.kpi-strip .kpi-sub {
    font-size: 11px;
    margin-top: 1px;
    opacity: 0.85;
}
.kpi-strip .kpi-card--green    { background: #f0fdf4; border-color: #86efac; color: #166534; }
.kpi-strip .kpi-card--neutral  { background: var(--neutral-layer-2); border-color: var(--neutral-stroke-rest); color: var(--neutral-foreground-rest); }
.kpi-strip .kpi-card--blue     { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.kpi-strip .kpi-card--indigo   { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.kpi-strip .kpi-card--slate    { background: var(--neutral-layer-3); border-color: var(--neutral-stroke-rest); color: var(--neutral-foreground-rest); opacity: 0.85; }
.kpi-strip .kpi-card--amber    { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.kpi-strip .kpi-card--avoir    { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.kpi-strip .kpi-card--emerald  { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.kpi-strip .kpi-separator {
    width: 1px;
    background: var(--neutral-stroke-rest);
    align-self: stretch;
    margin: 0 4px;
}
.kpi-strip .kpi-group-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    padding-left: 2px;
}

/* Widget Liste */
.liste-widget {
    background: var(--neutral-layer-card-container);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    overflow: hidden;
}

.liste-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 10px;
}

.liste-widget-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.liste-widget-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
}

.liste-widget-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.liste-widget-voir-tout {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-fill-rest);
    cursor: pointer;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.liste-widget-voir-tout:hover {
    background: color-mix(in srgb, var(--accent-fill-rest) 8%, transparent);
}

.liste-widget-items {
    display: flex;
    flex-direction: column;
    padding: 0 8px 8px;
}

.liste-widget-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s, box-shadow 0.15s;
    gap: 12px;
}

.liste-widget-item:hover {
    background-color: var(--neutral-layer-2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.liste-widget-item + .liste-widget-item {
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.liste-widget-item:hover + .liste-widget-item,
.liste-widget-item + .liste-widget-item:hover {
    border-top-color: transparent;
}

/* Date block (calendrier) */
.liste-widget-date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent);
    flex-shrink: 0;
}

.liste-widget-date-day {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--accent-fill-rest);
}

.liste-widget-date-month {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--accent-fill-rest);
    opacity: 0.75;
    letter-spacing: 0.3px;
}

.liste-widget-item-content {
    flex: 1;
    min-width: 0;
}

.liste-widget-item-titre {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.liste-widget-item-soustitre {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.liste-widget-item-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 12px;
    background: var(--neutral-layer-2);
    white-space: nowrap;
}

/* État vide */
.liste-widget-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    color: var(--neutral-foreground-hint);
    font-size: 13px;
}

/* Widget Pipeline */
.pipeline-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 8px;
    padding: 16px 8px;
    min-height: 180px;
}

.pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    flex: 1;
    max-width: 80px;
}

.pipeline-stage:hover .pipeline-bar-fill {
    opacity: 0.8;
}

.pipeline-count {
    margin-bottom: 8px;
}

.pipeline-count .badge {
    font-size: 14px;
    padding: 4px 8px;
}

.pipeline-label {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-bottom: 8px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pipeline-bar {
    width: 100%;
    height: 80px;
    background: var(--neutral-layer-2);
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.pipeline-bar-fill {
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
    min-height: 4px;
}

.pipeline-arrow {
    display: flex;
    align-items: center;
    color: var(--neutral-foreground-hint);
    font-size: 12px;
    margin: 0 -4px;
}

/* Configurateur de dashboard */
.widget-catalog {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-height: 250px;
    overflow-y: auto;
    padding: 4px;
}

.widget-catalog-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.widget-catalog-item:hover {
    border-color: var(--accent-fill-rest);
}

.widget-catalog-item.selected {
    border-color: var(--accent-fill-rest);
    background-color: var(--accent-fill-subtle);
}

.widget-catalog-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-catalog-item-libelle {
    font-weight: 500;
    font-size: 14px;
}

.widget-catalog-item-module {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    padding: 2px 6px;
    background: var(--neutral-layer-2);
    border-radius: 4px;
}

.widget-catalog-item-description {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* Liste des widgets configurés */
.configured-widgets-list {
    max-height: 320px;
    overflow-y: auto;
}

.configured-widget-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    background: var(--neutral-layer-card-container);
}

.configured-widget-item-content {
    flex: 1;
    min-width: 0;
}

.configured-widget-item-actions {
    display: flex;
    gap: 4px;
}

.configured-widget-params {
    margin-top: 4px;
}

/* Dashboard vide */
.dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.dashboard-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* ========================================
   LAYOUT FULL-VIEWPORT (Pages de liste)
   Permet aux pages de tenir sur l'écran
   sans scroll global (footer toujours visible)
   ======================================== */

/* Conteneur principal qui remplit toute la hauteur disponible */
.list-page-container {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espacement entre header, card recherche et card liste */
    height: calc(100vh - 160px); /* viewport - header(50px) - footer(90px) - padding(20px) */
    min-height: 400px;
    width: 100%;
}

/* Card qui contient la grille - prend tout l'espace restant */
.list-page-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Crucial pour permettre le shrink en flexbox */
    overflow: hidden;
}

/* Wrapper du contenu de la card */
.list-page-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 10px;
}

/* Zone de filtres - hauteur fixe */
.list-page-filters {
    flex-shrink: 0;
}

/* Conteneur de la grille - prend l'espace restant et scrolle en interne */
.list-page-grid-container {
    flex: 1;
    min-height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* La grille elle-même - largeur fixée, pas de scroll horizontal */
.list-page-grid-container fluent-data-grid,
.list-page-grid-container .fluent-data-grid {
    flex: 1;
    min-height: 0;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Fix: FluentDataGrid met grid-template-rows: auto 1fr par défaut, ce qui fait
       que la première ligne de données prend tout l'espace restant. On force auto. */
    grid-template-rows: auto !important;
    /* Fix: garder les lignes en haut quand il y en a peu */
    align-content: start !important;
}

/* Forcer les colonnes à ne pas dépasser */
.list-page-grid-container fluent-data-grid-row,
.list-page-grid-container fluent-data-grid-cell {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Footer de la liste (pagination + compteur) - hauteur fixe */
.list-page-footer {
    flex-shrink: 0;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Version compacte pour écrans plus petits */
@media (max-height: 800px) {
    .list-page-container {
        height: calc(100vh - 140px);
    }
}

/* Version plus haute pour grands écrans */
@media (min-height: 1080px) {
    .list-page-container {
        height: calc(100vh - 180px);
    }
}

/* Mobile - permettre le scroll global */
@media (max-width: 768px) {
    .list-page-container {
        height: auto;
        min-height: auto;
    }

    .list-page-card {
        overflow: visible;
    }

    .list-page-grid-container {
        overflow: visible;
        max-height: 60vh;
    }
}

/* Fix pour FluentDataGrid avec AutoItemsPerPage */
.list-page-grid-container[data-auto-height="true"] {
    overflow-y: hidden;
}

/* Ensure FluentCard padding doesn't affect layout calculations */
.list-page-card fluent-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Bordures renforcees sur les cards de liste (recherche + resultats) */
.list-page-container fluent-card {
    border: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Style pour le wrapper de grille avec ID (pour JS) */
[id^="grid-container-"] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ============================================
   EDIT LISTE - Layout full-viewport
   Card Paramétrage fixe + Card Membres extensible
   ============================================ */
.edit-liste-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px);
    min-height: 400px;
    width: 100%;
    gap: 12px;
}

/* Wrapper div pour contrôler le flex (fluent-card a des styles internes) */
.edit-liste-membres-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.edit-liste-membres-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.edit-liste-membres-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 10px;
}

.edit-liste-grid-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Neutraliser position:sticky sur les TH (inline style du FluentDataGrid)
   qui gonfle artificiellement le scrollHeight du conteneur */
.edit-liste-grid-container th {
    position: static !important;
}

/* Card Membres réduite (toggle collapse, usage abonnement) */
.edit-liste-membres-wrapper.collapsed {
    flex: 0 0 auto;
}

/* Card Rôles non inscrits (usage abonnement) — hauteur naturelle */
.edit-liste-roles-wrapper {
    flex: 0 0 auto;
}

/* Mode abonnement : hauteur illimitée, le scroll se fait au niveau de la page */
.edit-liste-container.abonnement {
    height: auto;
    min-height: unset;
}

.edit-liste-container.abonnement .edit-liste-membres-wrapper {
    flex: 0 0 auto;
}

.edit-liste-container.abonnement .edit-liste-membres-card {
    flex: unset !important;
    min-height: unset !important;
    overflow: visible !important;
}

.edit-liste-container.abonnement .edit-liste-membres-content {
    flex: unset;
    min-height: unset;
}

.edit-liste-container.abonnement .edit-liste-grid-container {
    flex: unset;
    min-height: unset;
    overflow-y: visible;
}

/* Badge orange "N manquant(s)" dans le header de colonne */
.edit-liste-manquant-badge {
    cursor: pointer;
    background: transparent;
    color: #f59e0b;
    border: 1px solid #f59e0b;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    user-select: none;
}

.edit-liste-manquant-badge:hover {
    background: rgba(245, 158, 11, 0.15);
}

.edit-liste-manquant-badge.active {
    background: #f59e0b;
    color: white;
}

@media (max-height: 800px) {
    .edit-liste-container {
        height: calc(100vh - 140px);
    }
}

@media (min-height: 1080px) {
    .edit-liste-container {
        height: calc(100vh - 180px);
    }
}

@media (max-width: 768px) {
    .edit-liste-container {
        height: auto;
        min-height: auto;
    }

    .edit-liste-membres-card {
        overflow: visible;
    }

    .edit-liste-grid-container {
        overflow-y: visible;
        max-height: 60vh;
    }
}

/* FluentAutocomplete multi-select : forcer le wrap des chips dans les dialogs */
.autocomplete-wrap fluent-autocomplete {
    width: 100%;
    max-width: 100%;
}

.autocomplete-wrap fluent-autocomplete::part(listbox) {
    max-height: 200px;
}

.autocomplete-wrap fluent-autocomplete::part(selected-options) {
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
}

/* FluentAutocomplete — affichage "champ texte" sans badge/croix */
.autocomplete-flat fluent-badge {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: inherit;
    color: var(--neutral-foreground-rest);
}

.autocomplete-flat fluent-badge::part(control) {
    background: transparent !important;
    padding: 0 !important;
    color: var(--neutral-foreground-rest) !important;
}

/* Masquer la croix "Remove" dans le badge (SVG inline) */
.autocomplete-flat fluent-badge svg[role="button"] {
    display: none !important;
}

/* Masquer le bouton "Clear" du champ (SVG avec slot=end) */
.autocomplete-flat svg[slot="end"],
.autocomplete-flat fluent-text-field svg[role="button"][slot="end"] {
    display: none !important;
}

/* FluentDataGrid — colonne de sélection (checkboxes) en mode sélection.
   Cacher le bouton "3 points" (col-options) et permettre l'affichage complet de la checkbox. */
.col-select .col-header-cell-text {
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-select .col-options-button {
    display: none !important;
}
.col-select {
    overflow: visible !important;
}

/* Banner "sélectionner toutes les pages" (style Gmail) */
.select-all-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    font-size: 13px;
    color: #1e40af;
    flex-shrink: 0;
    margin-bottom: 4px;
}
.select-all-banner-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: underline;
    font-size: 13px;
}
.select-all-banner-link:hover {
    color: #1e3a8a;
}
.select-all-banner-link:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Touche clavier dans la card de raccourcis (mode revue cotisation) */
.revue-kbd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--neutral-layer-card-container);
    border: 1px solid var(--neutral-stroke-rest);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

/* ========================================
   RADZEN SCHEDULER — intégration thème FluentUI
   Page : /evenements (vue Agenda)
   ======================================== */

.rz-scheduler {
    font-family: var(--body-font);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

.rz-scheduler-toolbar {
    background: var(--neutral-layer-2);
    border-bottom: 1px solid var(--neutral-stroke-rest);
    padding: 6px 10px;
    gap: 6px;
}

.rz-scheduler-toolbar .rz-button {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s;
}

.rz-scheduler-toolbar .rz-button:hover {
    background: var(--accent-fill-hover);
}

.rz-scheduler-toolbar .rz-button.rz-button-secondary,
.rz-scheduler-toolbar .rz-button[class*="outline"] {
    background: transparent;
    color: var(--neutral-foreground-rest);
    border: 1px solid var(--neutral-stroke-rest);
}

.rz-scheduler-toolbar .rz-button.rz-state-active {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
}

/* En-têtes de jours/heures */
.rz-scheduler .rz-slot-header,
.rz-scheduler .rz-day-slot-header {
    background: var(--neutral-layer-2);
    border-color: var(--neutral-stroke-rest);
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* Cellules de la grille */
.rz-scheduler .rz-slot {
    border-color: var(--neutral-stroke-rest);
}

/* Jour actuel mis en évidence */
.rz-scheduler .rz-today {
    background: color-mix(in srgb, var(--accent-fill-rest) 8%, transparent);
}

/* Événements dans la vue mois */
.rz-event-content {
    font-size: 11px !important;
    padding: 1px 4px !important;
    line-height: 1.3;
}

/* Template personnalisé des événements */
.evenement-appointment {
    display: flex;
    align-items: center;
    gap: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 500;
}

.appointment-inscrits {
    font-size: 10px;
    opacity: 0.85;
    flex-shrink: 0;
}

/* ============================================
   Calendrier unifié — Toggles types
   ============================================ */

.calendrier-type-toggles {
    display: flex;
    gap: 6px;
    align-items: center;
}

.calendrier-type-toggle {
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.85em;
    border: 1px solid var(--neutral-stroke-rest);
    background: transparent;
    color: var(--neutral-foreground-rest);
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.calendrier-type-toggle:hover {
    background: var(--neutral-layer-2);
}

.calendrier-type-toggle-evenements.calendrier-type-toggle-active {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
    font-weight: 600;
}

.calendrier-type-toggle-reunions.calendrier-type-toggle-active {
    background: #0d9488;
    color: white;
    border-color: #0d9488;
    font-weight: 600;
}

/* Boutons bascule calendrier/liste */
.view-toggle-btn {
    cursor: pointer;
    padding: 5px 12px;
    font-size: 0.85em;
    border: none;
    background: transparent;
    color: var(--neutral-foreground-rest);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.1s;
}

.view-toggle-btn:hover {
    background: var(--neutral-layer-2);
}

.view-toggle-btn-active {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    font-weight: 600;
}

.view-toggle-btn-active:hover {
    background: var(--accent-fill-hover);
}

/* Colonne barre de couleur dans la vue liste calendrier */
.col-color-bar {
    padding: 0 !important;
    width: 6px !important;
    min-width: 6px !important;
    overflow: visible !important;
}

.col-color-bar .col-options-button { display: none !important; }

/* ============================================
   Module Signalement (bugs & améliorations)
   ============================================ */

.signalement-badge-btn {
    position: relative;
    display: inline-flex;
}

.signalement-badge-inner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    opacity: 0.85;
    transition: opacity 0.15s, background 0.15s;
    padding: 0;
}

.signalement-badge-inner-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
}

.signalement-badge-count {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--error);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1;
    z-index: 1;
}

.signalement-capture-preview {
    max-width: 100%;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
}

/* Dialog signalement — scroll interne pour petits écrans */
fluent-dialog.dialog-signalement::part(control) {
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
}

fluent-dialog.dialog-signalement .fluent-dialog-body {
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
}

fluent-dialog.dialog-signalement .fluent-dialog-footer {
    flex-shrink: 0 !important;
}

/* Badges statut cliquables dans la grille signalements */
.statut-badge-clickable {
    cursor: pointer;
    transition: opacity 0.15s;
    display: inline-block;
}

.statut-badge-clickable:hover {
    opacity: 0.8;
}

.statut-popover-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

/* ============================================
   Toggle Dark/Light Mode - Bouton dans le header
   ============================================ */

.theme-toggle-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.85;
    transition: opacity 0.15s, background 0.15s;
    padding: 0;
}

.theme-toggle-badge:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
}

/* ============================================
   DARK MODE - Overrides CSS personnalisés
   ============================================ */

/* Liens */
[data-bs-theme="dark"] a,
[data-bs-theme="dark"] .btn-link {
    color: #60a5fa;
}

[data-bs-theme="dark"] a:hover,
[data-bs-theme="dark"] .btn-link:hover {
    color: #93c5fd;
}

/* Radzen Scheduler */
[data-bs-theme="dark"] .rz-scheduler {
    background-color: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

[data-bs-theme="dark"] .rz-scheduler .rz-scheduler-toolbar,
[data-bs-theme="dark"] .rz-scheduler .rz-scheduler-body {
    background-color: var(--neutral-layer-1);
    border-color: var(--neutral-stroke-rest);
    color: var(--neutral-foreground-rest);
}

[data-bs-theme="dark"] .rz-scheduler .rz-event-content {
    background-color: var(--accent-fill-rest);
}

[data-bs-theme="dark"] .rz-scheduler .rz-slot-header,
[data-bs-theme="dark"] .rz-scheduler .rz-resource-header {
    background-color: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    border-color: var(--neutral-stroke-rest);
}

[data-bs-theme="dark"] .rz-scheduler td,
[data-bs-theme="dark"] .rz-scheduler th {
    border-color: var(--neutral-stroke-rest);
}

/* ========================================
   TEMPLATE PREVIEW — Aperçu de l'email rendu
   Le contenu reste sur fond blanc (l'email est conçu pour fond blanc),
   mais l'encadrement et le contraste s'adaptent au thème.
   ======================================== */
.template-preview-frame,
.template-preview-html {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    overflow-y: auto;
    background-color: #f4f4f4;
}

.template-preview-frame {
    padding: 0;
}

.template-preview-html {
    /* Pas de padding : l'iframe à l'intérieur est en width:100% avec son propre padding
       via le wrapper HTML5, ce qui donne un rendu fidèle sans marge externe double. */
    padding: 0;
    background-color: white;
    color: #1a1a1a;
}

[data-bs-theme="dark"] .template-preview-frame {
    background-color: var(--neutral-layer-2);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .template-preview-html {
    /* Conserver fond blanc — un email est conçu pour fond blanc.
       On ajoute un cadre net pour bien le détacher du reste de l'UI sombre. */
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 4px var(--neutral-layer-2);
}

/* Radzen HtmlEditor */
[data-bs-theme="dark"] .rz-html-editor {
    background-color: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    border-color: var(--neutral-stroke-rest);
}

[data-bs-theme="dark"] .rz-html-editor-toolbar {
    background-color: var(--neutral-layer-2);
    border-color: var(--neutral-stroke-rest);
}

[data-bs-theme="dark"] .rz-html-editor-content {
    background-color: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

/* Logo footer et accueil — fond blanc pour lisibilité sur fond sombre */
[data-bs-theme="dark"] .app-footer-logo,
[data-bs-theme="dark"] .home-logo {
    background: white;
    border-radius: 6px;
    padding: 4px 8px;
}

/* KPI Strip Cards — fonds semi-transparents adaptés au dark */
[data-bs-theme="dark"] .kpi-strip .kpi-card--green   { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35); color: #86efac; }
[data-bs-theme="dark"] .kpi-strip .kpi-card--blue    { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.35); color: #93c5fd; }
[data-bs-theme="dark"] .kpi-strip .kpi-card--indigo  { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.35); color: #a5b4fc; }
[data-bs-theme="dark"] .kpi-strip .kpi-card--amber   { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); color: #fcd34d; }
[data-bs-theme="dark"] .kpi-strip .kpi-card--avoir   { background: rgba(249,115,22,0.12); border-color: rgba(249,115,22,0.35); color: #fdba74; }
[data-bs-theme="dark"] .kpi-strip .kpi-card--emerald { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.35); color: #6ee7b7; }

/* Campagne — stat cards */
.campagne-stat-card {
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: outline 0.2s;
}
.campagne-stat--neutral { background-color: var(--neutral-layer-2); }
.campagne-stat--green   { background-color: #dcfce7; }
.campagne-stat--blue    { background-color: #dbeafe; }
.campagne-stat--purple  { background-color: #f3e8ff; }
.campagne-stat--red     { background-color: #fef2f2; padding: 10px; }
.campagne-stat--orange  { background-color: #fff7ed; padding: 10px; }
.campagne-stat--active-green  { outline: 2px solid #22c55e; }
.campagne-stat--active-blue   { outline: 2px solid #3b82f6; }
.campagne-stat--active-purple { outline: 2px solid #8b5cf6; }
.campagne-stat--active-red    { outline: 2px solid #ef4444; }
.campagne-stat--active-orange { outline: 2px solid #f59e0b; }
.campagne-stat-value--green  { color: #16a34a; }
.campagne-stat-value--blue   { color: #3b82f6; }
.campagne-stat-value--purple { color: #8b5cf6; }
.campagne-stat-value--red    { color: #ef4444; }
.campagne-stat-value--orange { color: #f59e0b; }

[data-bs-theme="dark"] .campagne-stat--green  { background: rgba(34,197,94,0.12); }
[data-bs-theme="dark"] .campagne-stat--blue   { background: rgba(59,130,246,0.12); }
[data-bs-theme="dark"] .campagne-stat--purple { background: rgba(139,92,246,0.12); }
[data-bs-theme="dark"] .campagne-stat--red    { background: rgba(239,68,68,0.12); }
[data-bs-theme="dark"] .campagne-stat--orange { background: rgba(245,158,11,0.12); }
[data-bs-theme="dark"] .campagne-stat-value--green  { color: #86efac; }
[data-bs-theme="dark"] .campagne-stat-value--blue   { color: #93c5fd; }
[data-bs-theme="dark"] .campagne-stat-value--purple { color: #c4b5fd; }
[data-bs-theme="dark"] .campagne-stat-value--red    { color: #fca5a5; }
[data-bs-theme="dark"] .campagne-stat-value--orange { color: #fcd34d; }

/* Select-All Banner — fond semi-transparent bleu */
[data-bs-theme="dark"] .select-all-banner {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.35);
    color: #93c5fd;
}
[data-bs-theme="dark"] .select-all-banner-link { color: #60a5fa; }
[data-bs-theme="dark"] .select-all-banner-link:hover { color: #93c5fd; }

/* Forfait Field Highlight — bleu atténué en dark */
[data-bs-theme="dark"] fluent-text-field#forfait-montant[data-forfait="active"]::part(root),
[data-bs-theme="dark"] fluent-text-field#forfait-montant[data-forfait="active"]::part(control) {
    background: rgba(59,130,246,0.2);
}

/* Role Row Coloring — teintes subtiles en dark */
[data-bs-theme="dark"] .role-actif { background-color: rgba(34,197,94,0.1) !important; }
[data-bs-theme="dark"] .role-actif:hover { background-color: rgba(34,197,94,0.18) !important; }
[data-bs-theme="dark"] .role-termine { background-color: rgba(239,68,68,0.1) !important; }
[data-bs-theme="dark"] .role-termine:hover { background-color: rgba(239,68,68,0.18) !important; }

/* Dialog Dark Mode — overlay plus opaque et bordure pour contraste */
[data-bs-theme="dark"] fluent-dialog::part(overlay) {
    background: rgba(0, 0, 0, 0.7);
}
[data-bs-theme="dark"] fluent-dialog::part(control) {
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Dialog Dark Mode — texte lisible sur fond sombre */
[data-bs-theme="dark"] fluent-dialog .fluent-dialog-header,
[data-bs-theme="dark"] fluent-dialog .fluent-dialog-body,
[data-bs-theme="dark"] fluent-dialog .fluent-dialog-footer {
    color: rgba(255, 255, 255, 0.9);
}

/* ==========================================
   SearchCard — Mode selector + Sauvegardées
   ========================================== */

.search-mode-group {
    display: flex;
    gap: 4px;
    align-items: center;
}

.search-mode-radio {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.88em;
    transition: all 0.15s ease;
    border: 1px solid var(--neutral-stroke-rest);
    background: transparent;
    user-select: none;
}

.search-mode-radio input[type="radio"] {
    margin: 0;
    accent-color: var(--accent-fill-rest);
}

.search-mode-radio:hover {
    background-color: var(--neutral-layer-2);
}

.search-mode-radio-active {
    background-color: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    border-color: var(--accent-fill-rest);
    font-weight: 600;
}

.search-mode-radio-active input[type="radio"] {
    accent-color: white;
}

fluent-button.saved-search-btn::part(control) {
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 30%, transparent);
    border-radius: 8px;
    padding: 6px 14px;
    font-weight: 500;
    transition: all 0.15s ease;
}

fluent-button.saved-search-btn:hover::part(control) {
    background: color-mix(in srgb, var(--accent-fill-rest) 25%, transparent);
}

/* ==========================================
   SearchCard — Filtres par champ (badges)
   ========================================== */

.filter-badge {
    cursor: pointer;
    user-select: none;
    padding: 4px 12px;
    font-size: 0.85em;
    border-radius: 16px;
    transition: all 0.15s ease;
}

.filter-badge:hover {
    opacity: 0.85;
    transform: scale(1.03);
}

.filter-badge-active {
    font-weight: 600;
}

.field-filters-zone {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background-color: var(--neutral-layer-2);
    border-radius: 6px;
    border: 1px solid var(--neutral-stroke-rest);
}

.field-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.field-filter-row fluent-text-field,
.field-filter-row fluent-select {
    flex: 1;
    min-width: 0;
}

/* ========================= */
/* Syncfusion Gantt — couleurs des barres par statut */
/* Barre complète = fond clair (partie restante), inner-div = couleur vive (progression) */
/* ========================= */
.statut-arealiser .e-gantt-child-taskbar {
    background-color: #d1d5db !important;
}
.statut-arealiser .e-gantt-child-taskbar-inner-div {
    background-color: #6b7280 !important;
}
.statut-encours .e-gantt-child-taskbar {
    background-color: #bfdbfe !important;
}
.statut-encours .e-gantt-child-taskbar-inner-div {
    background-color: #3b82f6 !important;
}
.statut-terminee .e-gantt-child-taskbar {
    background-color: #bbf7d0 !important;
}
.statut-terminee .e-gantt-child-taskbar-inner-div {
    background-color: #22c55e !important;
}
.statut-annulee .e-gantt-child-taskbar {
    background-color: #e5e7eb !important;
    opacity: 0.6;
}
.statut-annulee .e-gantt-child-taskbar-inner-div {
    background-color: #9ca3af !important;
    opacity: 0.6;
}
.statut-en-retard .e-gantt-child-taskbar {
    background-color: #fecaca !important;
}
.statut-en-retard .e-gantt-child-taskbar-inner-div {
    background-color: #ef4444 !important;
}
/* Chemin critique (CPM serveur) — rouge foncé avec contour distinct du retard */
.chemin-critique .e-gantt-child-taskbar {
    background-color: #fca5a5 !important;
    outline: 2px solid #991b1b;
    outline-offset: -1px;
}
.chemin-critique .e-gantt-child-taskbar-inner-div {
    background-color: #dc2626 !important;
}
/* Marqueurs d'événements */
.e-marker-today .e-gantt-right-arrow {
    border-left-color: #ef4444 !important;
}
.e-marker-evenement .e-gantt-right-arrow {
    border-left-color: #3b82f6 !important;
}

/* Dropdown suggestions communes (adresse) */
.commune-suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 220px;
    overflow-y: auto;
    margin-top: 2px;
}
.commune-suggestion-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}
.commune-suggestion-item:last-child {
    border-bottom: none;
}
.commune-suggestion-item:hover {
    background: var(--neutral-layer-2);
}
.commune-cp {
    font-weight: 600;
    color: var(--accent-fill-rest);
    min-width: 52px;
}
.commune-nom {
    flex: 1;
}
.commune-cc {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

/* ========================================
   MODES DE DENSITÉ (data-density attribute sur <html>)
   Valeurs : "supercompact" | "compact" (défaut) | "normal"
   ======================================== */

/* --- Mode Normal --- */
[data-density="normal"] .list-page-container {
    gap: 16px;
}

[data-density="normal"] .responsive-field-group {
    gap: 16px;
}

[data-density="normal"] fluent-card {
    --card-padding: 20px;
}

[data-density="normal"] .page-header {
    margin-bottom: 16px;
}

/* --- Mode Super Compact --- */
[data-density="supercompact"] .list-page-container {
    gap: 8px;
}

[data-density="supercompact"] .responsive-field-group {
    gap: 8px;
}

[data-density="supercompact"] .page-header {
    margin-bottom: 6px;
}

[data-density="supercompact"] .list-page-card-content {
    gap: 6px;
}

[data-density="supercompact"] .list-page-footer {
    padding-top: 6px;
    gap: 4px;
}

/* Grille super compacte : lignes plus serrées */
[data-density="supercompact"] .list-page-grid-container fluent-data-grid-row {
    min-height: 24px;
    height: 24px;
}

[data-density="supercompact"] .list-page-grid-container fluent-data-grid-cell {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 13px;
}

/* Navigation super compacte */
.nav-menu-supercompact fluent-nav-link,
.nav-menu-supercompact fluent-nav-group {
    font-size: 0.75rem;
}

.nav-menu-supercompact fluent-nav-group::part(content) {
    font-size: 0.75rem;
}

/* Font body réduit en super compact */
[data-density="supercompact"] .content {
    font-size: 13px;
}

/* Card padding réduit en super compact */
[data-density="supercompact"] fluent-card::part(control) {
    padding: 12px;
}

/* Font body augmenté en normal */
[data-density="normal"] .content {
    font-size: 15px;
}

/* Macro-tâches — vue hiérarchique */
.macro-row {
    background: var(--neutral-layer-2) !important;
    font-weight: 500;
}
.micro-row {
    font-size: 13px;
}

/* ===== Dialog d'import Brevo ===== */
.brevo-import-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.brevo-import-body code {
    background: var(--neutral-layer-2);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}

.brevo-import-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 0;
    color: var(--neutral-foreground-hint);
}

.brevo-import-grid {
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 4px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

.brevo-import-grid fluent-data-grid {
    width: 100%;
}

.brevo-import-grid fluent-data-grid-row[row-type="header"] {
    background: var(--neutral-layer-2);
}

.brevo-import-grid fluent-data-grid-row {
    cursor: pointer;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.brevo-import-grid fluent-data-grid-row:hover:not([row-type="header"]) {
    background: var(--neutral-fill-stealth-hover);
}

.brevo-import-grid fluent-data-grid-row.brevo-row-selected {
    background: var(--accent-fill-rest) !important;
    color: var(--foreground-on-accent-rest);
}

.brevo-import-grid fluent-data-grid-row.brevo-row-selected fluent-data-grid-cell {
    color: var(--foreground-on-accent-rest);
    font-weight: 500;
}

.brevo-import-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--neutral-layer-2);
    border-radius: 4px;
    min-height: 36px;
    font-size: 13px;
}

.brevo-import-hint {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

.brevo-import-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}