/*
 * Finance Copro — back-office admin.
 *
 * Charte reprise du site finance-copro.fr : vert de marque pour les actions,
 * bleu nuit pour les surfaces sombres et les titres, boutons en pilule,
 * intitulés de section en capitales espacées. Feuille unique, sans dépendance.
 */

:root {
    /* Marque */
    --vert: #2aa23e;
    --vert-fonce: #1f8531;
    --vert-profond: #0d3b2a;
    --vert-clair: #8ee24e;
    --vert-pale: #eaf6ec;
    --nuit: #16243d;
    --nuit-clair: #24334e;

    /* Texte et surfaces */
    --texte: #16243d;
    --texte-doux: #5f6d80;
    --bordure: #e0e6e2;
    --fond: #f4f7f5;
    --blanc: #fff;

    /* États */
    --bleu: #2f5c9e;
    --bleu-pale: #eaf0f9;
    --orange: #9a5b0b;
    --orange-pale: #fdf1de;
    --rouge: #b3261e;
    --rouge-pale: #fdeceb;
    --gris-pale: #eceff0;
    --violet: #6b3fa0;
    --violet-pale: #f2ecfa;
    --sarcelle: #0f6f74;
    --sarcelle-pale: #e4f2f2;
    --radius: 8px;
    --pilule: 999px;
    --ombre: 0 1px 2px rgb(22 36 61 / 5%), 0 1px 3px rgb(22 36 61 / 8%);
}

* { box-sizing: border-box; }

/* L'attribut hidden gagne TOUJOURS : sans ce garde-fou, toute règle posant un
   display (ex. .formulaire en flex) rend l'élément visible malgré hidden. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.55;
}

a { color: var(--vert-fonce); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 23px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-doux); margin: 0 0 10px; }

/* ── En-tête ─────────────────────────────────────────────── */
.entete {
    background: var(--nuit);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 26px;

    /* Rappel du filet vert qui souligne la baseline du site. */
    border-bottom: 3px solid var(--vert);
}

.entete .marque {
    display: flex; align-items: center; gap: 9px;
    padding: 12px 0; white-space: nowrap;
    color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.entete .marque img { width: 30px; height: 30px; display: block; }
.entete nav { display: flex; gap: 2px; flex: 1; }

.entete nav a {
    color: rgb(255 255 255 / 72%);
    padding: 17px 14px;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    text-decoration: none;
    font-size: 13.5px;
    letter-spacing: .01em;
}
.entete nav a:hover { color: #fff; }
.entete nav a.actif { color: #fff; font-weight: 600; border-bottom-color: var(--vert-clair); }
.entete .compte { color: rgb(255 255 255 / 72%); font-size: 13px; display: flex; align-items: center; gap: 14px; }
.entete .compte a { color: #fff; }

/* Écran étroit : sans ceci l'en-tête (marque + menu + compte) ne rétrécit pas
   et élargit toutes les pages au-delà de l'écran. Le menu passe sur sa ligne
   et défile horizontalement si besoin. */
@media (width <= 640px) {
    .entete { flex-wrap: wrap; gap: 0 16px; padding: 0 16px; }
    .entete .compte { margin-left: auto; }
    .entete nav { order: 3; flex-basis: 100%; overflow-x: auto; }
    .entete nav a { padding: 10px 12px; white-space: nowrap; }
    .conteneur { padding: 16px; }
}

.conteneur { max-width: 1320px; margin: 0 auto; padding: 24px; }

/* ── Titre de page ───────────────────────────────────────── */
.titre-page { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.titre-page .sous-titre { color: var(--texte-doux); }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Onglets ─────────────────────────────────────────────── */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bordure); margin-bottom: 20px; }

.onglets a {
    padding: 9px 16px; color: var(--texte-doux); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.onglets a:hover { color: var(--texte); text-decoration: none; }
.onglets a.actif { color: var(--vert-profond); border-bottom-color: var(--vert); font-weight: 700; }

.onglets .compteur {
    display: inline-block; margin-left: 5px; padding: 0 7px; border-radius: var(--pilule);
    background: var(--gris-pale); color: var(--texte-doux); font-size: 12px; font-weight: 600;
}
.onglets a.actif .compteur { background: var(--vert-pale); color: var(--vert-fonce); }

/* Pastille signalant qu'il reste quelque chose à faire sur cet onglet. */
.onglets .compteur.attention,
.onglets a.actif .compteur.attention { background: var(--orange-pale); color: var(--orange); }

.onglets .compteur.alerte,
.onglets a.actif .compteur.alerte { background: var(--rouge-pale); color: var(--rouge); }

/* Sous-navigation d'une section (ex. Communiquer : envois / à relancer),
   rendue juste sous la barre d'onglets du dossier — plus discrète, sans trait. */
.sous-onglets { border-bottom: 0; margin: -12px 0 16px; }
.sous-onglets a { padding: 6px 12px; font-size: 13px; }

/* ── Détail déplié d'un copropriétaire ───────────────────── */
.cellule-depliant { width: 46px; padding-right: 0 !important; }

.btn-depliant {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; cursor: pointer;
    background: var(--blanc); border: 1px solid var(--bordure); border-radius: 6px;
    color: var(--texte); vertical-align: middle;
}
.btn-depliant svg { transition: transform .15s ease; }
.btn-depliant:hover { background: var(--vert-pale); border-color: var(--vert); color: var(--vert-fonce); }

/* Bouton ouvert : plein, chevron pivoté vers le bas. */
.btn-depliant[aria-expanded="true"] { background: var(--vert); border-color: var(--vert); color: var(--blanc); }
.btn-depliant[aria-expanded="true"] svg { transform: rotate(90deg); }

/* Ligne dépliée : surlignée, soudée à son panneau (le trait entre les deux saute). */
.ligne-ouverte td { background: var(--vert-pale); border-bottom-color: transparent; }
tr.ligne-detail, tbody tr.ligne-detail:hover { background: var(--fond); }

.ligne-detail > td {
    padding: 12px 16px 16px;
    border-left: 3px solid var(--vert);
    border-bottom: 1px solid var(--bordure);
}
.detail-copro { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }

.detail-copro section {
    background: var(--blanc); border: 1px solid var(--bordure);
    border-radius: var(--radius); padding: 12px 14px;

    /* Tous les volets finissent au même bas ; à l'intérieur, les listes
       longues absorbent l'espace au lieu de laisser un trou sous leur volet. */
    display: flex; flex-direction: column;
}

.detail-copro h3 {
    margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--bordure);
    font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--texte-doux);
}
.detail-copro h3:not(:first-child) { margin-top: 16px; }
.detail-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 16px; }
.detail-pieces span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Historique de communication : une entrée = le type (lien vers la trace),
   canal et date en dessous, statut aligné à droite. Défile au-delà de 10aine. */
.detail-envois { list-style: none; margin: 0; padding: 0; }
.detail-envois li { padding: 7px 0; border-bottom: 1px solid var(--bordure); }

/* Même plafond de base (280px) pour l'historique de communication et celui du
   copropriétaire ; la liste peut ensuite s'étendre pour finir au même bas que
   les autres volets, et défile au-delà. */
.detail-copro .detail-envois,
.detail-copro .journal { flex: 1 1 280px; min-height: 0; overflow-y: auto; padding-right: 6px; }
.detail-envois li:last-child { border-bottom: 0; }
.detail-envoi-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.detail-envois a { font-weight: 600; }

/* Un libellé de statut long se replie dans sa pastille au lieu d'écraser le titre. */
.detail-envois .badge { white-space: normal; text-align: center; }
.detail-envois .sous-titre { font-size: 12px; }
.detail-copro .journal li { padding: 6px 0 6px 10px; }
.choix-canal { display: flex; align-items: center; gap: 6px; }

/* ── Checklist de contrôle (aperçu d'une pièce) ──────────── */
.points-vigilance ul { list-style: none; margin: 0; padding: 0; }
.points-vigilance li { padding: 4px 0; }
.points-vigilance label { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.points-vigilance input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }

/* Point relu : estompé, la liste se lit comme une checklist qui se vide. */
.points-vigilance input:checked + span { color: var(--texte-doux); text-decoration: line-through; }

/* Déclinaison dans la modale d'aperçu d'une pièce : bandeau compact sous
   l'en-tête, en regard du document affiché. */

/* Panneau latéral de la modale d'aperçu : la checklist en regard du document. */
.apercu-controles {
    width: 300px; flex-shrink: 0; overflow-y: auto;
    padding: 12px 16px; background: var(--blanc);
    border-left: 1px solid var(--bordure); font-size: 13px;
}
.apercu-controles strong { display: block; margin-bottom: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--texte-doux); }
.apercu-controles strong + ul, .apercu-controles p { margin: 0 0 4px; }

/* Un espace entre le bloc identité et la checklist. */
.apercu-controles p + strong { margin-top: 16px; }
.apercu-identite { font-weight: 700; font-size: 14px; color: var(--texte); }

/* Aperçu du message groupé : ce qui va réellement partir, avant l'envoi. */
.apercu-masse {
    margin: 0 16px 12px; padding: 10px 14px;
    background: var(--fond); border: 1px dashed var(--bordure); border-radius: var(--radius);
}
.apercu-masse .contenu-envoi { max-height: 220px; overflow-y: auto; margin: 6px 0 0; }

/* Ligne d'en-tête d'un groupe dans la sélection de message groupé. */
.ligne-groupe td, tbody tr.ligne-groupe:hover { background: var(--fond); }

