h1 {
    color: var(--c-primary);
    margin-top: 0;
}

h2 {
    color: var(--c-primary);
}

h3,
h4 {
    color: var(--c-primary);
    margin-bottom: 0;
}

.card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

.field {
    margin-bottom: 16px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--radius-md);
    box-sizing: border-box;
}


/* ============================================================== */
/* Système de boutons : tokens + 4 rôles, source de vérité unique. */
/*   primaire  : .btn--primary, .btn, <button> nu  (bleu plein)    */
/*   secondaire: .btn--secondary                   (gris plein)    */
/*   fantôme   : .btn--ghost                       (annuler)       */
/*   danger    : .btn--danger                      (suppression)   */
/* Les alias historiques (btn-valid / btn-cancel / btn-delete /    */
/* btn-light / btn-foot) ont été retirés : plus aucune vue ne les  */
/* utilisait. Un bouton se déclare par son RÔLE, pas par son écran.*/
/* ============================================================== */
:root {
    --control-h: 40px;              /* hauteur uniforme contrôles (boutons + champs) */
    /* Rayons standard (harmonisation : à utiliser pour tout nouveau composant). */
    --radius-xs: 4px;               /* pastilles, vignettes, petits cadres */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --btn-radius: var(--radius-md);
    --btn-pad-x: 16px;
    --btn-font: 12px;
    --btn-gap: 8px;                 /* espacement standard entre boutons */
    --c-primary: #1f3c88;
    --c-primary-hover: #16306e;
    --c-neutral: #64748b;
    --c-neutral-hover: #4b5563;
    --c-ghost-text: #475569;
    --c-ghost-border: #cbd5e1;
    --c-ghost-hover-bg: #f1f5f9;
    --c-danger: #b91c1c;
    --c-danger-bg: #fee2e2;
    --c-danger-bg-hover: #fecaca;
    --c-disabled-bg: #cbd5e1;
    --c-disabled-text: #64748b;
}

/* Rôle PRIMAIRE (bleu plein). */
button,
.btn,
.btn--primary {
    display: inline-block;
    background: var(--c-primary);
    color: #fff;
    text-decoration: none;
    padding: 10px var(--btn-pad-x);
    border: 1px solid var(--c-primary);
    border-radius: var(--btn-radius);
    cursor: pointer;
    font-size: var(--btn-font);
}
/* État DÉSACTIVÉ unifié (liens + boutons, toutes variantes). */
a.disabled,
.btn.disabled, button[disabled], .btn[disabled],
.btn--primary[disabled], .btn--secondary[disabled],
.btn--ghost[disabled], .btn--danger[disabled] {
    background: var(--c-disabled-bg);
    color: var(--c-disabled-text);
    border-color: var(--c-disabled-bg);
    cursor: not-allowed;
    box-shadow: none;
}

/* Rôle SECONDAIRE (gris plein) : retour, actions de second plan. */
.btn--secondary {
    display: inline-block;
    background: var(--c-neutral);
    color: #fff;
    text-decoration: none;
    padding: 10px var(--btn-pad-x);
    border-radius: var(--btn-radius);
    cursor: pointer;
    border: 1px solid var(--c-neutral);
    font-size: var(--btn-font);
}

/* Rôle FANTÔME (gris discret) : annuler. */
.btn--ghost {
    display: inline-block;
    background: #fff;
    color: var(--c-ghost-text);
    text-decoration: none;
    padding: 10px var(--btn-pad-x);
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--btn-radius);
    cursor: pointer;
    font-size: var(--btn-font);
}

/* Rôle DANGER (rouge) : suppression. */
.btn--danger {
    display: inline-block;
    background: var(--c-danger-bg);
    color: var(--c-danger);
    text-decoration: none;
    padding: 10px var(--btn-pad-x);
    border: 1px solid var(--c-danger);
    border-radius: var(--btn-radius);
    cursor: pointer;
    font-size: var(--btn-font);
}

button,
.btn, .btn--primary, .btn--secondary, .btn--ghost, .btn--danger {
    transition: all 0.15s ease;
}
/* Survol : un seul idiome (assombrir / teinter le fond), sans « saut » de taille. */
.btn:hover, .btn--primary:hover {
    background: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
}
.btn--secondary:hover {
    background: var(--c-neutral-hover);
    border-color: var(--c-neutral-hover);
}
.btn--ghost:hover {
    background: var(--c-ghost-hover-bg);
}
.btn--danger:hover {
    background: var(--c-danger-bg-hover);
}

/* Modificateur « pictogramme seul » : se combine avec les 4 rôles
   (.btn--primary/secondary/ghost/danger) et réduit le bouton à un carré à la
   hauteur standard des contrôles. Le sens passe par le title + l'aria-label
   (et, quand une colonne en aligne plusieurs, par une légende sous le tableau). */
.btn--icon {
    width: var(--control-h);
    min-width: var(--control-h);
    padding: 0;
    justify-content: center;
}
.btn--icon svg { display: block; }

/* ------------------------------------------------------------------ */
/* Hauteur UNIFORME des contrôles (boutons + champs), applicable partout.
   Évite les désalignements bouton/champ sur une même ligne. Les boutons-
   icônes compacts des colonnes d'action et le hamburger sont exclus. */
button:not(.btn-action-column):not(.nav-toggle):not(.pay-method-opt),
.btn, .btn--primary, .btn--secondary, .btn--ghost, .btn--danger,
input:not([type="checkbox"]):not([type="radio"]):not(.js-pay-cheque):not(.js-amount-input),
select {
    min-height: var(--control-h);
    box-sizing: border-box;
}
button:not(.btn-action-column):not(.nav-toggle):not(.pay-method-opt),
.btn, .btn--primary, .btn--secondary, .btn--ghost, .btn--danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    padding-top: 0;
    padding-bottom: 0;
}
/* ------------------------------------------------------------------ */

.success {
    padding: 10px 12px;
    margin-bottom: 16px;
    border: 1px solid #166534;
    border-radius: var(--radius-md);
    background: #dcfce7;
    color: #166534;
}

.badge {
    display: inline-block;
    /* padding: 4px 10px; */
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    background: #e2e8f0;
    font-size: 12px;
    color: #1e293b;
}

