/* Logs, pistes d'audits */
.audit-filter-form {
    margin-top: 18px;
    margin-bottom: 14px;
}

.audit-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(130px, 1fr));
    gap: 12px;
    align-items: end;
}

.audit-date-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 220px));
    gap: 12px;
    align-items: end;
    margin-top: 12px;
}

.audit-filter-grid .field,
.audit-date-grid .field {
    margin-bottom: 0;
}

.audit-search-field {
    grid-column: span 2;
}

.audit-filter-actions,
.audit-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.audit-result-count {
    margin: 14px 0 0;
    color: var(--c-ghost-text);
    font-weight: 700;
}

.audit-table {
    table-layout: fixed;
    width: 100%;
}

.audit-table th,
.audit-table td {
    white-space: normal;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
}

.audit-table th:nth-child(1) { width: 120px; }
.audit-table th:nth-child(2) { width: 24%; }
.audit-table th:nth-child(4) { width: 120px; }
.audit-table th:nth-child(5) { width: 130px; }

.audit-detail-row td {
    padding: 0 10px 8px;
    background: #f8fafc;
    border-bottom-color: #dbe4ef;
}

.audit-details summary {
    color: var(--c-primary);
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    padding-top: 6px;
}

.audit-muted {
    color: var(--c-neutral);
    font-size: 0.9em;
}

.audit-details pre {
    max-height: 260px;
    max-width: 100%;
    overflow: auto;
    padding: 8px;
    margin: 6px 0 0;
    background: #f8fafc;
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--radius-md);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 0.8rem;
}

/* Détail de trace lisible (remplace le JSON brut). */
.audit-detail-body {
    margin: 8px 0 4px;
}

.audit-detail-body h4 {
    margin: 12px 0 4px;
    font-size: 0.82rem;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.audit-meta-table,
.audit-changes-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.85rem;
}

.audit-meta-table th,
.audit-meta-table td,
.audit-changes-table th,
.audit-changes-table td {
    border: 1px solid #dbe4ef;
    padding: 5px 8px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.audit-meta-table th {
    width: 150px;
    color: var(--c-ghost-text);
    font-weight: 600;
    background: var(--c-ghost-hover-bg);
}

.audit-changes-table thead th {
    background: #eef2ff;
    color: var(--c-primary);
}

.audit-before {
    color: #b42318;
    text-decoration: line-through;
}

.audit-after {
    color: #166534;
    font-weight: 600;
}

@media (max-width: 900px) {
    .audit-filter-grid {
        grid-template-columns: 1fr;
    }

    .audit-search-field,
    .audit-date-grid {
        grid-column: auto;
    }

    .audit-date-grid {
        grid-template-columns: 1fr;
    }
}

/* Invitations parent */
.invite-accept-card {
    margin-top: 16px;
    max-width: 720px;
}

.invite-accept-form {
    margin-top: 18px;
}

/* Sélecteurs à 2 classes : priment sur .table-wrap / .simple-list-table de
   tables.css (chargé après) sans dépendre de l'ordre des feuilles. */
.admin-user-wrap.table-wrap {
    overflow-x: hidden;
}

.admin-user-search {
    max-width: 520px;
    margin-top: 12px;
}

.admin-user-form {
    margin-top: 16px;
}

.admin-user-invite-check {
    width: fit-content;
}

/* Auto-layout : la colonne Actions prend la largeur de ses boutons (fixe, selon le
   nombre), les autres colonnes se partagent le reste. Aucun débordement horizontal. */
.simple-list-table.admin-user-table {
    table-layout: auto;
    width: 100%;
}

.admin-user-table th,
.admin-user-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
}

/* Colonne Actions : largeur = contenu (boutons), sur UNE seule ligne — jamais
   tronquée, jamais de retour à la ligne, jamais de scroll. width:1% force la colonne
   à se réduire à son contenu (nowrap) en auto-layout. */
/* Spécificité (2 classes sur la table) volontairement > `.simple-list-table td.col-actions`
   de tables.css (chargé après) qui imposerait une largeur fixe 135/170px. */