/* Aperçu tronqué du journal : fondu vers le fond de carte en bas, signe
   visuel qu'il y a une suite (à ouvrir dans la modale). */
.journal-tronque { position: relative; }

.journal-tronque::after {
    content: ''; position: absolute; inset: auto 0 0; height: 64px;
    background: linear-gradient(to bottom, transparent, var(--blanc));
    pointer-events: none;
}
.journal-tronque li:last-child { border-bottom: 0; }
.journal-suite { margin-top: 10px; }

/* Page publique de signature électronique : document plein cadre, accord. */
.signature-document { width: 100%; height: min(70vh, 720px); border: 1px solid var(--bordure); border-radius: 8px; background: var(--fond); }
.signature-accord { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: 14px; }
.signature-accord input { margin-top: 3px; }

/* La même police manuscrite que les PDF (Caveat), servie au navigateur pour
   que l'aperçu web soit fidèle au certificat. AssetMapper réécrit l'URL. */
@font-face {
    font-family: Caveat;
    font-weight: normal; font-style: normal; font-display: swap;
    src: url("../fonts/caveat/Caveat-Regular-116fccffabae351840f67ae5800f6cec.ttf") format('truetype');
}

/* Rendu manuscrit de la signature sur la page web — fidèle au PDF. */
.signature-manuscrite-web { font-family: Caveat, 'Segoe Script', cursive; font-size: 30px; margin: 6px 0 10px; }

/* Prévisualisation en direct pendant la saisie du nom : un cadre façon
   « ligne de signature », le nom s'y écrit en manuscrit au fil de la frappe. */
.signature-apercu {
    display: flex; align-items: flex-end; min-height: 84px;
    padding: 8px 18px 10px; margin: 4px 0 2px;
    border: 1px dashed var(--bordure); border-radius: 8px; background: var(--fond);
}

.signature-apercu span {
    font-family: Caveat, 'Segoe Script', cursive; font-size: 34px; line-height: 1.1;
    border-bottom: 1px solid var(--texte-doux); padding: 0 14px 2px; min-width: 180px;
}
.signature-apercu span.vide { color: #b6c0ba; }

/* Modale « tout l'historique » : en-tête fixe, liste défilable. */
.modale.historique { width: min(720px, calc(100vw - 32px)); max-height: min(85vh, 860px); padding: 0; overflow: hidden; }
.modale.historique[open] { display: flex; flex-direction: column; }
.historique-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 20px 16px; }

/* ── Cartes ──────────────────────────────────────────────── */
.carte { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--radius); box-shadow: var(--ombre); margin-bottom: 20px; }
.carte > header { padding: 13px 16px; border-bottom: 1px solid var(--bordure); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.carte > header h2 { margin: 0; }
.carte .corps { padding: 16px; }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }

/* Grille dédiée à la fiche dossier : une carte peut s'étendre sur 2 colonnes
   (ex. « AG & travaux »), sans toucher au .grille-2 partagé par les formulaires. */
.grille-fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; grid-auto-flow: dense; }
.grille-fiche .carte-large { grid-column: span 2; }

/* Familles de cartes de la fiche dossier : fond teinté sur toute la carte,
   en-tête un ton au-dessus, pour repérer d'un coup d'œil les parties de la
   fiche (mail du 11/10). */
.carte[class*="section-"] { background: var(--section-pale); border-top: 3px solid var(--section); }

.carte[class*="section-"] > header {
    background: color-mix(in srgb, var(--section) 12%, var(--blanc));
    border-bottom-color: color-mix(in srgb, var(--section) 25%, var(--blanc));
    border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0;
}
.carte[class*="section-"] th { background: color-mix(in srgb, var(--section) 8%, var(--blanc)); }
.carte.section-avancement { --section: var(--nuit); --section-pale: var(--gris-pale); }
.carte.section-copropriete { --section: var(--bleu); --section-pale: var(--bleu-pale); }
.carte.section-travaux { --section: var(--sarcelle); --section-pale: var(--sarcelle-pale); }
.carte.section-honoraires { --section: var(--vert); --section-pale: var(--vert-pale); }
.carte.section-pieces { --section: var(--orange); --section-pale: var(--orange-pale); }
.carte.section-coproprietaires { --section: var(--violet); --section-pale: var(--violet-pale); }

/* ── Tableaux ────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--bordure); vertical-align: middle; }

th {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--texte-doux); background: #fafbfa; font-weight: 700;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--vert-pale); }

/* Alerte visuelle du dossier (état/date) : liseré coloré en tête de ligne. */
tr.dossier-en-retard > td:first-child { border-left: 3px solid var(--rouge); }
tr.dossier-echeance-proche > td:first-child { border-left: 3px solid var(--orange); }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
td.actions-ligne { text-align: right; white-space: nowrap; }
tfoot th, tfoot td { background: #fafbfa; }
.tableau-vide { padding: 32px 16px; text-align: center; color: var(--texte-doux); }

/* ── Fiches (couples libellé / valeur) ───────────────────── */

/* Colonne de libellés proportionnelle : les cartes de la fiche dossier sont
   étroites, une largeur fixe y tasserait les valeurs. */
.fiche { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px 14px; margin: 0; }
.fiche dt { color: var(--texte-doux); }
.fiche dd { margin: 0; }
.vide { color: #a4aeb4; font-style: italic; }

/* Un montant (ou un taux, cf. macro pourcentage) ne se coupe jamais : ni
   entre le nombre et son unité (€, %), ni aux milliers. */
.montant { white-space: nowrap; }

/* ── Aide contextuelle : info-bulle native (title) au survol du libellé ── */
.aide { cursor: help; }

/* ── Bandeau CA honoraires (double phasage) ──────────────── */
.ca-bandeau { display: flex; flex-direction: column; gap: 14px; }
.ca-total { display: flex; align-items: baseline; gap: 10px; }
.ca-montant { font-size: 26px; font-weight: 700; color: var(--vert-fonce); line-height: 1; }
.ca-sous { color: var(--texte-doux); font-size: 13px; }
.ca-phases { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }

.ca-phases > div {
    border: 1px solid var(--bordure); border-radius: var(--radius); padding: 8px 11px; background: var(--blanc);
}
.ca-phases dt { color: var(--texte-doux); font-size: 12px; margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.ca-phases dd { margin: 0; font-weight: 600; }
.ca-progression-tete { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 6px; }
.ca-potentiel { color: var(--texte-doux); }
.barre-progression { height: 10px; border-radius: var(--pilule); background: var(--gris-pale); overflow: hidden; }

.barre-progression-jauge {
    height: 100%; background: var(--vert); border-radius: var(--pilule); transition: width .3s ease; min-width: 2px;
}
.barre-progression-jauge.orange { background: var(--orange); }
.barre-progression-jauge.rouge { background: var(--rouge); }
.ca-note { color: var(--texte-doux); font-size: 12px; }

/* ── Limite de communication (dossiers, page de liste) ──────── */

/* ── Blocage cycle de vie (lettre de mission non signée) ──── */
.bandeau-blocage {
    background: var(--rouge-pale); border: 1px solid #f0c9c6; border-radius: var(--radius);
    padding: 10px 12px; margin-bottom: 12px; color: var(--rouge); font-size: 13px;
}
.bandeau-blocage a { color: var(--rouge); font-weight: 600; text-decoration: underline; }

/* ── Frise d'avancement du dossier (fiche) ───────────────── */
.frise-statut { margin-bottom: 16px; }
.frise-phases { display: grid; grid-template-columns: 2fr 5fr; margin-bottom: 10px; }

.frise-phases > div {
    margin: 0 6px; padding-bottom: 4px; border-bottom: 2px solid var(--bordure); text-align: center;
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux);
}
.frise-phases > div.active { color: var(--vert-fonce); border-color: var(--vert); }
.frise-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.frise-etapes li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 4px; text-align: center; cursor: help; }

/* Trait qui relie chaque pastille à la précédente, vert jusqu'à l'étape en cours. */
.frise-etapes li + li::before {
    content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--bordure);
}
.frise-etapes li.faite::before, .frise-etapes li.courante::before { background: var(--vert); }

.frise-etapes .pastille {
    position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--blanc); border: 2px solid var(--bordure); color: var(--texte-doux);
    font-size: 12px; font-weight: 700;
}
.frise-etapes .faite .pastille { background: var(--vert); border-color: var(--vert); color: #fff; }
.frise-etapes .courante .pastille { border-color: var(--vert); color: var(--vert-fonce); box-shadow: 0 0 0 4px var(--vert-pale); }
.frise-etapes .libelle { font-size: 12px; line-height: 1.3; color: var(--texte-doux); }
.frise-etapes .faite .libelle { color: var(--texte); }
.frise-etapes .courante .libelle { color: var(--vert-profond); font-weight: 700; }
.frise-resume { display: none; margin-top: 8px; font-size: 13px; color: var(--texte-doux); }

/* Zone « étape suivante » : un seul geste principal, le retour en arrière en discret. */
.changement-statut {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
    background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--radius);
    padding: 12px 14px; margin-bottom: 16px;
}
.changement-statut .etape-suivante { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; }
.changement-statut .surtitre { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.changement-statut .description { font-size: 13px; color: var(--texte-doux); }
.blocage-transition { margin-top: 6px; padding: 6px 10px; border-radius: 6px; background: var(--orange-pale); color: var(--orange); font-size: 13px; }
.blocage-transition a { color: var(--orange); font-weight: 600; text-decoration: underline; white-space: nowrap; }
.changement-statut .retour-statut { flex-basis: 100%; font-size: 12.5px; }
.changement-statut .retour-statut .lien-bouton { color: var(--texte-doux); }
.changement-statut .retour-statut .lien-bouton:hover { color: var(--texte); }

@media (width <= 640px) {
    .frise-phases, .frise-etapes .libelle { display: none; }
    .frise-resume { display: block; }
    .frise-etapes .pastille { width: 24px; height: 24px; font-size: 11px; }
    .frise-etapes li + li::before { top: 11px; }
}

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    display: inline-block; padding: 2px 10px; border-radius: var(--pilule);
    font-size: 12px; font-weight: 600; white-space: nowrap;
    background: var(--gris-pale); color: var(--texte-doux);
}
.badge.vert { background: var(--vert-pale); color: var(--vert-fonce); }
.badge.bleu { background: var(--bleu-pale); color: var(--bleu); }
.badge.orange { background: var(--orange-pale); color: var(--orange); }
.badge.rouge { background: var(--rouge-pale); color: var(--rouge); }
.badge.violet { background: var(--violet-pale); color: var(--violet); }
.badge.sarcelle { background: var(--sarcelle-pale); color: var(--sarcelle); }