/* Variantes de statut (ex. années scoutes : active / à venir / archivée). */
.badge.badge-success { background: #dcfce7; color: #166534; }
.badge.badge-info    { background: #dbeafe; color: #1e40af; }
.badge.badge-muted   { background: #e2e8f0; color: var(--c-ghost-text); }
.badge.badge-danger  { background: var(--c-danger-bg); color: #991b1b; }
.badge.badge-warning { background: #fef9c3; color: #854d0e; }

/* Onglets de segmentation du suivi des communications (par origine). */
.comm-origin-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 4px 0 14px;
    border-bottom: 1px solid #e2e8f0;
}
.comm-tab {
    border: 1px solid transparent;
    border-bottom: none;
    background: var(--c-ghost-hover-bg);
    color: var(--c-ghost-text);
    padding: 8px 14px;
    border-radius: var(--radius-md) 8px 0 0;
    cursor: pointer;
    font-size: 14px;
}
.comm-tab.is-active {
    background: #fff;
    color: var(--c-primary);
    border-color: #e2e8f0;
    font-weight: 700;
}

/* Barre d'actions de masse (campagnes : initier / relancer). */
.campaign-mass-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0 16px;
    padding: 10px 12px;
    background: var(--c-ghost-hover-bg);
    border-radius: var(--radius-md);
}
/* Couple date (obligatoire) + heure (facultative) sur une même ligne. */
.datetime-split { display: flex; gap: 8px; align-items: center; }
.datetime-split input[type="date"] { flex: 1 1 auto; }
.datetime-split input[type="time"] { flex: 0 0 auto; width: 110px; }

/* Encart d'information RGPD (finalité/base légale/droits ; données sensibles). */
.rgpd-notice {
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #1e293b;
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin: 0 0 16px;
    font-size: 0.92rem;
    line-height: 1.5;
}
.rgpd-notice ul { margin: 6px 0 0; padding-left: 18px; }
.rgpd-notice li { margin: 2px 0; }
/* Liens simples du bloc seulement : ne pas écraser la couleur des boutons de rôle
   (sinon le texte d'un .btn--primary devient bleu sur fond bleu = illisible). */
.rgpd-notice a:not([class*="btn"]) { color: var(--c-primary); }

/* Grille de cases à cocher (ex. sélection multi-groupes d'une activité). */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px 16px;
    margin-top: 4px;
}
.checkbox-grid .checkbox-row { display: flex; align-items: center; gap: 6px; margin: 0; }
/* Réglages : cases/radios alignés (libellé normal, contrôle non étiré). */
.form-vertical .checkbox-row { display: flex; align-items: center; gap: 8px; font-weight: normal; margin: 6px 0; }
.form-vertical .checkbox-row input { width: auto; flex: none; margin: 0; }
/* Hub Réglages : grille de cartes d'action. */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.settings-card { display: block; padding: 18px; border-radius: var(--radius-lg); background: #fff; border: 1px solid #e2e8f0; text-decoration: none; color: #222; transition: transform .12s ease, box-shadow .12s ease; }
.settings-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(31, 60, 136, .15); }
.settings-card h3 { margin: 0 0 6px; font-size: 16px; color: var(--c-primary); }
.settings-card-ico { margin-right: 6px; }
.settings-card p { margin: 0; font-size: 13px; color: var(--c-neutral); }
/* Profil : édition en ligne du nom. */
.profile-name-cell { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-name-edit-btn { padding: 2px 8px; font-size: 0.85rem; }
.profile-name-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.profile-name-form input { width: auto; flex: 0 1 160px; }
/* Badges d'état (configuration HelloAsso) : vert = configuré, orange = à faire. */
.scope-badge.scope-badge--ok { background: #dcfce7; color: #166534; }
.scope-badge.scope-badge--warn { background: #ffedd5; color: #9a3412; }
/* Picto dans un onglet (ex. Gmail). */
.document-tab-button .tab-ico { vertical-align: middle; margin-right: 4px; }
/* Bandeau d'alerte rouge (ex. solution de paiement désactivée). */
.alert-banner-danger { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-md); background: #fef2f2; border: 1px solid #fecaca; color: var(--c-danger); font-size: 0.95rem; }
/* Combo de recherche de district (accueil super-admin). */
.district-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; max-width: 540px; }
.district-search-input { flex: 1 1 280px; }

/* Neutralise les marges propres des libellés/aides pour aligner « Tout sélectionner »
   et le compteur sur la même ligne médiane que les boutons. */
.campaign-mass-toolbar .checkbox-row,
.campaign-mass-toolbar .communication-help {
    margin: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.campaign-mass-toolbar .checkbox-row input { margin: 0 6px 0 0; }

.error {
    background: var(--c-danger-bg);
    color: #991b1b;
    padding: 12px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.muted {
    color: var(--c-neutral);
}

code {
    background: #eef2ff;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    table-layout: fixed;
}

th,
td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
    word-wrap: break-word;
}

th {
    width: 30%;
}

table.Th70Td30 th {
    width:70%;
}

.action_naviguation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--btn-gap);        /* espacement homogène (remplace les &nbsp;) */
    margin: 0;
    padding-top: 0;
}
.action_naviguation_right {
    text-align: right;
    padding-top: 0px;
    margin: 0;                 /* neutralise les marges UA du <p> conteneur */
}
/* Dans un en-tête de section, aligner verticalement les actions (ex. icône PDF + bouton). */
.section-header .action_naviguation_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--btn-gap);
}
.action_naviguation_left {
    text-align: left;
    padding-top: 0px;
    margin: 0;                 /* neutralise les marges UA du <p> conteneur */
}

.section-header {
    border: 4px solid var(--c-primary);
    border-bottom: 1px solid var(--c-primary);
    border-right: 1px solid var(--c-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;            /* « top » était invalide (→ stretch) : titre + actions centrés */
    margin-top: 10px;
    margin-bottom: 16px;            /* espace systématique sous le titre (le contenu ne colle plus) */
    background-color: #efefef;
    padding: 12px 15px;
    gap: 12px;
    border-radius: var(--radius-md) 0 15px 0;
    box-shadow: 0 2px 5px #b9b9b9;
}

.section-footer {
    border: 1px solid var(--c-neutral);
    display: flex;
    justify-content: space-between;
    align-items: center;            /* idem : « top » invalide */
    margin-top: 10px;
    background-color: #f1f0f0;
    padding: 12px 15px;
    margin-top:25px;
    gap: 12px;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 5px var(--c-neutral);
    text-align:center;
}


/* Titres d'en-tête : marges neutralisées pour que `.section-header` seul s'aligne
   exactement comme `.section-header.page-title-row` (la 2ᵉ classe n'est
   plus qu'un alias — l'alignement vertical est désormais porté par le conteneur). */
.section-header h1,
.section-header h2 {
    margin: 0;
}
.section-header h3 {
    padding-top:8px;
}
.section-header h3,
.section-header h4 {
    margin: 0;
    color: var(--c-primary);
}

.section-header .btn {
    white-space: nowrap;
}

label.required {
    font-weight: 600;
}
label.required::after {
    content: "*";
    color: #e11d48; /* rouge plus doux */
    margin-left: 4px;
    font-size: 1.1em;
}

/* Marqueur « document obligatoire » (astérisque rouge) hors label de formulaire. */
.required-mark {
    color: #e11d48;
    font-weight: 700;
    margin-left: 3px;
    /* Astérisque « obligatoire » agrandie (~×2) pour être bien visible, sans casser
       la hauteur de ligne. */
    font-size: 1.7em;
    line-height: 0;
    vertical-align: middle;
}
/* Lien « N à fournir » (documents obligatoires dus) sur la fiche activité parent :
   alerte rouge soulignée, cliquable vers la page de dépôt. */
.doc-todo-link {
    color: #e11d48;
    font-weight: 600;
    text-decoration: underline;
}
/* Formulaire de génération de la trousse de camp : options sur des lignes distinctes. */
/* Fieldset « Contenu » : 10px d'espace au-dessus et en dessous. */
.campkit-generate-form fieldset { border: 1px solid #e2e8f0; border-radius: var(--radius-md); padding: 8px 12px; margin: 10px 0; }
.campkit-generate-form legend { color: #555; padding: 0 4px; }
.campkit-radio { display: block; margin: 4px 0; }
/* Actions de la trousse : on réutilise le composant existant .admin-family-actions
   (flex nowrap, en RANGÉE) + .btn-action-column (fond bleu clair du thème). */
/* Mot de passe d'ouverture + bouton « Générer » sur la MÊME ligne (champ qui s'étire,
   bouton aligné en bas) ; espace au-dessus. Repli en colonne sur petit écran. */
.campkit-pw-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.campkit-pw-row .campkit-pw-input { flex: 1 1 240px; }
/* Mobile (trousse) : enrichissement masqué (récupération seule) ; note d'info affichée. */
/* Formulaire d'ajout de document de compte : contrôles + bouton alignés en bas. */
.userdoc-upload { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.account-activation { border: 1px solid #e2e8f0; border-radius: var(--radius-md, 8px); padding: 10px 14px; margin: 4px 0 16px; }
.account-activation-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.account-activation-detail { color: var(--c-ghost-text); font-size: 0.85rem; }
.account-activation-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.campkit-nopass-row { margin-top: 8px; }
.campkit-generate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.campkit-generate-top { padding-top: 10px; }
.campkit-select-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.campkit-select-row > .field { flex: 1 1 260px; min-width: 0; }
.campkit-doc-cards { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 820px) { .campkit-doc-cards { grid-template-columns: 1fr; } }
.campkit-doc-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid #e2e8f0; border-radius: var(--radius-md, 8px); padding: 12px 14px; }
.campkit-doc-card .campkit-doc-actions { margin-top: auto; padding-top: 4px; }
.campkit-doc-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.campkit-doc-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; border: 1px solid #e2e8f0; border-radius: var(--radius-md, 8px); padding: 10px 14px; }
.campkit-doc-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campkit-doc-main strong { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.campkit-doc-meta { color: var(--c-ghost-text); }
.campkit-doc-count { margin-left: 8px; font-size: 0.85em; }

/* Suivi des frais (onglet Frais d'une activité) */
.expense-gauge { margin: 12px 0 4px; }
.expense-gauge-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.expense-gauge-track { height: 16px; background: #e2e8f0; border-radius: var(--radius-pill); overflow: hidden; }
.expense-gauge-fill { height: 100%; border-radius: var(--radius-pill); transition: width .3s ease; background: #16a34a; }
.expense-gauge.is-warn .expense-gauge-fill { background: #f59e0b; }
.expense-gauge.is-over .expense-gauge-fill { background: #dc2626; }
.expense-gauge.is-nobudget .expense-gauge-fill { background: #94a3b8; }
.expense-gauge-foot { color: var(--c-ghost-text); font-size: 0.9em; margin-top: 6px; }
.expense-gauge.is-over .expense-gauge-foot { color: var(--c-danger); font-weight: 600; }

.expense-budget-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 10px 0 18px; }
.expense-budget-form label { display: block; font-size: 0.9em; margin-bottom: 4px; }
.expense-budget-form input { max-width: 160px; }

.expense-breakdown { margin: 8px 0 18px; display: grid; gap: 6px; }
.expense-cat-row { display: grid; grid-template-columns: 120px 1fr 90px; align-items: center; gap: 10px; }
.expense-cat-bar { background: #e2e8f0; border-radius: var(--radius-pill); height: 10px; overflow: hidden; }
.expense-cat-bar > span { display: block; height: 100%; background: var(--c-primary); border-radius: var(--radius-pill); }
.expense-cat-val { text-align: right; white-space: nowrap; }

.expense-add-form { max-width: 760px; border: 1px solid #e2e8f0; border-radius: var(--radius-md, 8px); padding: 14px 16px; margin: 6px auto 18px; }
.expense-add-row { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 10px; }
.expense-add-row .field { flex: 1 1 150px; }
.expense-add-row .field.expense-grow { flex: 3 1 240px; }
.expense-add-row .field.expense-w-amount { flex: 0 1 130px; }
.expense-add-row .field.expense-w-date { flex: 0 1 170px; }
.expense-add-form label { display: block; font-size: 0.9em; margin-bottom: 4px; }
.expense-add-form input, .expense-add-form select { width: 100%; }
.expense-add-form input[type="file"] { font-size: 0.9em; }
.expense-noreceipt { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.9em; }
.expense-noreceipt input { width: auto; }
@media (max-width: 600px) { .expense-add-row .field { flex-basis: 100%; } }
/* Justificatifs listés dans la ligne de frais : puces cliquables + suppression. */
.expense-receipts-cell { white-space: normal; }
.expense-receipt-chip { display: inline-flex; align-items: center; gap: 2px; margin: 0 6px 4px 0; }
.expense-receipt-del { border: 0; background: none; color: var(--c-danger); cursor: pointer; font-size: 0.85em; padding: 0 2px; }
/* Popin justificatifs (aperçu in-app) : <dialog> + iframe. */
/* Traçabilité alimentaire (denrées + numéros de lot) — mise en page empilée, mobile-friendly. */
/* Onglet Budget : dépenses avancées par personne + statut RIB. */
.rib-ok { display: inline-flex; align-items: center; gap: 6px; color: #166534; font-weight: 600; }
.rib-ok input { accent-color: #16a34a; width: 16px; height: 16px; }
.rib-upload-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.rib-upload-form input[type="file"] { max-width: 200px; min-width: 0; font-size: 13px; }
/* IBAN partiellement masqué (seule forme affichée par défaut) + révélation tracée. */
.rib-masked { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; white-space: nowrap; }
.rib-revealed { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #166534; margin-top: 4px; }
.rib-reveal-form { display: inline-flex; margin: 0 0 0 6px; }
/* Flux de texte normal : un conteneur flex ferait de chaque <strong> et du bouton
   une rangée à part, cassant la phrase. Le bouton respire via sa marge. */
.rib-status { line-height: 1.6; }
.rib-status .btn--primary, .rib-status .btn--ghost { margin-left: 8px; vertical-align: middle; }
.rib-status--missing { color: #92400e; }
.rib-status--ok { color: #166534; }
.rib-form { max-width: 520px; }
/* Popups de décision (remboursement / rejet) : bloc de notification e-mail. */
.expense-notify { border-top: 1px solid #e2e8f0; margin-top: 12px; padding-top: 10px; }
.expense-notify .field { margin-top: 8px; }
.expense-notify-body { width: 100%; font-family: inherit; font-size: 14px; }
.payer-amount { display: inline-flex; align-items: center; gap: 8px; }
.payer-detail-body { padding: 8px 16px 16px; }
.payer-detail-body table { margin: 0; }
.payer-detail-amount { text-align: right; white-space: nowrap; }
.payer-detail-dialog { width: min(680px, 94vw); }
/* Toast global des retours d'action AJAX (transitions de statut, actions de ligne). */
.ajax-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--c-primary); color: #fff; padding: 10px 18px; border-radius: var(--radius-md); box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 9999; max-width: 90vw; }
.ajax-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ajax-toast.is-error { background: var(--c-danger); }

/* Popup de choix/ordre des colonnes d'export. */
.export-dialog { width: min(460px, 94vw); }
.export-dialog-body { padding: 10px 16px; }
.export-col-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 52vh; overflow: auto; }
.export-col { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px; border-top: 1px solid #e2e8f0; }
.export-col-check { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.export-col-check input { accent-color: var(--c-primary); width: 16px; height: 16px; }
.export-col-move { display: flex; gap: 6px; flex: 0 0 auto; }
.export-dialog-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid #e2e8f0; }
.export-dialog-spacer { flex: 1 1 auto; }
/* Onglet Remboursements : colonne actions + popup de remboursement sélectif. */
.reimbursement-table td.col-main, .reimbursement-table th:first-child { min-width: 210px; }
.reimbursement-table td.col-actions { white-space: nowrap; }
.reimburse-actions { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; }
.reimburse-actions form { margin: 0; }
.reimburse-dialog { width: min(560px, 94vw); }
.reimburse-dialog form { margin: 0; }
.reimburse-dialog-body { padding: 12px 16px; }
.reimburse-dialog-fields { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.reimburse-pick-help { margin: 4px 0 8px; font-weight: 600; color: #334155; }
.reimburse-pick-list { list-style: none; margin: 0; padding: 0; max-height: 44vh; overflow: auto; }
.reimburse-pick-list li { border-top: 1px solid #e2e8f0; }
.reimburse-pick { display: flex; align-items: center; gap: 10px; padding: 8px 2px; cursor: pointer; }
.reimburse-pick input { accent-color: #16a34a; width: 16px; height: 16px; flex: 0 0 auto; }
.reimburse-pick-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.reimburse-pick-amount { flex: 0 0 auto; white-space: nowrap; font-weight: 600; }
.reimburse-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid #e2e8f0; }
.ft-receipt-actions { display: flex; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
.ft-receipt-actions form { margin: 0; }
.ft-ticket-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; }
.ft-ticket-picker select { min-width: 240px; max-width: 100%; }
.ft-archived-note { margin-top: 10px; color: var(--c-neutral); }
.foodtrace-add { display: flex; gap: 10px; margin: 6px 0 16px; max-width: 640px; }
.foodtrace-add input { flex: 1 1 auto; min-width: 0; }
.foodtrace-list { list-style: none; margin: 0; padding: 0; }
.ft-item { padding: 12px 0; border-bottom: 1px solid #e2e8f0; }
.ft-head { display: flex; gap: 8px; align-items: center; }
.ft-rename { display: flex; gap: 6px; align-items: center; flex: 1 1 auto; min-width: 0; margin: 0; }
.ft-rename input { flex: 1 1 auto; min-width: 0; }
.ft-lots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.ft-lots-label { font-size: 13px; color: var(--c-neutral); }
.lot-chip { display: inline-flex; align-items: center; gap: 4px; background: #e0e7ff; color: #1e3a8a; border-radius: var(--radius-lg); padding: 3px 6px 3px 12px; font-size: 14px; }
.lot-chip form { display: inline; margin: 0; }
.lot-chip button { background: none; border: 0; cursor: pointer; color: #1e3a8a; font-size: 14px; line-height: 1; padding: 0 2px; }
.ft-addlot { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.ft-addlot input { width: 150px; }
.ft-rename input.is-saved { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22, 163, 74, .25); }
.foodtrace-msg { margin: 8px 0 14px; padding: 8px 12px; border-radius: var(--radius-sm); background: #dcfce7; color: #166534; }
.foodtrace-msg.is-error { background: var(--c-danger-bg); color: #991b1b; }
.campkit-camp-picker { display: flex; align-items: center; }
.campkit-camp-switch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.campkit-camp-switch select { min-width: 240px; }
.campkit-camp-current { margin: 0; }
.special-functions-grid { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.special-function-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: var(--radius-md); cursor: pointer; }
.special-function-item input { margin: 0; }
.expense-receipts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; height: 30px; padding: 0 12px; border: 1px solid var(--c-primary); border-radius: var(--radius-sm); background: #dbeafe; color: var(--c-primary); font-size: 15px; line-height: 1; cursor: pointer; white-space: nowrap; }
.expense-receipts-btn:hover { background: #bfdbfe; }
.app-dialog { width: min(900px, 94vw); max-width: 94vw; border: 0; border-radius: var(--radius-md); padding: 0; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.app-dialog::backdrop { background: rgba(0,0,0,.45); }
.app-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e2e8f0; }
.app-dialog-head strong { color: var(--c-primary); }
.app-dialog-close { border: 0; background: none; font-size: 1.15em; cursor: pointer; line-height: 1; }
.app-dialog-list { list-style: none; margin: 0; padding: 8px 16px; display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow: auto; }
.app-dialog-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.app-dialog-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-dialog-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.app-dialog-frame { width: 100%; height: 62vh; border: 0; border-top: 1px solid #e2e8f0; background: #f8fafc; }

/* Bascule entre deux vues d'une même liste (« ouvertes » / « archivées ») : un
   interrupteur encadré de ses deux libellés, celui en vigueur mis en avant. Le
   changement soumet le formulaire GET qui l'entoure. */
.list-switch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; }
.list-switch__label { color: var(--c-neutral); font-size: .92rem; }
.list-switch__label.is-active { color: var(--c-primary); font-weight: 700; }
.list-switch__control { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.list-switch__control input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.list-switch__track { display: block; width: 46px; height: 26px; border-radius: var(--radius-pill); background: var(--c-ghost-border); transition: background .15s ease; }
.list-switch__thumb { display: block; width: 20px; height: 20px; margin: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .35); transition: transform .15s ease; }
.list-switch__control input:checked + .list-switch__track { background: var(--c-primary); }
.list-switch__control input:checked + .list-switch__track .list-switch__thumb { transform: translateX(20px); }
.list-switch__control input:focus-visible + .list-switch__track { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* Détail d'une demande d'attestation : en-tête fixe (titre + croix), corps qui défile
   si besoin, pied d'actions. La popup est rendue HORS du tableau : dans une cellule,
   elle hériterait du `white-space: nowrap` et de l'alignement de la colonne d'actions,
   ce qui la faisait déborder en largeur. */
.claim-dialog {
    width: min(540px, calc(100vw - 32px));
    max-height: min(86vh, 760px);
    border: 0; border-radius: var(--radius-lg); padding: 0;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .35);
    /* Neutralise tout héritage de contexte (table, cellule d'actions). */
    white-space: normal; text-align: left; overflow: hidden;
}
.claim-dialog[open] { display: flex; flex-direction: column; }
.claim-dialog::backdrop { background: rgba(15, 23, 42, .5); }
.claim-dialog__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; flex-shrink: 0;
}
.claim-dialog__head h3 { margin: 0; color: var(--c-primary); font-size: 1.05rem; }
.claim-dialog__close {
    border: 0; background: none; color: var(--c-neutral); font-size: 1.6rem; line-height: 1;
    padding: 0 4px; cursor: pointer;
}
.claim-dialog__close:hover { color: var(--c-primary); }
.claim-dialog__body { padding: 16px 18px; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; }
.claim-dialog__body p { margin: 0 0 12px; }
.claim-dialog__body textarea { width: 100%; box-sizing: border-box; }
.claim-dialog__sub { color: var(--c-ghost-text); font-size: .92rem; }
.claim-dialog__form { margin-top: 16px; }
.claim-dialog__foot {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px;
    padding: 12px 18px; border-top: 1px solid #e2e8f0; background: #f8fafc; flex-shrink: 0;
}
.claim-dialog__foot form { margin: 0; }
.claim-reason { padding: 10px 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-sm); color: #991b1b; }
/* Mobile : l'iframe PDF reste blanche → on la masque, l'aperçu 👁 ouvre un onglet. */
@media (max-width: 640px) { .app-dialog-frame { display: none; } }

/* Pointage des présences : boutons Présent/Absent/Excusé (AJAX) + motif. */
.att-cell { white-space: nowrap; }
.att-btns { display: inline-flex; align-items: center; gap: 4px; }
.att-btn { border: 1px solid var(--c-ghost-border); background: #fff; color: #334155; border-radius: var(--radius-sm); padding: 3px 10px; cursor: pointer; font-size: 0.88em; }
.att-btn:hover { background: var(--c-ghost-hover-bg); }
.att-btn.is-active.att-present { background: #16a34a; border-color: #16a34a; color: #fff; }
.att-btn.is-active.att-absent  { background: #dc2626; border-color: #dc2626; color: #fff; }
.att-btn.is-active.att-excused { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.att-saved { color: #16a34a; font-size: 0.82em; margin-left: 4px; }
.att-reason { display: block; margin-top: 6px; width: 240px; max-width: 100%; }
/* Justificatifs existants dans le formulaire d'édition (supprimables). */
.expense-edit-receipts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.expense-edit-receipts-label { font-weight: 600; font-size: 0.9em; }
@media (max-width: 640px) {
    .expense-cat-row { grid-template-columns: 90px 1fr 80px; }
}
.campkit-doc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.campkit-diff-list { margin: 6px 0 10px 20px; padding: 0; }
.campkit-diff-list li { margin: 2px 0; }
.campkit-mobile-only { display: none; }
@media (max-width: 640px) {
    .campkit-web-only { display: none !important; }
    .campkit-mobile-only { display: block; }
}
/* Libellé d'un document FACULTATIF : gris foncé (atténué) plutôt que noir, au lieu
   d'une pastille. Posé sur le titre du document (strong/h2/label). */
.doc-optional-label {
    color: #94a3b8;
    font-weight: 600;
}
/* Indice « document conditionnel » (ex. Protocole PAI = enfants avec PAI uniquement) :
   petite pastille ambrée sous le libellé du type, dans le choix des documents. */
.doc-condition-tag {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: var(--radius-pill, 999px);
    background: #fef3c7;
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 600;
}
/* Interrupteur Obligatoire/Facultatif dans les formulaires de campagne. */
.doc-optional-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--c-neutral);
}

input:invalid,
textarea:invalid,
select:invalid {
    /* border-color:#fd8e62; /* rouge */
    background-color: #f8f0f0; /* léger fond rose */
}

input:valid,
textarea:valid,
select:valid {
    border-color:#054b1f; /* vert */
    background-color: #f8fcf5; /* léger fond vert */
}
.checkbox-field label {
    display: inline-block;
    margin-right: 18px;
    font-weight: normal;
}

.DevInProgress {
    opacity: 0.75;
}

/* Badge de rôle compact dans le layout (3 passes consolidées — résultat identique). */
.user-info .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 26px;
    padding: 2px 7px;
    font-size: 0.68rem;
    line-height: 1.05;
}

.inline-action-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

button.btn-action-column {
    cursor: pointer;
}
/* .btn-action-disabled : défini une seule fois dans tables.css (évite le doublon
   et la guerre de spécificité avec !important). */

.pending-status {
    color: inherit;
    font-weight: normal;
    font-size: 0.92em;
}

/* Badge de portée d'une activité (district / groupe / unité). */
.scope-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.72em;
    font-weight: 600;
    line-height: 1.6;
    vertical-align: middle;
    white-space: nowrap;
}
.scope-badge.scope-district  { background: #e0e7ff; color: var(--c-primary); }
.scope-badge.scope-group     { background: #d1fae5; color: #065f46; }
.scope-badge.scope-unit      { background: #fef3c7; color: #92400e; }
.scope-badge.scope-mandatory { background: var(--c-danger-bg); color: #991b1b; }

/* Boutons pictos d'export (Excel / PDF) */
.admin-export-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.admin-export-label {
    min-width: 180px;
    font-weight: 600;
    color: var(--c-primary);
}
.btn-picto {
    border: 1px solid var(--c-ghost-border);
    background: #fff;
    border-radius: var(--radius-md);
    width: 42px;
    height: 38px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-picto:hover { background: var(--c-ghost-hover-bg); }
.btn-picto svg { display: block; }

/* Import paramétré — IHM de mapping */
.import-field-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.import-field { border: 1px solid #e2e8f0; border-radius: var(--radius-lg); padding: 12px 14px; background: #fff; }
.import-field-head { margin-bottom: 6px; }
.import-field-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* width auto : sinon le width:100% global empilerait les contrôles. */
.import-field-controls select, .import-field-controls input[type="text"] { width: auto; min-width: 200px; flex: 0 1 auto; }
.import-field-controls .js-mode { min-width: 170px; }
.import-recode { margin-top: 8px; }
.import-recode > summary { cursor: pointer; font-size: .9em; color: var(--c-primary); }
.import-recode-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.import-recode-row input { flex: 1; min-width: 120px; }
.import-recode-row > span { color: var(--c-neutral); }
/* Aperçus d'import : scroll horizontal, toutes les colonnes visibles. */
.import-scroll { overflow-x: auto; }
.import-scroll table { table-layout: auto; width: auto; min-width: 100%; }
.import-scroll th, .import-scroll td { white-space: nowrap; }

/* Campagnes : bouton « téléverser » carré dans le bandeau famille + popin d'upload. */
.doc-upload-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    background: var(--c-primary);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.doc-upload-btn:hover { background: var(--c-primary-hover); }
.upload-dialog { border: 1px solid var(--c-ghost-border); border-radius: var(--radius-lg); padding: 20px 24px; max-width: 560px; width: 92%; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.upload-dialog::backdrop { background: rgba(15,23,42,.45); }
.upload-dialog .communication-help { margin-bottom: 25px; }
.upload-dialog .field { margin-bottom: 4px; }
/* Aération entre documents demandés dans la popin. */
.upload-dialog .field + .field { padding-top: 18px; margin-top: 14px; border-top: 1px solid #e2e8f0; }
/* Regroupement par enfant (familles de 2 enfants ou +). */
.upload-child-fieldset { border: 1px solid #e2e8f0; border-radius: var(--radius-md); padding: 0; margin: 0 0 12px; }
.upload-child-fieldset > details > summary { cursor: pointer; padding: 10px 12px; font-weight: 600; color: var(--c-primary); list-style-position: inside; }
.upload-child-fieldset > details[open] > summary { border-bottom: 1px solid #e2e8f0; margin-bottom: 8px; }
.upload-child-fieldset > details { padding: 0; }
.upload-child-fieldset .field { padding: 0 12px; }
.upload-child-fieldset .field + .field { padding-top: 12px; margin-top: 10px; }

/* Montant de paiement (onglet Paiements) : aligné à droite avec les actions,
   stylé en « chip » à la même hauteur que les boutons (lecture comme édition). */
.document-payment-line .document-line-actions { align-items: center; gap: 4px; }
.payment-amount {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    height: 30px;
    min-width: 72px;
    padding: 0 10px;
    margin-right: 4px;
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    font-weight: 600;
    color: var(--c-primary);
    white-space: nowrap;
    box-sizing: border-box;
}
/* Paiement validé : montant en vert foncé sur fond vert clair, bordure verte. */
.document-payment-line[data-doc-status="validated"] .payment-amount {
    border-color: #16a34a;
    background: #dcfce7;
    color: #166534;
}
/* Ligne validée : on masque l'édition du montant et le formulaire de validation
   (pictos + ✓). Piloté par data-doc-status → si le paiement est annulé (retour à
   « À demander »), les contrôles réapparaissent automatiquement. */
.document-payment-line[data-doc-status="validated"] .js-edit-amount,
.document-payment-line[data-doc-status="validated"] .payment-validate-form {
    display: none;
}
.js-amount-input {
    height: 30px;
    width: 96px;
    min-width: 88px;
    padding: 0 8px 0 12px;
    margin-right: 4px;
    border: 1px solid var(--c-ghost-text);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    text-align: right;
    font-weight: 600;
    color: var(--c-primary);
}

/* Moyen de paiement (onglet Paiements) : 3 pictos carrés alignés sur les boutons
   d'action. Inactif = fond gris clair + bordure gris foncé ; actif = fond vert clair
   + bordure verte (bordure unifiée 1px). Le champ « N° chèque » (≥60px) se glisse
   juste à droite du picto chèque quand il est actif et reprend le style des montants. */
.payment-validate-form { display: inline-flex; align-items: center; gap: 4px; }
.payment-validate-form .btn-action-column { margin: 0; }
.pay-method-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--c-ghost-text);
    border-radius: var(--radius-sm);
    background: #eef2f6;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: background .12s ease, border-color .12s ease;
}
.pay-method-opt:hover { background: #e2e8f0; }
.pay-method-opt.is-active {
    background: #dcfce7;
    border-color: #16a34a;
}
/* Respiration de part et d'autre du trio de moyens (gauche du chèque, droite du virement). */
.pay-method-opt[data-method="cheque"] { margin-left: 20px; }
.pay-method-opt[data-method="transfer"] { margin-right: 20px; }
.js-pay-cheque {
    height: 30px;
    min-width: 120px;
    width: 128px;
    padding: 0 8px;
    margin: 0;
    border: 1px solid var(--c-ghost-text);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    font-weight: 600;
    color: var(--c-primary);
}
.js-pay-cheque::placeholder { font-weight: 400; color: #94a3b8; }
/* Focus discret (bordure bleue 1px + léger halo) au lieu de l'outline 2px par défaut. */
.js-pay-cheque:focus,
.js-amount-input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px rgba(31, 60, 136, .15);
}

/* Badge « Version Beta » : en-tête, juste à gauche du badge profil, même épaisseur. */
.beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 2px 10px;
    border-radius: var(--radius-lg);
    background: #f59e0b;
    color: #1f2937;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.05;
    white-space: nowrap;
}

/* Photo de l'enfant (fiche enfant) — image de mineur, servie via route authentifiée. */
.child-photo-row { display: flex; align-items: center; gap: 18px; margin: 8px 0 14px; padding-top: 10px; flex-wrap: nowrap; }
.child-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--c-ghost-border); background: var(--c-ghost-hover-bg); flex: 0 0 auto; }
.child-photo-ph { display: inline-flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: #fff; background: var(--c-primary); border: none; }
.child-photo-ph--boy { background: #2563eb; }
.child-photo-ph--girl { background: #be5a86; }
.child-photo-actions { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.child-photo-form { display: flex; flex-direction: row; gap: 8px; align-items: center; margin: 0; }
.child-photo-form input { width: 250px; max-width: 100%; }
.child-photo-btn { width: auto; }
.child-photo-note { margin: 2px 0 0; }

/* Cachet du groupe (configuration) : le PNG est transparent, d'où le fond blanc et le
   cadre léger — sans eux, l'encre paraîtrait flotter dans la page. */
.group-stamp-preview { width: 220px; height: auto; flex: 0 0 auto; padding: 6px; background: #fff; border: 1px solid var(--c-ghost-border); border-radius: var(--radius-xs); }
/* Aperçu du logo : damier discret, pour qu'un fond transparent se voie comme tel
   plutôt que de se confondre avec le blanc de la page. */
.group-logo-preview {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--c-ghost-border);
    border-radius: var(--radius-xs);
    background: #fff repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}
.group-logo-preview img { width: 110px; height: 110px; object-fit: contain; display: block; }

/* Fiche activité parent : ligne Période avec menu « Ajouter à mon calendrier ». */
.period-cell { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cal-menu { position: relative; display: inline-block; }
.cal-menu > summary { list-style: none; cursor: pointer; }
.cal-menu > summary::-webkit-details-marker { display: none; }
.cal-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--c-primary); border-radius: var(--radius-md); color: var(--c-primary); background: #fff; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.cal-add-btn:hover { background: #dbeafe; }
.cal-add-btn svg { display: block; }
.cal-menu-panel { position: absolute; right: 0; z-index: 20; margin-top: 4px; min-width: 190px; background: #fff; border: 1px solid var(--c-ghost-border); border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(15, 23, 42, .18); overflow: hidden; }
.cal-menu-panel a { display: block; padding: 9px 14px; color: var(--c-primary); text-decoration: none; font-size: 0.9rem; }
.cal-menu-panel a:hover { background: #eff4ff; }
.cal-menu-panel a + a { border-top: 1px solid #eef2f7; }

/* Fiche activité parent : colonne Statut réduite à son contenu. */
.simple-list-table th.col-status, .simple-list-table td.col-status { width: 1%; }
.absence-justif-link { margin-left: 8px; font-size: 0.85rem; white-space: nowrap; }

/* Popin de signalement d'absence (motif + justificatif). */
.absence-dialog { border: none; border-radius: var(--radius-lg); padding: 0; max-width: 460px; width: 90vw; box-shadow: 0 10px 40px rgba(15, 23, 42, .3); }
.absence-dialog form { padding: 20px; text-align: left; } /* annule le text-align:right hérité du td.col-actions */
.absence-dialog h3 { margin: 0 0 18px; color: var(--c-primary); text-align: center; }
.absence-dialog .field label { font-weight: normal; }
.absence-dialog .section-footer { margin-top: 16px; }
.absence-dialog::backdrop { background: rgba(15, 23, 42, .45); }

/* Documents parent : un fieldset repliable par enfant (titre = prénom). */
.doc-child-group { border: 1px solid var(--c-ghost-border); border-radius: var(--radius-lg); margin-bottom: 14px; background: #fff; }
.doc-child-summary { cursor: pointer; padding: 12px 16px; font-size: 1.15rem; font-weight: 700; color: var(--c-primary); }
.doc-child-group[open] > .doc-child-summary { border-bottom: 1px solid #e2e8f0; }
.doc-child-group > .document-parent-list { padding: 14px 16px; }

/* Barre de filtres d'un onglet campagne (statut + masquer les validés). */
.campaign-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0 0 12px; padding: 8px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--radius-md); }
.filter-inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--c-ghost-text); }
.filter-inline select { font-weight: normal; }

/* Onglet Statistiques d'une campagne : 2 camemberts côte à côte + légende. */
.stats-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 8px; }
.stats-card { flex: 1 1 280px; min-width: 260px; text-align: center; border: 1px solid #e2e8f0; border-radius: var(--radius-lg); padding: 16px; background: #fff; }
.stats-card h3 { margin: 0 0 10px; color: var(--c-primary); }
.stats-pie { max-width: 200px; margin: 0 auto; }
.stats-pie svg { width: 100%; height: auto; display: block; }
.stats-rate { margin: 12px 0 6px; font-size: 1.02rem; color: var(--c-ghost-text); }
.stats-rate strong { color: #16a34a; font-size: 1.35rem; }
.stats-rate-sub { color: var(--c-neutral); font-size: 0.9rem; }
.stats-legend { list-style: none; margin: 8px auto 0; padding: 0; display: inline-block; text-align: left; }
.stats-legend li { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 0.92rem; }
.stats-legend-label { flex: 1 1 auto; }
.stats-legend-val { color: var(--c-neutral); white-space: nowrap; }
.stats-dot { width: 12px; height: 12px; flex: 0 0 auto; }

/* Liste ordonnable des fichiers sélectionnés (input multiple) : voir/réordonner
   avant fusion. Les boutons ↑/↓/✕ réutilisent .btn-action-column (compacts). */
.file-order-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.file-order-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid #e2e8f0; border-radius: var(--radius-sm); background: #f8fafc; }
.file-order-pos { font-weight: 700; color: var(--c-primary); min-width: 18px; }
.file-order-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.file-order-ctrls { display: flex; gap: 4px; flex: 0 0 auto; }
.file-order-hint { margin: 6px 0 0; }

/* Glisser-déposer de fichiers : surbrillance de la zone (input file ou son .field). */
.is-dragover {
    outline: 2px dashed var(--c-primary);
    outline-offset: 2px;
    background: #eff4ff;
    border-radius: var(--btn-radius);
}

/* Éditeur de documents légaux (super-admin). */
.legal-editor { font-family: "Courier New", monospace; font-size: 12px; line-height: 1.4; min-height: 220px; }
.legal-preview { border: 1px solid #e2e8f0; border-radius: var(--radius-md); padding: 12px 16px; background: #fff; }

/* Éditeur légal à onglets (Modifier / Aperçu live) — un bloc par document. */
.legal-doc { margin: 8px 0 20px; }
.legal-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid #e2e8f0; margin: 6px 0 14px; }
.legal-tab { padding: 9px 16px; cursor: pointer; border: 1px solid transparent; border-bottom: none; border-radius: var(--radius-md) 10px 0 0; background: var(--c-ghost-hover-bg); color: var(--c-ghost-text); font-weight: 600; font-size: 14px; }
.legal-tab:hover { background: #e8eef6; }
.legal-tab.is-active { background: #fff; color: var(--c-primary); border-color: #e2e8f0; box-shadow: inset 0 -3px 0 var(--c-primary); }
.legal-panel { display: none; }
.legal-panel.is-active { display: block; }
.legal-preview-empty { color: #94a3b8; font-style: italic; }
.legal-save-status { margin-left: 10px; font-weight: 600; }
.legal-save-status.is-ok { color: #15803d; }
.legal-save-status.is-error { color: var(--c-danger); }

/* Page « Dernier déploiement » (super-admin). */
.deploy-tests { display: flex; flex-direction: column; gap: 8px; }
.deploy-test { border: 1px solid #e2e8f0; border-radius: var(--radius-md); padding: 8px 12px; background: #fff; }
.deploy-test > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deploy-test-name { font-weight: 600; }
.deploy-test-summary { color: var(--c-neutral); font-size: 13px; }
.deploy-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; white-space: nowrap; }
.deploy-badge.is-ok { background: #dcfce7; color: #166534; }
.deploy-badge.is-fail { background: var(--c-danger-bg); color: #991b1b; }
.deploy-badge.is-skip { background: var(--c-ghost-hover-bg); color: var(--c-ghost-text); }
.deploy-output { margin: 10px 0 2px; padding: 10px 12px; background: #0f172a; color: #e2e8f0; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.4; overflow-x: auto; white-space: pre-wrap; }

/* Avatar en 1re colonne du tableau Enfants (photo ou initiales). */
.col-child-avatar { width: 46px; text-align: center; }
.child-row-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); color: #fff; font-weight: 700; font-size: 12px; vertical-align: middle; }
.child-row-avatar-photo { background: none; object-fit: cover; }

/* Barre d'état d'une campagne : statut + actions + échéance sur une même ligne. */
.campaign-status-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 10px 0 4px; }
.campaign-status-bar .inline-action-form { margin: 0; }
.campaign-status-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.campaign-due { color: var(--c-ghost-text); }
.campaign-description { margin: 8px 0 0; padding-bottom: 14px; }

/* Liste des enfants ciblés/éligibles d'une campagne en grille multi-colonnes. */
.target-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 8px; }
.target-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #e2e8f0; border-radius: var(--radius-md); padding: 8px 10px; background: #fff; }
.target-card[hidden] { display: none; }
.target-card-name { display: flex; flex-direction: column; min-width: 0; }
.target-card-name strong { overflow-wrap: anywhere; }
.target-card-unit { color: var(--c-neutral); font-size: 0.85em; margin-top: 1px; }

/* Pictogrammes des boutons d'action : display:block supprime l'espace de ligne de
   base sous le SVG, qui décalait le glyphe d'un pixel vers le haut dans le carré. */
.btn-action-column svg, .btn--primary svg, .btn--secondary svg, .btn--ghost svg, .btn--danger svg { display: block; }
.btn--primary svg, .btn--secondary svg, .btn--ghost svg, .btn--danger svg { margin-right: 6px; }

/* Aperçu du rapport quotidien : on montre l'e-mail tel qu'il sera reçu, encadré
   pour le distinguer de l'écran qui l'entoure. Ses tableaux portent leurs styles
   en ligne (les clients de messagerie ignorent les feuilles externes). */
.daily-report-preview { border: 1px solid #e2e8f0; border-radius: var(--radius-md); background: #fff; padding: 14px 18px; overflow-x: auto; }
.daily-report-preview h3 { margin: 18px 0 6px; font-size: 1.05em; }
.daily-report-preview h3:first-child { margin-top: 0; }
.daily-report-preview table { min-width: 320px; }