.simple-list-table.admin-user-table th.col-actions,
.simple-list-table.admin-user-table td.col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.simple-list-table.admin-user-table td.col-actions > a,
.simple-list-table.admin-user-table td.col-actions > form,
.simple-list-table.admin-user-table td.col-actions > span {
    display: inline-flex;
    vertical-align: middle;
}
.simple-list-table.admin-user-table td.col-actions .inline-action-form { margin: 0; }

.admin-user-email { font-size: 12px; word-break: break-all; }

/* Campagnes documents */
.document-table-wrap {
    overflow-x: hidden;
}

.document-campaign-table,
.document-request-table,
.document-payment-table {
    table-layout: fixed;
    width: 100%;
}

.document-campaign-table th,
.document-campaign-table td,
.document-request-table th,
.document-request-table td,
.document-payment-table th,
.document-payment-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.document-campaign-table th:nth-child(1) { width: 30%; }
.document-campaign-table th:nth-child(2) { width: 18%; }
.document-campaign-table th:nth-child(3) { width: 105px; }
.document-campaign-table th:nth-child(4) { width: 110px; }
.document-campaign-table th:nth-child(5) { width: 95px; }
.document-campaign-table th:nth-child(6) { width: 80px; }
.document-campaign-table th:nth-child(7) { width: 70px; }

.document-request-table th:nth-child(1) { width: 15%; }
.document-request-table th:nth-child(2) { width: 15%; }
.document-request-table th:nth-child(3) { width: 24%; }
.document-request-table th:nth-child(4) { width: 16%; }
.document-request-table th:nth-child(5) { width: 110px; }
.document-request-table th:nth-child(6) { width: 120px; }
.document-request-table th:nth-child(7) { width: 76px; }

.document-payment-table th:nth-child(1) { width: 22%; }
.document-payment-table th:nth-child(2) { width: 24%; }
.document-payment-table th:nth-child(3) { width: 18%; }
.document-payment-table th:nth-child(4) { width: 110px; }
.document-payment-table th:nth-child(6) { width: 76px; }

.document-actions {
    display: flex;
    gap: 4px;
}

.document-actions form {
    display: inline-flex;
    margin: 0;
}

.document-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

.document-type-check {
    align-items: flex-start;
}

/* Bloc principal (case + libellé) d'un document, à gauche ; l'interrupteur
   « Facultatif » ou le montant occupe la droite de la carte. */
.document-type-main {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex: 1 1 auto;
    margin: 0;
    font-weight: 600;
}

.document-type-check small {
    display: block;
    color: var(--c-neutral);
    font-weight: 400;
}

/* Liste « obligatoire / facultatif » (page Modifier campagne) : une ligne par
   document, police agrandie pour une lecture confortable. */
.doc-flag-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.doc-flag-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
}
.doc-flag-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}
.doc-flag-suffix {
    color: var(--c-neutral);
    font-size: 0.9rem;
    font-weight: 400;
}

.document-parent-list {
    display: grid;
    gap: 12px;
}

.document-parent-card {
    padding: 12px;
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--radius-md);
    background: #fff;
}

.document-parent-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.document-parent-heading h2 {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.document-status {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-sm);
    background: #dbeafe;
    color: var(--c-primary);
    font-weight: 700;
    font-size: 0.86rem;
}

.document-submit-form {
    margin-top: 10px;
}

.document-inline-check {
    margin-top: 8px;
    width: fit-content;
}

.document-default-amount {
    display: block;
    width: 130px;
    margin-top: 6px;
    padding: 4px 6px;
    font-size: 0.86rem;
}

.document-title-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.document-title-actions form {
    margin: 0;
}

/* Barre d'onglets : onglets à gauche, recherche partagée à droite, le trait
   passe sous l'ensemble. */