/* ── Boutons ─────────────────────────────────────────────── */
.btn {
    display: inline-block; padding: 8px 18px; border-radius: var(--pilule);
    border: 1px solid var(--bordure); background: var(--blanc); color: var(--texte);
    font-size: 13px; font-family: inherit; font-weight: 600; cursor: pointer;
    text-decoration: none; line-height: 1.4;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: #f6f8f6; border-color: #cfd8d2; text-decoration: none; }

/* Bouton plein vert du site (« Contact », « Envoyer »). */
.btn.principal { background: var(--vert); border-color: var(--vert); color: #fff; }
.btn.principal:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }

/* Variante contour verte, également présente sur le site. */
.btn.contour { border-color: var(--vert); color: var(--vert-fonce); background: var(--blanc); }
.btn.contour:hover { background: var(--vert-pale); }
.btn.danger { color: var(--rouge); border-color: #f0c9c6; }
.btn.danger:hover { background: var(--rouge-pale); border-color: #e5b2ae; }
.btn.petit { padding: 4px 12px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Formulaires ─────────────────────────────────────────── */
.champ { margin-bottom: 14px; }
.champ label { display: block; margin-bottom: 4px; color: var(--texte-doux); font-size: 13px; }

/* Champ obligatoire : Symfony pose la classe « required » sur le libellé des
   champs requis — un astérisque les distingue, dans tous les formulaires. */
label.required { color: var(--texte); font-weight: 600; }
label.required::after { content: ' *'; color: var(--rouge); font-weight: 700; }
.legende-requis { color: var(--texte-doux); font-size: 13px; margin: 0 0 14px; }
.legende-requis span { color: var(--rouge); font-weight: 700; }

.champ input[type="text"], .champ input[type="email"], .champ input[type="password"], .champ input[type="date"],
.champ input[type="number"], .champ input[type="file"], .champ select, .champ textarea {
    width: 100%; padding: 8px 11px; border: 1px solid var(--bordure); border-radius: var(--radius);
    font-family: inherit; font-size: 14px; background: var(--blanc); color: var(--texte);
}

.champ input:focus, .champ select:focus, .champ textarea:focus {
    outline: 2px solid var(--vert); outline-offset: -1px; border-color: var(--vert);
}
.champ textarea { min-height: 72px; resize: vertical; }
.champ .aide { color: var(--texte-doux); font-size: 12px; margin-top: 3px; }
.champ .erreur, .erreur-formulaire { color: var(--rouge); font-size: 12px; margin-top: 3px; }
.champ-inline { display: flex; align-items: center; gap: 8px; }
.champ-inline label { margin: 0; }

/* Extraction Excel du bloc Direction (#1212) : période puis bouton, sur une ligne. */
.extraction-direction { display: flex; gap: 6px; align-items: center; }

.extraction-direction select {
    padding: 7px 10px; border: 1px solid var(--bordure); border-radius: var(--radius);
    font-family: inherit; font-size: 14px; background: var(--blanc); color: var(--texte);
}
.champ input[type="checkbox"] { accent-color: var(--vert); width: 15px; height: 15px; }

/* Collection saisie en lignes compactes (postes de travaux, gestionnaires
   d'un syndic) : une entrée = une ligne, colonnes nommées une fois en en-tête,
   carte sur toute la largeur de la grille ; au-delà d'une dizaine d'entrées la
   liste défile dans son cadre plutôt que d'allonger le formulaire. Chaque
   carte fixe ses colonnes via --colonnes. */
.carte-lignes { grid-column: 1 / -1; }
.lignes-travaux { --colonnes: minmax(0, 1fr) 170px 140px 34px; }
.lignes-gestionnaires { --colonnes: 110px minmax(0, 1fr) 190px minmax(0, 1.5fr) 34px; }

/* Pages à cartes empilées pleine largeur (fiche syndic). */
.pile-cartes { display: grid; gap: 20px; margin-bottom: 20px; }
.pile-cartes > .carte { margin-bottom: 0; }

/* Cabinet d'un syndic : nom + adresse sur une ligne, puis CP / ville /
   région / SIRET sur la suivante (12 colonnes : 5+7 puis 2+4+3+3). */
.grille-cabinet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 14px; }
.grille-cabinet > * { grid-column: span 3; }
.grille-cabinet > .cabinet-nom { grid-column: span 5; }
.grille-cabinet > .cabinet-adresse { grid-column: span 7; }
.grille-cabinet > .champ:nth-child(3) { grid-column: span 2; }
.grille-cabinet > .champ:nth-child(4) { grid-column: span 4; }
.grille-cabinet .cabinet-nom .champ, .grille-cabinet .cabinet-adresse .champ { margin-bottom: 14px; }

@media (width <= 800px) {
    .grille-cabinet > *, .grille-cabinet > .cabinet-nom, .grille-cabinet > .cabinet-adresse,
    .grille-cabinet > .champ:nth-child(n) { grid-column: 1 / -1; }
}
.compteur-lignes { color: var(--texte-doux); font-weight: normal; font-size: 14px; }

.entete-lignes, .ligne-saisie {
    display: grid; grid-template-columns: var(--colonnes); gap: 8px; align-items: start;
}
.entete-lignes { padding: 0 2px 6px; font-size: 12px; color: var(--texte-doux); }
.entete-lignes .required { color: var(--texte); font-weight: 600; }
.entete-lignes .required::after { content: ' *'; color: var(--rouge); font-weight: 700; }
.liste-lignes-saisie { max-height: 470px; overflow-y: auto; overscroll-behavior: contain; }
.ligne-saisie { padding: 6px 2px; border-top: 1px solid var(--bordure); }
.ligne-saisie .champ { margin-bottom: 0; }

.bouton-retirer {
    width: 34px; height: 38px; border: 1px solid var(--bordure); border-radius: 6px;
    background: var(--blanc); color: var(--texte-doux); cursor: pointer; font-size: 14px;
}
.bouton-retirer:hover { color: var(--rouge); border-color: var(--rouge); background: var(--rouge-pale); }

/* Écran étroit : les champs d'une ligne s'empilent (placeholders et
   aria-label prennent le relais de l'en-tête masqué), bouton retirer à droite. */
@media (width <= 640px) {
    .entete-lignes { display: none; }
    .ligne-saisie { grid-template-columns: 1fr; padding: 10px 2px; }
    .ligne-saisie .bouton-retirer { justify-self: end; }
}
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; }
fieldset { border: 0; padding: 0; margin: 0 0 8px; }
fieldset > legend { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-doux); font-weight: 700; padding: 0 0 8px; }
.cases { display: flex; gap: 16px; flex-wrap: wrap; }
.cases label { display: flex; align-items: center; gap: 6px; color: var(--texte); }
.cases input[type="checkbox"], .cases input[type="radio"] { accent-color: var(--vert); }
.barre-formulaire { display: flex; gap: 8px; align-items: center; padding-top: 4px; }

/* Formulaire long (fiche dossier) : les boutons restent visibles en bas d'écran. */
.barre-formulaire.collante {
    position: sticky; bottom: 0; z-index: 5; padding: 12px 0;
    background: var(--fond); border-top: 1px solid var(--bordure);
    box-shadow: 0 -8px 12px -10px rgb(22 36 61 / 25%);
}

/* Saisie du dossier : cartes d'une même rangée à hauteur égale, sans trou. */
.grille-saisie-dossier { align-items: stretch; margin-bottom: 20px; }
.grille-saisie-dossier > .carte { margin-bottom: 0; }

.pied-travaux {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
    margin-top: 10px; font-size: 13px; color: var(--texte-doux);
}
.total-travaux { font-weight: 600; color: var(--texte); font-variant-numeric: tabular-nums; }

/* ── Champ référentiel (sélection + création à la volée) ─── */
.champ-avec-action { display: flex; gap: 6px; align-items: stretch; }
.champ-avec-action select { flex: 1; }

.champ-avec-action .btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 13px; line-height: 0;
    border-color: var(--vert); color: var(--vert-fonce);
}
.champ-avec-action .btn svg { display: block; }
.champ-avec-action .btn:hover:not(:disabled) { background: var(--vert-pale); }
.champ-avec-action select:disabled { background: var(--gris-pale); color: var(--texte-doux); cursor: not-allowed; }
.champ-referentiel .aide:empty { display: none; }

/* ── Champ recherchable (Tom Select), calqué sur les <select> natifs ─── */