.document-tabs-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--c-ghost-border);
    margin-bottom: 12px;
}
.document-tab-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: -1px;   /* les onglets chevauchent le trait (l'onglet actif le masque) */
}
.document-tab-search {
    max-width: 320px;
    margin-bottom: 6px;
}

.document-tab-button {
    border: 1px solid var(--c-ghost-border);
    border-bottom: 0;
    border-radius: var(--radius-md) 8px 0 0;
    background: #f8fafc;
    color: var(--c-primary);
    font-weight: 700;
    padding: 8px 14px;
    cursor: pointer;
}

.document-tab-button.is-active {
    background: #dbeafe;
    border-color: var(--c-primary);
}

.document-tab-panel {
    display: none;
}

.document-tab-panel.is-active {
    display: block;
}

.document-tab-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.document-tab-heading h2 {
    margin: 0;
}

.document-tab-heading input {
    max-width: 360px;
}

.document-family-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.document-family-block {
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--radius-md);
    background: #fff;
    overflow: hidden;
}

.document-family-block h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 8px 10px;
    background: #dbeafe;
    color: var(--c-primary);
    font-size: 1rem;
}

.document-family-block h3 span {
    color: #1f2937;
    font-size: 0.9rem;
}

.document-child-block {
    padding: 8px 10px 8px 24px;
    border-top: 1px solid #e2e8f0;
}

.document-child-block h4 {
    margin: 0 0 6px;
    font-size: 0.96rem;
}

.document-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 6px 0 6px 14px;
    border-left: 3px solid #dbeafe;
}

.document-payment-line {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) auto;
}

.document-line-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.document-line-main strong,
.document-line-main a,
.document-line-main small {
    overflow-wrap: anywhere;
}

/* Pastilles neutres de la ligne (ex. récap total famille) — exclut l'astérisque
   « obligatoire » (.required-mark, simple astérisque rouge) ET les badges de statut
   (.badge, qui portent leur propre couleur sémantique vert/bleu/jaune/rouge). */
.document-line-main span:not(.required-mark):not(.badge) {
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--c-ghost-hover-bg);
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
}

.document-line-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.document-line-actions form {
    margin: 0;
}

.document-amount-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin: 0;
}

.document-amount-form input {
    width: 96px;
    padding: 5px 6px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .grid-3,
    .document-parent-heading {
        grid-template-columns: 1fr;
        display: grid;
    }

    .document-tab-heading,
    .document-family-block h3,
    .document-line,
    .document-payment-line {
        grid-template-columns: 1fr;
        display: grid;
    }

    .document-line-actions,
    .document-amount-form {
        justify-content: flex-start;
    }
}

/* Communications ciblées */
.communication-form {
    margin-top: 18px;
}

.communication-section {
    padding: 12px 0;
    border-top: 1px solid #e2e8f0;
}

.communication-section h2 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.25rem;
}

.communication-section h3 {
    margin-top: 10px;
    margin-bottom: 6px;
    font-size: 1rem;
}

.communication-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.communication-section-heading h2 {
    margin-bottom: 0;
}

.communication-check {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    margin: 0;
    padding: 2px 6px;
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    font-size: 0.9rem;
    line-height: 1.2;
    font-weight: 500;
}

.communication-target-tree {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}

/* --- Droits délégués : arbre repliable par domaine ----------------------- */
.delegation-domain {
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    background: #fff;
    margin-bottom: 10px;
    overflow: hidden;
}
.delegation-domain > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 13px 14px;            /* en-tête de section largement cliquable */
    font-weight: 600;
    color: #1e293b;
}
.delegation-domain > summary::-webkit-details-marker { display: none; }
.delegation-domain > summary::before {
    content: '\25B8';             /* ▸ */
    display: inline-block;
    width: 1em;
    margin-right: 6px;
    color: var(--c-neutral);
    transition: transform .15s ease;
}
.delegation-domain[open] > summary::before { transform: rotate(90deg); }
.delegation-domain > summary:hover { background: var(--c-ghost-hover-bg); }

/* Lignes de capacités : indentées (~+30px vs l'en-tête), cliquables largement,
   hauteur ISO que la ligne soit modifiée ou non (min-height fixe + centrage). */
.delegation-domain .communication-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 14px 8px 44px;    /* 44px = décalage de l'arbre */
    min-height: 44px;
    box-sizing: border-box;
    border-top: 1px solid var(--c-ghost-hover-bg);
    cursor: pointer;
    line-height: 1.25;
}
.delegation-domain .communication-checkbox:hover { background: #f8fafc; }
.delegation-domain .communication-checkbox input[type="checkbox"] { flex: 0 0 auto; margin: 0; }

/* Badge « modifié » + bouton « ↺ défaut » : l'espace est TOUJOURS réservé dans la
   ligne ; on ne bascule que la visibilité (classe .is-modified). Le bouton est de
   hauteur plafonnée (≤ zone de contenu) → la hauteur de ligne est STRICTEMENT
   identique, modifiée ou non. */
.delegation-domain [data-cap-modified],
.delegation-domain [data-cap-reset] { visibility: hidden; }
.delegation-domain .is-modified [data-cap-modified],
.delegation-domain .is-modified [data-cap-reset] { visibility: visible; }

.delegation-domain [data-cap-modified] {
    margin-left: auto;
    color: #b45309;
    font-weight: 600;
    white-space: nowrap;
}
.delegation-domain [data-cap-reset] {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 26px;                  /* tient dans la zone de contenu (44 − 2×8 = 28px) */
    min-height: 0;
    padding: 0 9px;
    font-size: .78rem;
    line-height: 24px;
}

.delegation-reserved { opacity: .55; cursor: not-allowed; }
.delegation-reserved input[type="checkbox"] { cursor: not-allowed; }

.communication-tree {
    display: grid;
    gap: 8px;
}

.communication-filter-hidden {
    display: none !important;
}

.communication-tree-search-field {
    max-width: 520px;
    margin-bottom: 10px;
}

.communication-tree-node {
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--radius-md);
    background: #fff;
}

.communication-tree-node .communication-tree-node {
    margin-top: 4px;
}

.communication-tree-node summary {
    list-style: none;
    cursor: pointer;
}

.communication-tree-node summary::-webkit-details-marker {
    display: none;
}

.communication-tree-node summary::before {
    content: "▸";
    display: inline-block;
    width: 18px;
    color: var(--c-primary);
    font-weight: 700;
}

.communication-tree-node[open] > summary::before {
    content: "▾";
}

.communication-tree-root > summary {
    background: #dbeafe;
    color: var(--c-primary);
    font-weight: 700;
}

.communication-tree-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    margin: 0;
    padding: 3px 6px;
    font-size: 0.92rem;
    line-height: 1.2;
}

.communication-tree-check small {
    color: var(--c-neutral);
    font-size: 0.84em;
    font-weight: 400;
}

.communication-tree-children {
    display: grid;
    gap: 4px;
    padding: 4px 6px 6px 24px;
}

.communication-parent-list {
    padding-left: 20px;
}

.communication-parent-check {
    display: flex;
    border-left: 2px solid #dbeafe;
    padding-left: 8px;
}

.communication-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.communication-editor-toolbar button {
    min-height: 30px;
    padding: 4px 9px;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-sm);
    background: #dbeafe;
    color: var(--c-primary);
    font-weight: 700;
}

.communication-editor-mode,
.communication-recipient-mode-global {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-primary);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.communication-mode-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 520px;
    min-height: 30px;
    color: var(--c-ghost-text);
    font-size: 0.86rem;
    line-height: 1.2;
}

.communication-keyword-popover {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 20;
    display: none;
    width: min(420px, 80vw);
    padding: 8px 10px;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-md);
    background: #fff;
    color: #1e293b;
    box-shadow: 0 4px 12px rgb(15 23 42 / 18%);
    font-weight: 500;
}

.communication-mode-help:hover .communication-keyword-popover,
.communication-mode-help:focus .communication-keyword-popover {
    display: block;
}