/* Le thème par défaut de Tom Select est plus spécifique que nos règles :
   les propriétés qui doivent matcher le natif sont donc forcées (!important). */
.champ-avec-action .ts-wrapper { flex: 1; margin: 0; }

.ts-wrapper .ts-control {
    min-height: 0 !important;
    padding: 8px 34px 8px 11px !important;
    border: 1px solid var(--bordure) !important;
    border-radius: var(--radius) !important;
    background: var(--blanc) !important;
    color: var(--texte);
    font-size: 14px; line-height: 1.45;
    box-shadow: none !important; cursor: pointer;
}
.ts-wrapper.single.has-items .ts-control { padding-right: 50px !important; } /* place pour × + caret */
.ts-control > input { font-size: 14px; color: var(--texte); }

/* focus identique aux champs natifs */
.ts-wrapper.focus .ts-control {
    outline: 2px solid var(--vert) !important; outline-offset: -1px;
    border-color: var(--vert) !important; box-shadow: none !important;
}

.ts-wrapper.disabled .ts-control {
    background: var(--gris-pale) !important; opacity: 1 !important; color: var(--texte-doux);
}

/* caret à droite, comme un <select> natif */
.ts-wrapper.single .ts-control::after {
    left: auto !important; right: 13px !important; margin-top: -2px !important;
    border-color: var(--texte-doux) transparent transparent !important;
}

/* × pour vider, juste à gauche du caret — seulement quand une valeur est choisie */
.ts-wrapper .clear-button {
    right: 28px !important; opacity: .5 !important; color: var(--texte) !important;
}
.ts-wrapper .clear-button:hover { opacity: 1 !important; }
.ts-wrapper:not(.has-items) .clear-button { display: none !important; }

/* Pendant une recherche active (du texte tapé), on masque la valeur affichée pour
   ne pas superposer item + saisie. En simple focus (sans frappe) ou après
   sélection, la valeur reste visible. La classe est posée par le contrôleur. */
.ts-wrapper.recherche-active.single .ts-control > .item { display: none !important; }
.ts-wrapper.recherche-active .ts-control { cursor: text; }

/* liste déroulante */
.ts-dropdown {
    border: 1px solid var(--bordure) !important; border-radius: var(--radius) !important;
    box-shadow: 0 8px 24px rgb(22 36 61 / 14%) !important; font-size: 14px; margin: 4px 0 0 !important;
}
.ts-dropdown .option { padding: 8px 11px; }
.ts-dropdown .option.active { background: var(--vert-pale) !important; color: var(--vert-fonce) !important; }

/* Option correspondant à la valeur courante : repère persistant (coche + gras),
   distinct du survol, pour voir la sélection en parcourant les propositions. */
.ts-dropdown .option.selected { position: relative; padding-right: 28px; font-weight: 600; }

.ts-dropdown .option.selected::after {
    content: "✓"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--vert);
}
.ts-dropdown .ts-vide { padding: 8px 11px; color: var(--texte-doux); }

/* ── Recherche façon Kendo UI DropDownList (plugin dropdown_input) ──────────
   La recherche vit dans une boîte dédiée en tête du popup ; le contrôle n'est
   pas éditable et se contente d'afficher la valeur choisie (ou le placeholder). */
.ts-dropdown .dropdown-input-wrap { padding: 8px; border-bottom: 1px solid var(--bordure); }

.ts-dropdown .dropdown-input {
    display: block; width: 100%; box-sizing: border-box; margin: 0;
    padding: 8px 11px 8px 33px;
    border: 1px solid var(--bordure) !important; border-radius: var(--radius) !important;
    box-shadow: none !important; background: var(--blanc); color: var(--texte); font-size: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 11px center; background-size: 15px 15px;
}

.ts-dropdown .dropdown-input:focus {
    outline: 2px solid var(--vert); outline-offset: -1px; border-color: var(--vert) !important;
}

/* Étiquette du contrôle : quand rien n'est sélectionné, on affiche le placeholder
   (Tom Select le masque par défaut avec dropdown_input). Non cliquable : le clic
   ouvre le popup via le contrôle. */
.ts-wrapper.plugin-dropdown_input:not(.has-items) .items-placeholder {
    display: block !important; border: 0 !important; box-shadow: none !important;
    background: transparent !important; padding: 0 !important; width: 100%; pointer-events: none;
}
.ts-wrapper.plugin-dropdown_input .items-placeholder::placeholder { color: var(--texte-doux); opacity: 1; }

/* ── Modale ──────────────────────────────────────────────── */
.modale {
    border: 0; border-top: 3px solid var(--vert); border-radius: 12px; padding: 24px;
    width: min(440px, calc(100vw - 32px)); box-shadow: 0 18px 44px rgb(22 36 61 / 28%);
    color: var(--texte); background: var(--blanc);
}
.modale::backdrop { background: rgb(13 59 42 / 45%); }

/* Une modale ouverte fige la page : arrivé en butée du défilement interne, la
   molette ne doit pas « déborder » sur la page d'arrière-plan (scroll chaining).
   Le verrou se pose tout seul via [open], quelle que soit la modale. */
html:has(dialog.modale[open]) { overflow: hidden; }
.historique-corps, .apercu-corps, .apercu-masse .contenu-envoi { overscroll-behavior: contain; }
.modale h2 { margin-bottom: 16px; }

/* Modale d'aperçu d'une pièce : grande surface, en-tête fixe, document défilable.
   Le display n'est posé qu'à l'ouverture : sinon il écrase le « display:none »
   que le navigateur applique à une <dialog> fermée, et la modale reste visible. */
.modale.apercu {
    width: min(920px, calc(100vw - 32px)); height: min(88vh, 900px);
    padding: 0; overflow: hidden;
}
.modale.apercu[open] { display: flex; flex-direction: column; }

.apercu-tete {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--bordure);
}

.apercu-tete h2 {
    margin: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apercu-contenu { flex: 1; min-height: 0; display: flex; }
.apercu-corps { flex: 1; min-height: 0; background: var(--fond); overflow: auto; }
.apercu-cadre { width: 100%; height: 100%; border: 0; display: block; }
.apercu-image { display: block; max-width: 100%; margin: 0 auto; }

/* Liste des fichiers d'une pièce dans la grille (recto/verso…). */

/* Fichiers d'une pièce dans la grille : une puce par fichier (recto/verso…). */
.fichiers { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0; }

.fichier-jeton {
    display: inline-flex; align-items: center;
    background: var(--gris-pale); border-radius: var(--pilule); padding: 1px 3px 1px 7px;
}
.fichier-jeton form { display: inline-flex; margin: 0; }

.fichier-nom {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 0; padding: 0; font: inherit; font-size: 12px;
    color: var(--texte); cursor: pointer; white-space: nowrap;
}
.fichier-nom svg { color: var(--texte-doux); }
.fichier-nom:hover { color: var(--vert-fonce); }
.fichier-nom:hover svg { color: var(--vert-fonce); }

.fichier-retirer {
    background: none; border: 0; cursor: pointer; color: var(--texte-doux);
    font-size: 15px; line-height: 1; padding: 0 3px; margin-left: 2px; border-radius: 50%;
}
.fichier-retirer:hover { color: var(--rouge); background: var(--rouge-pale); }

.fichier-ajout {
    background: none; border: 1px dashed var(--bordure); border-radius: var(--pilule);
    padding: 2px 9px; font-size: 12px; color: var(--texte-doux); cursor: pointer; white-space: nowrap;
}
.fichier-ajout:hover { border-color: var(--vert); color: var(--vert-fonce); background: var(--vert-pale); }
.portail-fichiers { margin-top: 4px; font-size: 12px; color: var(--texte-doux); }

/* Formulaire de la banque (bulletin, mandat SEPA) : modèle + consigne. */
.portail-consigne { margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--vert-clair, #7cc68a); background: var(--fond, #f5f7f6); border-radius: 0 6px 6px 0; font-size: 13px; }
.portail-consigne p { margin: 6px 0 0; }
.portail-piece-intitule .portail-consigne strong { display: inline; margin: 0; }
.portail-courrier { color: var(--texte); }
.portail-mode { display: flex; align-items: center; gap: 8px; margin-top: 0 !important; }
.etapes-portail { margin: 6px 0 0; padding-left: 20px; line-height: 1.5; }
.etapes-portail li + li { margin-top: 3px; }

/* Les étapes vivent dans une ligne de la liste des pièces : on neutralise le
   style de ces lignes (flex, séparateur) pour retrouver une liste numérotée. */
.portail-pieces .etapes-portail li { display: list-item; border: 0; padding: 0; gap: 0; }
.portail-pieces .etapes-portail strong { display: inline; margin: 0; }

/* Champ obligatoire dont le libellé est un <span> (formulaires publics). */
.formulaire span.required::after { content: ' *'; color: var(--rouge); font-weight: 700; }
.formulaire span.required { font-weight: 600; }
.portail-consigne-banque { font-style: italic; }
.portail-consigne-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }

/* Grille de collecte : réception de l'original papier (mandat SEPA). */

/* En-tête de colonne : état du modèle bancaire (bulletin, mandat SEPA). */
.etat-modele { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.etat-modele::before { content: '● '; }
.etat-modele.pret { color: var(--vert-fonce); }
.etat-modele.manquant { color: var(--orange); }
.original-papier { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.lien-discret { background: none; border: 0; padding: 0; color: var(--texte-doux); font-size: 12px; text-decoration: underline; cursor: pointer; }

/* Bibliothèque d'une banque : rôle d'une annexe dans la collecte. */
.liste-annexes, .liste-formulaires { padding-left: 0; margin: 0; }
.liste-annexes li { align-items: flex-start; }
.annexe-titre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.annexe-titre .badge { margin-left: 0; }
.liste-annexes .sous-titre { margin-top: 2px; font-size: 12.5px; }
.annexe-consigne { margin-top: 4px; font-size: 12.5px; color: var(--texte-doux); font-style: italic; }
.ajout-annexe { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bordure); }
.ajout-annexe h3 { margin: 0 0 12px; }
.ajout-annexe-champs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }

@media (width <= 700px) { .ajout-annexe-champs { grid-template-columns: 1fr; } }
.ajout-annexe .barre-formulaire { margin-top: 4px; }
.annexe-modele { margin-top: 6px; font-size: 13px; }
.annexe-modele summary { cursor: pointer; color: var(--vert-fonce); }
.annexe-modele form { margin-top: 8px; max-width: 520px; }

/* Bouton qui se comporte comme un lien (aperçu de pièce), sans style de bouton. */
.lien-bouton {
    background: none; border: 0; padding: 0; margin: 0; font: inherit;
    color: var(--vert-fonce); cursor: pointer; text-decoration: underline;
}
.lien-bouton:hover { color: var(--vert-profond); }
.modale .barre-formulaire { margin-top: 20px; }
.modale .erreur:empty, .erreur-formulaire:empty { display: none; }

.erreur-formulaire {
    background: var(--rouge-pale); border: 1px solid #f2c7c4; color: var(--rouge);
    padding: 8px 12px; border-radius: var(--radius); margin-bottom: 12px; font-size: 13px;
}

/* ── Génération de documents ─────────────────────────────── */

/* Saisie à gauche, aperçu du rendu à droite. */
.grille-document { display: grid; grid-template-columns: minmax(320px, 4fr) 5fr; gap: 20px; align-items: start; }

/* L'aperçu est le PDF réel (lecteur natif du navigateur) : le fond gris est
   celui du lecteur, on garde juste le cadre aux couleurs de l'app. */
.apercu-document { width: 100%; height: 82vh; border: 1px solid var(--bordure); border-radius: var(--radius); background: var(--gris-pale); }

@media (width <= 900px) { .grille-document { grid-template-columns: 1fr; } }

/* Catalogue des documents d'un dossier. */

/* Pas de retrait de liste : les lignes s'alignent sur le bord de la carte. */
.liste-documents { list-style: none; padding-left: 0; margin: 0; }

.liste-documents li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--bordure);
}