.communication-editor-mode select,
.communication-recipient-mode-global select {
    min-height: 30px;
    padding: 3px 6px;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-sm);
    background: #fff;
}

.communication-recipient-mode-global select {
    width: 120px;
}

.communication-recipient-mode {
    width: 76px;
    min-height: 30px;
    padding: 3px 6px;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-sm);
    background: #fff;
}

.communication-html-editor {
    min-height: 180px;
    padding: 10px;
    border: 1px solid #0f6b2f;
    border-radius: var(--radius-md);
    background: #fbfff8;
    line-height: 1.45;
}

.communication-html-editor img {
    max-width: 100%;
    height: auto;
}

.profile-signature-editor {
    min-height: 120px;
}

.communication-html-editor:focus {
    outline: 2px solid #93c5fd;
    outline-offset: 1px;
}

.communication-sent-preview {
    padding: 12px;
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--radius-md);
    background: #fff;
    font-size: 0.95rem;
    line-height: 1.45;
}

.communication-group-block {
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--radius-md);
    background: #fff;
    overflow: hidden;
}

.communication-group-check {
    border: 0;
    border-bottom: 1px solid var(--c-ghost-border);
    border-radius: 0;
    padding: 4px 6px;
    background: #dbeafe;
    color: var(--c-primary);
    font-weight: 700;
}

.communication-unit-list {
    display: grid;
    gap: 2px;
    padding: 4px;
}

.communication-unit-check {
    padding: 2px 6px 2px 16px;
    border-color: #e2e8f0;
    background: #f8fafc;
}

.communication-help-block {
    margin: 0 0 10px;
    color: var(--c-neutral);
    font-size: 0.86rem;
    font-style: italic;
    line-height: 1.25;
}

.communication-help-block p {
    margin: 0 0 3px;
}

.communication-check input {
    flex: 0 0 auto;
}

.communication-help,
.communication-scope-note {
    color: var(--c-ghost-text);
    margin: 8px 0 0;
}

.communication-warning {
    display: inline-block;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--c-danger);
    border-radius: var(--radius-md);
    background: var(--c-danger-bg);
    color: #991b1b;
}

.communication-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.communication-actions-inline {
    justify-content: flex-start;
}

.communication-preview {
    margin-top: 18px;
}

.communication-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.communication-preview-header h2 {
    margin-bottom: 0;
}

.communication-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.communication-summary span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-md);
    background: #dbeafe;
    color: var(--c-primary);
    font-weight: 700;
}

.communication-recipient-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.86rem;
}

.communication-recipient-table th,
.communication-recipient-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.communication-recipient-table th:nth-child(1) { width: 22%; }
.communication-recipient-table th:nth-child(2) { width: 24%; }
.communication-recipient-table th:nth-child(3) { width: 96px; }
.communication-recipient-table th:nth-child(4) { width: 19%; }

.communication-history-table {
    table-layout: fixed;
    width: 100%;
}

.communication-history-wrap {
    overflow-x: visible;
}

.communication-history-table th,
.communication-history-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.communication-history-table th:nth-child(1) { width: 120px; }
.communication-history-table th:nth-child(2) { width: auto; }
.communication-history-table th:nth-child(3) { width: 95px; }
.communication-history-table th:nth-child(4) { width: 96px; }
.communication-history-table th:nth-child(5) { width: 82px; }
.communication-history-table th:nth-child(6) { width: 150px; }
.communication-history-table th:nth-child(7) { width: 76px; }

.communication-history-table .col-communication-subject {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Profil */
.profile-section {
    padding: 14px 0;
    border-top: 1px solid #e2e8f0;
}

.profile-section h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.25rem;
}

.profile-table th {
    width: 160px;
    vertical-align: top;
}

/* Description multi-lignes dans une cellule : pas de marge haute (alignée avec l'en-tête). */
.profile-table td .activity-description { margin-top: 0; }

.google-account-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--radius-md);
    background: #f8fafc;
}

.google-account-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
}

.profile-help {
    color: var(--c-neutral);
    margin: 8px 0 0;
}

.profile-warning {
    display: inline-block;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--c-danger);
    border-radius: var(--radius-md);
    background: var(--c-danger-bg);
    color: #991b1b;
}

.profile-action-form {
    margin-top: 12px;
}

.profile-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.login-separator {
    margin: 18px 0 12px;
    color: var(--c-neutral);
    text-align: center;
}

.login-google-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--c-ghost-border);
    background: #fff;
    color: var(--c-primary);
    text-align: center;
}

.login-google-button:hover,
.login-google-button:focus {
    background: #f8fafc;
    color: var(--c-primary);
}

.google-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid #dadce0;
    border-radius: var(--radius-pill);
    background: #fff;
    color: #4285f4;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 700px) {
    .communication-preview-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .communication-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .communication-summary {
        justify-content: flex-start;
    }
}

/* ===== Détail groupe / unité (loupe) : effectifs, pyramide, absentéisme ===== */
.loupe-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 8px;
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--radius-md);
    color: #334155;
    background: #fff;
    vertical-align: middle;
    transition: background .15s, border-color .15s, color .15s;
}
.loupe-link:hover { background: #eff6ff; border-color: #2563eb; color: #2563eb; }
.unit-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.insight-unit-block { margin-bottom: 18px; }
.insight-unit-title { font-size: 1rem; margin: 0 0 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.effectif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.effectif-chip {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: var(--radius-md); background: #f8fafc; color: #1e293b;
    transition: background .15s, border-color .15s;
}
.effectif-chip:hover { background: #eff6ff; border-color: #93c5fd; }
.effectif-name { font-weight: 600; }
.effectif-age { color: var(--c-neutral); font-size: .85rem; white-space: nowrap; }

/* Pyramide des âges (histogramme horizontal empilé par unité) */
.pyramid-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.pyramid-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--c-ghost-text); }
/* Effectif de l'unité dans la légende : pastille discrète, alignée sur le point
   de couleur, pour compléter le repère sans le concurrencer. */
.pyramid-legend-count {
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: #eef2ff;
    color: var(--c-primary);
    font-weight: 700;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}
.pyramid { display: flex; flex-direction: column; gap: 5px; }
.pyramid-row { display: flex; align-items: center; gap: 10px; }
.pyramid-age { width: 58px; text-align: right; font-size: .85rem; color: var(--c-ghost-text); flex: 0 0 auto; }
.pyramid-bar { flex: 1; display: flex; height: 22px; background: var(--c-ghost-hover-bg); border-radius: var(--radius-xs); overflow: hidden; }
.pyramid-seg { height: 100%; min-width: 2px; }
.pyramid-count { width: 32px; font-size: .85rem; color: #334155; font-weight: 600; flex: 0 0 auto; }

/* Absentéisme : donut + barres de taux */
.attendance-overview { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 10px; }
.donut { position: relative; width: 140px; height: 140px; border-radius: 50%; flex: 0 0 auto; }
.donut::after { content: ''; position: absolute; inset: 24px; background: #fff; border-radius: 50%; }
.donut-center {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700; color: #16a34a; z-index: 1;
}
.donut-center small { font-size: .7rem; font-weight: 500; color: var(--c-neutral); }
.attendance-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.attendance-legend li { display: flex; align-items: center; gap: 8px; }
.attendance-legend .dot { width: 12px; height: 12px; border-radius: var(--radius-xs); display: inline-block; }
.rate-bar { display: inline-block; width: 90px; height: 9px; background: var(--c-ghost-hover-bg); border-radius: var(--radius-xs); overflow: hidden; vertical-align: middle; }
.rate-fill { display: block; height: 100%; background: #16a34a; }
.rate-val { font-weight: 600; margin: 0 4px 0 6px; }

/* Tableau d'information dense (ex. « Mes données ») : colonnes à largeur fixe et
   texte replié, pour tenir dans le cadre sans débordement (surcharge le
   white-space:nowrap par défaut de .simple-list-table). */
.simple-list-table.info-table { table-layout: fixed; width: 100%; }
.simple-list-table.info-table th,
.simple-list-table.info-table td { white-space: normal; word-break: break-word; }

/* Années scoutes : jusqu'à 6 actions par ligne (modifier / préparer / relancer /
   sortants / activer / archiver). En pictogrammes, la barre tient sur une seule
   ligne — width:1% réduit la colonne à son contenu sans pousser la table hors
   de la carte, et le wrap ne sert que de filet sur écran étroit. */
.simple-list-table.scout-year-table th.col-actions,
.simple-list-table.scout-year-table td.col-actions { width: 1%; white-space: nowrap; }
/* nowrap volontaire : avec le repli autorisé, la largeur minimale de la colonne
   (width:1%) vaut UN bouton, et les six s'empilent en colonne. Sur écran étroit,
   le repli est rétabli plus bas. */
.scout-year-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}
.scout-year-actions .inline-action-form { margin: 0; display: inline-flex; }
@media (max-width: 900px) {
    .scout-year-actions { flex-wrap: wrap; }
}

/* Création d'année : trois champs courts (libellé + deux dates) — sans borne,
   ils s'étirent sur toute la largeur de la carte. */
.scout-year-form { max-width: 420px; }

/* Choix du district à administrer (super-admin) : sélecteur + bouton sur une ligne. */
.scout-year-district-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
}
.scout-year-district-form select { max-width: 320px; }
.scout-year-district-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* Légende des pictogrammes d'une colonne d'actions (« que fait ce bouton ? »). */
.icon-legend {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 8px 20px;
    font-size: 0.88rem;
    color: var(--c-ghost-text);
}
.icon-legend li { display: flex; align-items: flex-start; gap: 8px; }
.icon-legend-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--radius-sm);
    color: var(--c-primary);
    background: #f8fafc;
}
.icon-legend strong { color: var(--c-primary); font-weight: 600; }