/* Les boutons ne se tassent jamais sous le texte : ils restent sur une ligne. */
.liste-documents li > .actions { flex-shrink: 0; }
.liste-documents li > .actions .btn { white-space: nowrap; }
.liste-documents li:last-child { border-bottom: 0; }
.liste-documents .badge { margin-left: 8px; }

/* ── Grille de validation d'import ───────────────────────── */

.grille-import { font-size: 13px; }
.grille-import th { white-space: nowrap; }
.grille-import td { padding: 4px 6px; vertical-align: top; }
.grille-import td.centre { text-align: center; vertical-align: middle; }

.grille-import input[type="text"] {
    width: 100%; min-width: 90px; padding: 5px 8px;
    border: 1px solid var(--bordure); border-radius: var(--radius);
    font-family: inherit; font-size: 13px; background: var(--blanc); color: var(--texte);
}
.grille-import input[type="text"]:focus { outline: 2px solid var(--vert); outline-offset: -1px; }

/* Champ douteux : surligné en rouge, raison au survol de la cellule. */
.grille-import td.cellule-douteuse input[type="text"] {
    border-color: var(--rouge); background: var(--rouge-pale);
}
.grille-import .valeur-brute { color: var(--texte-doux); font-size: 11px; margin-top: 2px; }

/* Ligne écartée de l'import : présente mais estompée. */
.grille-import tr.ligne-ignoree td:not(.centre) { opacity: .45; }
.grille-import tr.ligne-ignoree input[type="text"] { text-decoration: line-through; }

/* Matrice des droits (page Utilisateurs). */
.table-scroll { overflow-x: auto; }
.matrice-droits th.centre, .matrice-droits td.centre { text-align: center; width: 160px; }
.matrice-droits .oui { color: var(--vert); font-weight: 700; }
.matrice-droits .non { color: var(--texte-doux); }

/* Libellé d'un droit : bulle d'explication au survol et au focus clavier.
   Posée à DROITE du libellé (dans la largeur de la 1re colonne) : dessous,
   elle serait rognée par le défilement de .table-scroll sur les dernières
   lignes — qui l'ouvrent donc vers le haut. */
.matrice-droits .droit {
    position: relative; cursor: help; outline: none;
    border-bottom: 1px dotted var(--texte-doux);
}
.matrice-droits .droit:focus-visible { border-bottom-color: var(--vert); color: var(--vert-fonce); }