/* Légende du fond « ancien » (listes familles / enfants). */
.former-legend { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.former-legend-swatch {
    flex: 0 0 auto;
    width: 26px;
    height: 16px;
    border-radius: var(--radius-xs);
    background: #fdf3dd;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #e0942f;
}

/* Popup d'export multi-vues : les onglets internes ne doivent pas hériter des
   marges d'un onglet de page, et la liste de colonnes reste défilante pour que
   les boutons d'export restent visibles. */
.export-multi .pdf-tabs-wrap { margin-top: 0; }
.export-multi .export-col-list { max-height: 40vh; overflow-y: auto; }
.export-view-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 6px;
    font-weight: 600;
    color: var(--c-primary);
}

/* Pyramide des âges : chaque barre est un bouton qui déplie la liste des jeunes
   de la tranche. Le bouton reprend l'allure d'une ligne (pas d'apparence de
   contrôle), l'affordance vient du curseur et du survol. */
.pyramid-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: 0;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    min-height: 0;
}
.pyramid-row:hover { background: var(--c-ghost-hover-bg); }
.pyramid-row[aria-expanded="true"] { background: #eef2ff; }

/* Dépliant : les jeunes de la tranche, en pastilles d'initiales. Le nom complet
   suit la pastille quand la place le permet, et reste en infobulle sinon. */
.pyramid-people {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 2px 0 12px 54px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--c-primary);
    border-radius: var(--radius-md);
}
.people-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #334155;
    font-size: .88rem;
    max-width: 220px;
}
.people-badge:hover { color: var(--c-primary); }
.people-badge:hover .child-row-avatar { box-shadow: 0 0 0 2px #c7d2fe; }
.people-badge .child-row-avatar { width: 28px; height: 28px; font-size: 11px; flex: 0 0 auto; }
.people-badge-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
    .pyramid-people { margin-left: 0; }
    .people-badge-name { display: none; }  /* pastilles seules : le nom reste en infobulle */
}

/* Roue crantée d'un en-tête de tableau : ouvre le choix des colonnes affichées.
   Discrète au repos, elle s'affirme au survol — c'est un réglage, pas une action. */
.table-cog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    opacity: .55;
}
.table-cog:hover { opacity: 1; background: #eef2ff; border-color: #c7d2fe; }
.table-cog svg { display: block; width: 16px; height: 16px; }

/* Anti-doublon à la création d'une famille : homonymes proposés sous le champ. */
.homonym-box {
    margin-top: 8px;
    padding: 10px 12px;
    background: #fdf3dd;
    border: 1px solid #e8cf9a;
    border-radius: var(--radius-md);
}
.homonym-title { margin: 0 0 6px; font-size: .9rem; font-weight: 700; color: #92400e; }
.homonym-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.homonym-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.homonym-name { font-weight: 600; color: var(--c-primary); }
.homonym-flag {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 1px solid #e0942f;
    color: #92400e;
    font-size: .75rem;
    font-weight: 600;
}
.homonym-meta { color: var(--c-ghost-text); font-size: .88rem; }
.homonym-list li .btn--secondary { margin-left: auto; }
.homonym-dialog { max-width: 520px; }
.homonym-detail { list-style: none; margin: 4px 0 12px; padding: 0; }
.homonym-detail li { padding: 3px 0; border-bottom: 1px solid #eef2f7; }
.homonym-dialog h4 { margin: 10px 0 2px; color: var(--c-primary); font-size: .95rem; }

/* Badge « NEW » : première année du jeune dans le groupe. Volontairement petit et
   vert — c'est une information de contexte, pas une alerte. */
.badge-new {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    vertical-align: middle;
}

/* Ancienneté dans l'unité (2e année et au-delà) : jaune, à côté du « NEW » vert.
   Deux informations complémentaires — l'un dit qui arrive, l'autre qui dure. */
.badge-seniority {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde047;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    vertical-align: middle;
}

/* Fiche enfant : ancienneté dans l'unité + saisie du crédit d'années antérieures.
   Libellé, champ et bouton sur une seule ligne. Les deux règles globales à
   contourner : `label { display: block }` et la largeur 100 % de tout input —
   d'où un sélecteur d'attribut, de spécificité égale mais déclaré plus tard. */
/* Ancienneté : la synthèse est posée à droite de l'en-tête « Historique AGSE »,
   dont elle est le résumé ; la saisie vit sous le tableau, titre sur sa ligne puis
   la rangée des trois branches — plutôt qu'un long ruban qui se repliait n'importe
   où, le champ finissant sous son propre libellé. */
.seniority-box { margin-top: 10px; }
.seniority-summary { margin: 0; text-align: right; font-size: .95rem; }
.seniority-form { margin: 0; }
.seniority-form label { display: inline-block; width: auto; margin: 0; font-weight: 600; font-size: .85rem; }
.seniority-legend { display: block; margin-bottom: 6px; font-weight: 700; color: var(--c-primary); }
.seniority-fields { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Le couple libellé + champ ne se sépare jamais : c'est lui l'unité de repli. */
.seniority-field { display: inline-flex; align-items: center; gap: 8px; }
/* Ancienneté de parcours : même forme que l'ancienneté d'unité, teinte distincte
   pour qu'un coup d'œil suffise à ne pas les confondre. */
.badge-seniority--global { background: #ffedd5; border-color: #fdba74; color: #9a3412; }
.seniority-form input[type="number"]:not([type="checkbox"]):not([type="radio"]) { width: 5.5rem; }
.seniority-hint { margin: 6px 0 0; }

/* Page d'erreur métier : lisible et jamais sans issue. */
.error-page { max-width: 640px; margin: 40px auto; text-align: center; }
.error-page-code { margin: 0; font-size: 3rem; font-weight: 800; color: #cbd5e1; line-height: 1; }
.error-page h1 { margin: 4px 0 10px; }
.error-page-message { margin: 0 0 20px; color: #475569; }
.error-page-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0; }