.droit-bulle {
    position: absolute; z-index: 20; top: -8px; left: calc(100% + 14px);
    width: min(380px, 70vw); padding: 10px 14px;
    background: var(--nuit); color: #fff; border-radius: var(--radius);
    box-shadow: 0 8px 24px rgb(22 36 61 / 25%);
    font-size: 12.5px; font-weight: normal; line-height: 1.45; text-align: left; white-space: normal;
    opacity: 0; visibility: hidden; transform: translateX(-4px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
    pointer-events: none;
}
.droit-bulle strong { display: block; margin-bottom: 4px; font-size: 13px; }
.droit-bulle ul { margin: 0; padding-left: 16px; color: rgb(255 255 255 / 82%); }
.droit-bulle li + li { margin-top: 2px; }

/* Petite flèche vers le libellé. */
.droit-bulle::before {
    content: ''; position: absolute; top: 14px; left: -6px;
    border: 6px solid transparent; border-left: 0; border-right-color: var(--nuit);
}

.matrice-droits .droit:hover .droit-bulle,
.matrice-droits .droit:focus .droit-bulle { opacity: 1; visibility: visible; transform: none; }
.matrice-droits tbody tr:nth-last-child(-n+3) .droit-bulle { top: auto; bottom: -8px; }
.matrice-droits tbody tr:nth-last-child(-n+3) .droit-bulle::before { top: auto; bottom: 14px; }

/* En-tête de groupe (régions, matrice des droits) dans les tableaux. */
tr.groupe-region th {
    background: var(--vert-pale); color: var(--vert-fonce); text-align: left;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: 6px 12px;
}

/* Liste des postes de travaux sur la fiche dossier. */
.liste-travaux { list-style: none; margin: 0; }

.liste-travaux li {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 6px 16px; flex-wrap: wrap; padding: 7px 0;
    border-bottom: 1px solid var(--bordure);
}
.liste-travaux li:last-child { border-bottom: 0; }
.liste-travaux .travaux-nature { flex: 1 1 12rem; }
.liste-travaux .travaux-detail { display: inline-flex; align-items: baseline; gap: 6px; color: var(--texte-doux); white-space: nowrap; }
.liste-travaux .badge { margin-left: 4px; }

/* Champ verrouillé (forçage réservé à l'administrateur technique). */
.champ input:disabled {
    background: var(--gris-pale); color: var(--texte-doux); cursor: not-allowed;
}

/* ── Filtres ─────────────────────────────────────────────── */
.filtres { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.filtres .champ { margin-bottom: 0; }
.filtres input, .filtres select { min-width: 180px; }
.filtres input[type="checkbox"] { min-width: 0; }
.filtres .choix-ligne { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }

/* ── Messages ────────────────────────────────────────────── */
.message { padding: 11px 16px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid; }
.message.succes { background: var(--vert-pale); border-color: #b9e2c2; color: var(--vert-fonce); }
.message.erreur { background: var(--rouge-pale); border-color: #f2c7c4; color: var(--rouge); }
.message.info { background: var(--bleu-pale); border-color: #cbdcf0; color: var(--bleu); }
.message.alerte { background: var(--orange-pale); border-color: #f0dab5; color: var(--orange); }
.message ul { margin: 6px 0 0; padding-left: 20px; }

/* Messages de l'action précédente : collés en haut de l'écran, donc visibles
   aussi quand la page s'ouvre sur une ancre (retour sur une tâche, une ligne). */
.messages-flash { position: sticky; top: 8px; z-index: 20; }
.messages-flash:empty { display: none; }
.messages-flash .message { box-shadow: 0 4px 14px rgb(22 36 61 / 12%); }

/* Bandeau de conservation : la précision juridique reste lisible dans la couleur du message. */
.message.conservation .sous-titre { color: inherit; opacity: .8; font-size: 12px; }
.message.conservation a { color: inherit; text-decoration: underline; }

/* ── Journal ─────────────────────────────────────────────── */
.journal { list-style: none; margin: 0; padding: 0; }
.journal li { padding: 10px 0 10px 14px; border-bottom: 1px solid var(--bordure); border-left: 2px solid var(--vert-pale); }
.journal li:last-child { border-bottom: 0; }
.journal .quand { color: var(--texte-doux); font-size: 12px; }
.journal .detail { color: var(--texte-doux); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ── Pagination ──────────────────────────────────────────── */
.pagination { display: flex; gap: 4px; align-items: center; justify-content: flex-end; padding: 12px 16px; color: var(--texte-doux); }

.pagination a, .pagination span.page {
    padding: 4px 11px; border: 1px solid var(--bordure); border-radius: var(--pilule);
    background: var(--blanc); text-decoration: none;
}
.pagination a:hover { background: var(--vert-pale); border-color: var(--vert); text-decoration: none; }
.pagination span.page.courante { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600; }
.pagination .compteur { margin-right: auto; }

/* ── Chiffres clés ───────────────────────────────────────── */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }

.chiffre {
    background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--radius);
    padding: 13px 16px; border-top: 3px solid var(--vert);
}
.chiffre .valeur { font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--vert-profond); }
.chiffre .libelle { color: var(--texte-doux); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }

/* ── Connexion ───────────────────────────────────────────── */

/* Reprend le bandeau sombre du site, veiné de vert. */
.page-login {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1200px 420px at 15% -10%, rgb(42 162 62 / 30%), transparent 60%),
        radial-gradient(900px 380px at 100% 110%, rgb(142 226 78 / 18%), transparent 60%),
        var(--nuit);
}

.page-login .boite {
    background: var(--blanc); border-radius: 14px; padding: 34px; width: 100%; max-width: 384px;
    box-shadow: 0 16px 40px rgb(0 0 0 / 30%); border-top: 4px solid var(--vert);
}
.page-login .logo { display: block; width: 58px; height: 58px; margin: 0 auto 12px; }

.page-login .marque {
    font-size: 19px; font-weight: 700; color: var(--nuit); margin-bottom: 6px;
    text-align: center; letter-spacing: .02em; text-transform: uppercase;
}

.page-login .accroche {
    color: var(--texte-doux); margin: 0 0 24px; text-align: center; font-size: 13px;

    /* Filet vert sous la baseline, comme sur la page d'accueil du site. */
    padding-bottom: 16px; position: relative;
}

.page-login .accroche::after {
    content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 56px; height: 3px; background: var(--vert); border-radius: 2px;
}
.page-login .btn { width: 100%; text-align: center; padding: 10px; }
.page-login .sous-titre { margin: 0 0 14px; font-size: 13px; }
.page-login .lien-secondaire { margin: 16px 0 0; text-align: center; font-size: 13px; }
.page-login .lien-secondaire a { color: var(--vert-fonce); }

/* Champ mot de passe avec bouton œil intégré à droite. */
.champ-mot-de-passe { position: relative; }
.champ-mot-de-passe input { width: 100%; padding-right: 42px; }

.bouton-oeil {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--texte-doux); cursor: pointer;
}
.bouton-oeil:hover { color: var(--texte); background: var(--fond); }
.bouton-oeil:focus-visible { outline: 2px solid var(--vert); outline-offset: 1px; }
.bouton-oeil .oeil-barre { display: none; }
.bouton-oeil[aria-pressed="true"] .oeil-ouvert { display: none; }
.bouton-oeil[aria-pressed="true"] .oeil-barre { display: block; }

/* ---- Forfait SMS ---- */

/* Solde négatif : en rouge, sans bloquer (le forfait est cumulable, les envois continuent). */
.tuile-valeur.negatif { color: var(--rouge); }

/* Estimation d'un lot de SMS avant envoi (segments facturés, impact sur le solde). */
.estimation-sms {
    margin-top: 12px; padding: 9px 12px; border-left: 3px solid var(--vert-clair);
    background: var(--fond); border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.45;
}

/* ---- Campagnes (messages groupés à valider) ---- */

/* Compteur dans le menu : campagnes en attente de validation. */
.pastille {
    display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px;
    border-radius: 9px; background: var(--orange, #d97706); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}

/* Menu « À faire » : rouge et pulsant quand quelque chose d'urgent attend. */
.pastille.urgente { background: var(--rouge); animation: pouls-urgent 2.2s ease-out infinite; }

@keyframes pouls-urgent {
    0% { box-shadow: 0 0 0 0 rgb(179 38 30 / 55%); }
    70% { box-shadow: 0 0 0 7px rgb(179 38 30 / 0%); }
    100% { box-shadow: 0 0 0 0 rgb(179 38 30 / 0%); }
}

/* ---- À faire (accueil, page dédiée, fiche dossier) ---- */
.carte-a-faire { border-top: 3px solid var(--orange); }
.carte-a-faire.avec-urgent { border-top-color: var(--rouge); }
.liste-a-faire { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.tache {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 10px 12px; border: 1px solid var(--bordure); border-left-width: 4px; border-radius: var(--radius);
    background: var(--blanc);
    animation: tache-apparition .35s ease-out both; animation-delay: calc(var(--i, 0) * 60ms);
}
.tache-urgent { border-left-color: var(--rouge); background: var(--rouge-pale); }
.tache-action { border-left-color: var(--orange); }
.tache-attente { border-left-color: var(--bleu); background: var(--fond); }

.tache-repere {
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px; color: #fff;
}
.tache-urgent .tache-repere { background: var(--rouge); animation: pouls-urgent 2.2s ease-out infinite; }
.tache-action .tache-repere { background: var(--orange); }
.tache-attente .tache-repere { background: var(--bleu-pale); color: var(--bleu); }
.tache-titre { font-size: 14px; }

.tache-dossier {
    display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px;
    background: var(--gris-pale); color: var(--texte-doux); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.tache-detail { color: var(--texte-doux); font-size: 13px; margin-top: 2px; }
.tache .btn { white-space: nowrap; }

@keyframes tache-apparition { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (width <= 640px) {
    .tache { grid-template-columns: 26px minmax(0, 1fr); }
    .tache .btn { grid-column: 2; justify-self: start; }
}

.visuellement-masque {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Arrivée par un lien « À faire » (…#ajout-annexe, …#dossier_lettreMissionSigneeLe) :
   l'endroit visé s'illumine un instant pour qu'on le repère. */
:target { scroll-margin-top: 90px; }
:target, .champ:has(> :target) { animation: reperage 2.6s ease-out 1; border-radius: var(--radius); }

@keyframes reperage {
    0%, 35% { box-shadow: 0 0 0 4px rgb(217 119 6 / 55%); background-color: var(--orange-pale); }
    100% { box-shadow: 0 0 0 4px rgb(217 119 6 / 0%); }
}

@media (prefers-reduced-motion: reduce) {
    .pastille.urgente, .tache, .tache-urgent .tache-repere, :target, .champ:has(> :target) { animation: none; }
}

.formulaire-refus { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bordure); }
.formulaire-refus .btn { align-self: flex-start; }

/* Aperçu d'un message : partie personnalisée pour chaque destinataire. */
mark.variable { background: #fff3c4; color: inherit; padding: 0 2px; border-radius: 3px; box-shadow: inset 0 -1px 0 #e8c65a; }
.apercu-message { margin-bottom: 16px; }

/* Boutons d'insertion de variables sous un texte libre. */
.boutons-variables { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.boutons-variables .btn.variable { font-weight: normal; }

/* ---- Bloc Direction : chiffre d'affaires par mandataire ---- */
.tuiles-direction { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; }

.tuile {
    display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
    background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--radius);
}
.tuile-libelle { color: var(--texte-doux); font-size: 13px; }
.tuile-valeur { font-size: 22px; font-weight: 700; color: var(--vert-fonce); }
.tableau-direction { font-size: 13px; }
.tableau-direction td, .tableau-direction th { white-space: nowrap; }

/* Seule colonne qui passe à la ligne : nom de la copropriété + syndic. */
.tableau-direction .cellule-copro { white-space: normal; min-width: 190px; max-width: 280px; }

/* Page Direction : le tableau prend toute la largeur de l'écran. */
.conteneur:has(.tableau-direction) { max-width: none; }

/* Montant sur deux lignes : HT, puis TTC en plus petit. */
.tableau-direction .ttc { display: block; color: var(--texte-doux); font-size: 11.5px; }
.estimation { font-style: italic; color: var(--texte-doux); }
.tableau-direction tr.sous-total td { background: #fafbfa; font-weight: 600; border-top: 1px solid var(--bordure); }
.tableau-direction tr.total td { background: var(--vert-pale, #eef6f0); font-weight: 700; border-top: 2px solid var(--vert); }
.tableau-annees tbody th { text-align: left; }
.tableau-annees th:first-child { width: 90px; }

/* Saisie du CA hors application (page Facturation) : une ligne de champs. */
.formulaire-ca-saisi {
    display: grid; grid-template-columns: 180px minmax(0, 1fr) 130px 90px 150px 150px auto;
    gap: 10px; align-items: start; margin-top: 14px;
}
.formulaire-ca-saisi .champ { margin-bottom: 0; }
.formulaire-ca-saisi > .btn { margin-top: 21px; }

@media (width <= 900px) {
    .formulaire-ca-saisi { grid-template-columns: 1fr 1fr; }
}

/* Saisie rapide d'un dossier repris : champs à plat, peu de hauteur. */
.grille-reprise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
.grille-reprise > .reprise-large { grid-column: span 2; }

/* Chiffre d'affaires d'un dossier repris, sous les phases de la carte Honoraires. */
.ca-repris { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--bordure); }
.formulaire-reprise + .carte { margin-top: 24px; }
.grille-montants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.grille-vente { display: grid; grid-template-columns: 200px minmax(0, 1fr) 150px 100px 170px; gap: 0 14px; }

@media (width <= 800px) {
    .grille-reprise, .grille-montants, .grille-vente { grid-template-columns: 1fr; }
    .grille-reprise > .reprise-large { grid-column: auto; }
}

/* ---- Grille de collecte des pièces (adhérents × pièces attendues) ---- */
.defilable { overflow-x: auto; }
.grille-pieces th { white-space: nowrap; }
.grille-pieces th small { display: block; font-size: 10px; color: var(--texte-doux); font-weight: 500; }
.grille-pieces .colonne-adherent { min-width: 220px; }
.grille-pieces .cellule-piece { font-size: 12px; min-width: 96px; }
.grille-pieces .cellule-piece.sans-objet { color: #a4aeb4; text-align: center; }
.piece-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.piece-actions form { display: inline; }
.btn.petit.valider { color: var(--vert-fonce); border-color: var(--vert); }
.btn.petit.valider:hover { background: var(--vert-pale); }

/* ── Parcours RAC (désendettement) : ligne verte quand la signature est validée ── */
.ligne-signee td { background: var(--vert-pale); }
.envoi-courtier { display: inline-flex; align-items: center; gap: 6px; }
.envoi-courtier select { max-width: 180px; }

/* Le refus se déplie dans la cellule sans quitter la grille. */
.refus summary { list-style: none; cursor: pointer; }
.refus summary::-webkit-details-marker { display: none; }
.refus form { display: flex; gap: 4px; margin-top: 4px; align-items: flex-end; }
.refus form label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; font-weight: 600; font-size: 13px; }
.refus input[type="text"] { padding: 6px 10px; border: 1px solid var(--bordure); border-radius: 6px; font: inherit; }
.refus.compact input[type="text"] { width: 130px; padding: 3px 8px; font-size: 12px; }
.motif-refus { color: var(--rouge); font-size: 13px; }
.texte-alerte { color: var(--rouge); }

/* ---- Trace d'un envoi ---- */
.contenu-envoi {
    white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.5;
    background: var(--gris-pale); border: 1px solid var(--bordure);
    border-radius: 8px; padding: 12px 14px; margin: 0;
}

/* Image de signature en pied d'un mail (#1210) : sous le texte, comme chez le
   destinataire. Fond blanc : c'est celui d'une messagerie. */
.signature-envoi { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin-top: 10px; }
.signature-envoi img, .apercu-signature img { max-width: min(100%, 480px); height: auto; background: #fff; }
.signature-envoi img { border: 1px solid var(--bordure); border-radius: 8px; padding: 8px; }

.apercu-signature {
    background: #fff; border: 1px solid var(--bordure); border-radius: 8px;
    padding: 14px 16px; margin: 10px 0 16px;
}

.apercu-signature-texte { margin: 0 0 14px; color: var(--texte-doux); }
.retrait-signature { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }

.formulaire { display: flex; flex-direction: column; gap: 12px; }
.formulaire label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }

.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="tel"],
.formulaire input[type="date"], .formulaire input[type="number"],
.formulaire select, .formulaire textarea {
    font: inherit; font-weight: 400; padding: 7px 10px;
    border: 1px solid var(--bordure); border-radius: 8px; background: var(--blanc);
}
.formulaire textarea { resize: vertical; }
.formulaire small { font-weight: 400; }

/* ---- Checklist admin : avancement par registre sur la fiche dossier (#1288) ---- */
.avancement-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px; }
.avancement-tete { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 6px; }
.avancement-tete span:first-child { font-weight: 600; }
.texte-succes { color: var(--vert-fonce); font-weight: 600; }

/* ---- Listes de pièces administratives (#1286) ---- */

/* Saisie sur une ligne : un champ qui prend la place, puis son bouton. */
.saisie-rapide { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.saisie-rapide input[type="text"], .saisie-rapide select {
    padding: 7px 10px; border: 1px solid var(--bordure); border-radius: 8px;
    font-family: inherit; font-size: 14px; background: var(--blanc); color: var(--texte);
}
.saisie-rapide input[type="text"] { flex: 1 1 220px; min-width: 0; }
.registre-pieces .actions-ligne form { display: inline-block; margin: 0 0 0 4px; }
.registre-pieces .badge { margin-left: 6px; }
tr.piece-retiree td { color: var(--texte-doux); background: var(--gris-pale); }
tr.piece-retiree td:first-child a { color: var(--texte-doux); text-decoration: line-through; }

/* « Renommer » : le champ se déplie sous le bouton, sans quitter la page. */
.menu-registre { position: relative; }
.menu-registre summary { list-style: none; cursor: pointer; }
.menu-registre summary::-webkit-details-marker { display: none; }

.menu-registre[open] .saisie-rapide {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(420px, 80vw);
    padding: 10px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 8px;
    box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
}

.groupe-champs {
    display: flex; flex-direction: column; gap: 8px; margin: 0;
    padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 8px;
}
.groupe-champs legend { padding: 0 6px; font-weight: 600; font-size: 13px; }

/* Case ou bouton radio et son libellé sur une ligne (les libellés d'un formulaire s'empilent sinon). */
.formulaire label.choix-ligne { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.formulaire label.choix-ligne input { accent-color: var(--vert); }
.modele-actuel { font-weight: 400; }
.retrait-modele { margin-top: 10px; }
.suppression-liste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }

/* ---- Historique : filtres par catégorie ---- */
.filtres-journal { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

.filtre-journal {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border: 1px solid var(--bordure); border-radius: var(--pilule);
    font-size: 12.5px; color: var(--texte-doux); background: var(--blanc); text-decoration: none;
}
.filtre-journal:hover { border-color: #cfd8d2; background: #f6f8f6; text-decoration: none; }

/* Les filtres existent en lien (page) et en bouton (modale) : même habit. */
button.filtre-journal { cursor: pointer; font-family: inherit; }
.filtre-journal .compte { font-variant-numeric: tabular-nums; color: var(--texte-doux); font-size: 11.5px; }
.filtre-journal.actif { border-color: var(--nuit); background: var(--nuit); color: var(--blanc); }
.filtre-journal.actif .compte { color: rgb(255 255 255 / 75%); }

/* Le liseré gauche reprend la couleur de la catégorie : l'œil regroupe les
   entrées d'un même sujet sans lire les badges. */
.journal li.journal-cycle { border-left-color: var(--bleu); }
.journal li.journal-fiche { border-left-color: var(--bordure); }
.journal li.journal-recensement { border-left-color: var(--vert); }
.journal li.journal-pieces { border-left-color: var(--orange); }
.journal li.journal-envois { border-left-color: var(--violet); }
.journal li.journal-documents { border-left-color: var(--sarcelle); }

/* ---- Portail public de dépôt des pièces (une colonne, lisible sur mobile) ---- */
.portail { max-width: 640px; margin: 0 auto; }
.portail-entete { display: flex; align-items: center; gap: 14px; margin: 8px 0 20px; }
.portail-entete h1 { font-size: 21px; margin: 0 0 2px; }
.portail-entete .sous-titre { margin: 0; }
.portail-pieces { list-style: none; margin: 0; padding: 0; }

.portail-pieces li {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--bordure); flex-wrap: wrap;
}
.portail-pieces li:last-child { border-bottom: 0; }
.portail-piece-intitule { flex: 1 1 260px; }
.portail-piece-intitule strong { display: block; margin-bottom: 4px; }
.portail-pied { color: var(--texte-doux); font-size: 12px; margin-top: 18px; text-align: center; }

/* Envoi des pièces pour vérification, sous la liste : c'est lui qui fige le portail. */
.portail-envoi { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bordure); text-align: center; }
.portail-envoi .sous-titre { margin-bottom: 10px; }

@media (width <= 520px) {
    .portail-pieces li { align-items: flex-start; }
    .portail-pieces form, .portail-pieces .btn { width: 100%; text-align: center; }
}

/* Lien de dépôt d'un adhérent, sous ses coordonnées dans la grille. */
.lien-portail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.lien-portail form { display: inline; }

/* Pièces « envoyées » par l'adhérent : badge + déblocage dans la grille. */

/* Prêt(s) de l'adhérent sur un dossier à deux prêts : commande ses formulaires. */
.choix-prets { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; }
.choix-prets label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.choix-prets input[type="checkbox"] { accent-color: var(--vert); }
.choix-prets-titre { color: var(--texte-doux); }
.choix-prets.a-preciser { padding: 4px 8px; border-radius: 6px; background: var(--orange-pale); }
.choix-prets.a-preciser .choix-prets-titre { color: var(--orange); font-weight: 600; }
.soumission-portail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.soumission-portail form { display: inline; }

/* Champ révélé par le contrôleur quand le presse-papier a échoué : dernier recours. */
.champ-lien {
    flex: 1 1 100%; min-width: 0; padding: 3px 8px;
    border: 1px solid var(--bordure); border-radius: var(--radius);
    background: var(--fond); color: var(--texte-doux);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
    text-overflow: ellipsis;
}
.champ-lien:focus { color: var(--texte); background: var(--blanc); outline: 2px solid var(--vert-clair); }

/* ── Tâches de dossier (brique gestion-taches) ───────────────
   Couleur d'un statut de tâche : pastille (.st-*) et select de la liste
   (suit la valeur via :has). Partagées par la liste, le panneau et la fiche.
   Le reste des styles de la brique vit dans ses gabarits (templates/tache). */
.st-a_planifier, select.tb-statut:has(option[value="a_planifier"]:checked) { background: var(--gris-pale); color: var(--texte-doux); }
.st-a_faire, select.tb-statut:has(option[value="a_faire"]:checked) { background: var(--bleu-pale); color: var(--bleu); }
.st-en_cours, select.tb-statut:has(option[value="en_cours"]:checked) { background: var(--orange-pale); color: var(--orange); }
.st-bloque, select.tb-statut:has(option[value="bloque"]:checked) { background: var(--rouge-pale); color: var(--rouge); }
.st-en_revue, select.tb-statut:has(option[value="en_revue"]:checked) { background: var(--violet-pale); color: var(--violet); }
.st-fait, select.tb-statut:has(option[value="fait"]:checked) { background: var(--vert-pale); color: var(--vert-fonce); }
.st-abandonnee, select.tb-statut:has(option[value="abandonnee"]:checked) { background: var(--gris-pale); color: var(--texte-doux); text-decoration: line-through; }

/* Échéance d'une tâche (EcheanceCouleur) : en retard, proche, lointaine. */
.ech-rouge { color: var(--rouge); font-weight: 600; }
.ech-orange { color: var(--orange); font-weight: 600; }
.ech-vert { color: var(--vert-fonce); }

/* Formulaire d'une tâche (panneau latéral et fiche). */
.te-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.te-qui { border: 0; padding: 0; margin-left: 0; margin-right: 0; }
.te-qui legend { padding: 0; margin-bottom: 4px; color: var(--texte-doux); font-size: 13px; }
.te-qui label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 3px 0; color: var(--texte); font-size: 14px; }
.te .te-supprimer { margin-left: auto; }

/* Mes tâches (#1284) : tâches de dossier de l'utilisateur, par échéance. */
.mes-taches { width: 100%; border-collapse: collapse; }
.mes-taches th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); padding: 6px 10px; border-bottom: 1px solid var(--bordure); font-weight: 600; }
.mes-taches td { padding: 8px 10px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.mes-taches tbody tr:hover { background: var(--fond); }
.mes-taches-echeance { white-space: nowrap; width: 1%; }
.mes-taches-echeance .pastille-echeance { margin-right: 6px; }
a.mes-taches-nom { color: var(--texte); font-weight: 600; }
a.mes-taches-nom:hover { color: var(--vert-fonce); text-decoration: underline; }
.mes-taches tr.ech-ligne-rouge td:first-child { box-shadow: inset 3px 0 0 var(--rouge); }
.mes-taches tr.ech-ligne-orange td:first-child { box-shadow: inset 3px 0 0 #e08a1e; }
.mes-taches tr.ech-ligne-vert td:first-child { box-shadow: inset 3px 0 0 var(--vert); }
.pastille-echeance { display: inline-block; padding: 1px 8px; border-radius: var(--pilule); font-size: 11px; font-weight: 700; background: var(--gris-pale); color: var(--texte-doux); }
.pastille-echeance.rouge { background: var(--rouge-pale); color: var(--rouge); }
.pastille-echeance.orange { background: var(--orange-pale); color: var(--orange); }
.pastille-echeance.vert { background: var(--vert-pale); color: var(--vert-fonce); }
.sous-titre-carte { margin: 16px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); }

/* Facture au brouillon (#1208) : lignes modifiables sur place. */
.lignes-facture input[type="text"] { width: 100%; font: inherit; padding: 5px 8px; border: 1px solid var(--bordure); border-radius: 6px; background: var(--blanc); }
.lignes-facture input.nombre { text-align: right; min-width: 70px; }
.lignes-facture td:first-child { min-width: 280px; }
.lignes-facture td:first-child .badge { margin-top: 4px; }
.lignes-facture .actions-ligne form { display: inline-block; margin: 0 0 0 4px; }
.ajout-ligne-facture { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--bordure); }
.ajout-ligne-champs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(60px, 1fr) minmax(80px, 1fr) minmax(60px, 1fr) auto; gap: 8px; align-items: center; }
.ajout-ligne-champs input { font: inherit; padding: 6px 8px; border: 1px solid var(--bordure); border-radius: 6px; }
.ajout-ligne-champs input.nombre { text-align: right; }
#entete textarea, #entete input[type="text"] { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--bordure); border-radius: 6px; }

/* Paragraphe rédigé d'un document (ex. mandat de recherche, #1208) : pleine largeur. */
.grille-champs .champ-texte-redige { grid-column: 1 / -1; }
.champ-texte-redige textarea { width: 100%; min-height: 90px; }
.lignes-facture { table-layout: auto; width: 100%; }
.lignes-facture th:nth-child(2), .lignes-facture th:nth-child(3), .lignes-facture th:nth-child(4) { width: 110px; }
.lignes-facture th:nth-child(5) { width: 110px; }

/* Paiement du mandataire (#1209) : une ligne de saisie. */
.formulaire-paiement-mandataire { display: grid; grid-template-columns: 160px 140px 170px minmax(0, 1fr) auto; gap: 0 14px; align-items: end; }
.formulaire-paiement-mandataire .champ { margin-bottom: 0; }
.formulaire-paiement-mandataire input, .formulaire-paiement-mandataire select { width: 100%; }

@media (width <= 900px) { .formulaire-paiement-mandataire { grid-template-columns: 1fr 1fr; gap: 10px 14px; } }

/* ── Onglet Tâches d'un dossier (#1334) ──────────────────────
   Ce que l'écran a en propre : les sections repliables, la poignée de
   glisser-déposer, la case « fait ». Tableaux, filtres, badges, boutons,
   saisies rapides et états vides sont ceux du reste de l'application. */
.tb-intro { color: var(--texte-doux); margin: 0 0 14px; max-width: 70rem; }
.tb-etapes { margin: 0 0 14px; padding-left: 20px; color: var(--texte-doux); }
.tb-section > header { flex-wrap: wrap; }
.tb-section > header h2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-caret { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tb-caret .tb-chevron { display: inline-block; transition: transform .15s; }
.tb-section.replie .tb-caret .tb-chevron { transform: rotate(-90deg); }
.tb-section.replie > header { border-bottom: 0; }
.tb-section.replie .tb-corps { display: none; }
.tb-avancement { display: flex; align-items: center; gap: 8px; color: var(--texte-doux); font-size: 12px; font-weight: 400; white-space: nowrap; }
.tb-avancement .barre-progression { width: 90px; height: 6px; }
.tb-outils { margin-left: auto; }
.tb-outils form { margin: 0; display: flex; gap: 6px; }
.tb-renommer { flex: 1; }
.tb-section.drop-cible { outline: 2px dashed var(--vert); outline-offset: 2px; }

/* Toute la ligne ouvre la tâche : elle le montre au survol. */
.tb-table tbody tr { cursor: pointer; }
.tb-table tbody tr:hover a.tb-nom { color: var(--vert-fonce); text-decoration: underline; }
.tb-table tbody tr:target { background: var(--vert-pale); }
.tb-table tbody tr.clos .tb-nom { color: var(--texte-doux); text-decoration: line-through; }
.tb-table tbody tr.dragging { opacity: .3; }
.tb-table td form { margin: 0; }
.tb-table .col-drag { width: 26px; padding-right: 0; }
.tb-table .col-fait { width: 34px; padding-right: 0; }
.tb-table .col-ouvrir { width: 1%; }
.tb-poignee { cursor: grab; color: var(--texte-doux); user-select: none; font-size: 16px; }

.tb-fait {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid #b9c4bd; background: var(--blanc);
    color: transparent; cursor: pointer; padding: 0; font-size: 13px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.tb-fait:hover { border-color: var(--vert); color: var(--vert); }
tr.clos .tb-fait { background: var(--vert); border-color: var(--vert); color: #fff; }
a.tb-nom { color: var(--texte); font-weight: 600; }
a.tb-nom:hover { color: var(--vert-fonce); }
.tb-condition { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
select.tb-statut { border: 0; border-radius: var(--pilule); font: inherit; font-weight: 600; font-size: 12px; padding: 3px 8px; cursor: pointer; }
select.tb-statut option { background: var(--blanc); color: var(--texte); font-weight: normal; }
.tb-depot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.tb-depot form { margin: 0; }
.tb-ajout { padding: 12px 16px; background: var(--fond); border-radius: 0 0 var(--radius) var(--radius); }

/* Fiche d'une tâche : commentaires dans le fil d'historique (.journal). */
.journal li.commentaire { background: var(--fond); border-left-color: var(--vert); padding-right: 12px; }
.commentaire-tete { display: flex; align-items: center; gap: 8px; }
.commentaire-tete form { margin: 0 0 0 auto; }
.commentaire-corps { margin-top: 4px; overflow-wrap: anywhere; }
.depot-fichiers { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }

/* Panneau latéral d'une tâche (tache/_tiroir.html.twig). */
.tp-tiroir {
    position: fixed; top: 0; right: 0; height: 100vh; width: 520px; max-width: 100%;
    transform: translateX(101%); transition: transform .2s ease; z-index: 60;
    background: var(--blanc); color: var(--texte); border-left: 1px solid var(--bordure);
    box-shadow: -8px 0 24px rgb(22 36 61 / 18%); overflow-y: auto;
}
.tp-tiroir.ouvert { transform: translateX(0); }
.tp-voile { position: fixed; inset: 0; background: rgb(22 36 61 / 35%); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 55; }
.tp-voile.ouvert { opacity: 1; pointer-events: auto; }

.tp-tete {
    display: flex; align-items: flex-start; gap: 1rem; padding: 16px 20px;
    border-bottom: 1px solid var(--bordure); background: var(--fond); position: sticky; top: 0; z-index: 1;
}
.tp-tete-titre { flex: 1; min-width: 0; }
.tp-tete-titre .sous-titre { margin: 0; }
.tp-titre { margin: 0 0 2px; }
.tp-bloc { padding: 16px 20px; }
.tp-suite { border-top: 1px solid var(--bordure); }
.tp-suite .sous-titre { margin: 8px 0 0; }
.tp-attente { padding: 32px 20px; color: var(--texte-doux); }