/* ═══════════════════════════════════════════════════════════════════════
   ÉCRANS INTERNES — espace partenaire et plateforme éditeur.
   Charte v5 (19/08/2026), implémentation du KIT D'INTERFACE ADWEN
   (../adwen-ui-kit) : base neutre volontairement fade (gris froids en oklch,
   repris tels quels de brand.css du kit), marque verte #00e5a0 posée dessus,
   texte encre SUR le vert (jamais de blanc sur le vert vif), violet #7c5cff
   en accent, police Geist servie en local, arrondis 12 px, boutons
   rectangulaires arrondis (le kit n'a PAS de boutons pilule).
   Aucune ombre lourde, aucun dégradé : un outil de travail.

   LA RÈGLE DE CETTE REFONTE : les CLASSES ET LES VARIABLES GARDENT LEUR
   NOM. Tous les écrans internes (admin ET espace partenaire) se restylent
   par les seules valeurs du :root ci-dessous. Renommer une classe ici,
   c'est casser un écran qu'on n'a pas rouvert.

   Une seule feuille pour les deux espaces, à dessein. Ce sont deux vues du
   même objet — une conciergerie — regardées à dix minutes d'intervalle par
   deux personnes qui se parlent. Deux feuilles auraient divergé en un mois.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2')}
/* Geist, la police du kit Adwen (layout.example.tsx la charge depuis Google ;
   ici elle est servie en local, comme Inter). Latin + latin-ext, 400-700. */
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/geist-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF}

/* Jetons du kit (adwen-ui-kit/src/app/brand.css) traduits sur les noms de
   variables historiques — LA RÈGLE TIENT : les classes et les variables
   gardent leur nom, seules les valeurs changent. Les gris viennent en oklch,
   repris à l'identique de la base neutre du kit ; la marque vient de
   examples/brand.adwen.css. `--cadastre` reste le vert DE TEXTE (#00805a) :
   le vert de marque #00e5a0 ne passe pas le contraste comme texte sur blanc,
   il n'est utilisé qu'en fond, sous du texte encre (--cadastre-clair).
   L'ambre (donnée) et la brique (disqualifie) restent la grammaire propre à
   revenuslocatifs.fr : le kit n'a pas ces deux registres, l'admin en a
   besoin. */
:root{
  --encre:oklch(.18 .02 260); --encre-2:oklch(.55 .015 260);
  --papier:oklch(.968 .003 260); --carte:#FFFFFF;
  --cadastre:#00805a; --cadastre-clair:#00e5a0;
  --nuit:#0b0f17; --voile:#e2fbf2;
  --violet:#7c5cff; --violet-voile:#f1edff;
  --accent:oklch(.955 .004 260); --menu-fond:oklch(.988 .002 260);
  --ambre:#D97706; --ambre-texte:#92400E; --ambre-vif:#F59E0B;
  --brique:#DC2626; --brique-voile:#FEF2F2; --trait:oklch(.925 .004 260);
  --titre:Geist,Inter,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --texte:Geist,Inter,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --r:12px; --r-s:8px;
}
*{box-sizing:border-box}
/* Un display: posé par une classe (.bouton en inline-flex…) bat la règle
   navigateur de l'attribut hidden — le même piège que le voile du menu.
   Cette règle rend hidden fiable partout, quoi que pose la classe. */
[hidden]{display:none !important}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--texte);
     font-size:15px;line-height:1.55;
     /* Rendu type SaaS moderne, repris de globals.css du kit */
     letter-spacing:-.011em;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--titre);font-weight:600;letter-spacing:-.015em;margin:0}
h2{font-size:18px;margin-bottom:12px}
h3{font-size:17px}
h4{font-size:14px;margin:20px 0 8px;text-transform:uppercase;letter-spacing:.06em;
   color:var(--encre-2);font-family:var(--texte);font-weight:600}
p{margin:0 0 10px}
a{color:var(--cadastre)}
.secondaire{color:var(--encre-2);font-size:13.5px}
.vide{color:var(--encre-2);font-size:14px;background:var(--papier);border-radius:var(--r-s);
      padding:14px 16px;margin:0}
.nb{font-variant-numeric:tabular-nums}

/* Réservé aux lecteurs d'écran. La règle vivait UNIQUEMENT dans style.css,
   la feuille du site public : les écrans internes ne la chargent pas, et
   toute mention destinée à l'oral s'y affichait en clair. C'est arrivé sur
   la liste de mise en route, qui écrivait « — à faire » à côté de chaque
   titre. Même définition que dans style.css, à ne pas faire diverger. */
.sr-only{position:absolute !important;width:1px !important;height:1px !important;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;background:none !important}

/* ── Bandeau ──────────────────────────────────────────────────────────
   CLAIR depuis la charte v5 : le kit Adwen n'a aucun écran à en-tête sombre,
   la structure type est « Titre de la page + action principale » sur fond
   blanc. Les classes gardent leur nom, seules les valeurs changent. */
.bandeau{background:var(--carte);color:var(--encre);padding:16px 28px;display:flex;
         justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
         border-bottom:1px solid var(--trait)}
.bandeau h1{font-size:20px;color:var(--encre)}
.bandeau .marque{display:flex;align-items:center;gap:12px}
.bandeau .marque img{border-radius:5px}
.bandeau .socle{font-size:11px;color:var(--encre-2);letter-spacing:.08em;
                text-transform:uppercase;margin:0}
.bandeau-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bandeau-nav a{color:var(--encre-2);text-decoration:none;font-size:14px;padding:6px 0;
               border-bottom:2px solid transparent}
.bandeau-nav a:hover{color:var(--encre)}
.bandeau-nav a.actif{color:var(--encre);border-bottom-color:var(--cadastre-clair)}
.lien-sortie{background:none;border:0;color:var(--encre-2);font:inherit;font-size:14px;
             cursor:pointer;padding:6px 0;text-decoration:underline}
.lien-sortie:hover{color:var(--encre)}
.en-ligne{display:inline-flex;align-items:center;gap:8px;margin:0;flex-wrap:wrap}

.page{max-width:1240px;margin:0 auto;padding:24px 28px 72px}
.fil{margin:0 0 14px}

/* ── Avis ────────────────────────────────────────────────────────────── */
.avis{background:var(--voile);border-left:3px solid var(--cadastre);
      padding:12px 16px;border-radius:0 var(--r-s) var(--r-s) 0;margin:0 0 18px}
.avis-brique{background:var(--brique-voile);border-left-color:var(--brique)}

/* ── Cartes ──────────────────────────────────────────────────────────── */
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
       padding:20px 22px;margin:0 0 18px}
.carte-etroite{max-width:460px;margin-inline:auto}
.carte-tete{display:flex;justify-content:space-between;align-items:center;gap:14px;
            flex-wrap:wrap;margin-bottom:12px}
.carte-tete h2{margin:0}

.deux-colonnes{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
@media (max-width:1000px){.deux-colonnes{grid-template-columns:1fr}}
.colonne{min-width:0}

/* ── Compteurs ───────────────────────────────────────────────────────── */
.compteurs{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
           display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
           margin:0 0 18px;overflow:hidden}
.compteur{padding:16px 20px;border-left:1px solid var(--trait);text-decoration:none;
          color:inherit;display:block}
.compteur:first-child{border-left:0}
.compteur .n{font-size:28px;font-weight:600;line-height:1.1;color:var(--cadastre);
             font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.compteur .l{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
             color:var(--encre-2);margin-top:4px}
/* Une case CLIQUABLE doit s'annoncer avant le clic : curseur main, et le
   libellé qui passe au vert au survol. Réservé à `a.compteur` — les mêmes
   cases servent ailleurs en simple affichage (revenus, leads, suivi de
   l'espace) et une main sur un chiffre qui ne fait rien est un mensonge. */
a.compteur{cursor:pointer;transition:background .12s}
a.compteur:hover{background:var(--voile)}
a.compteur:hover .l{color:var(--cadastre)}
/* L'ÉTAT ACTIF NE PEUT PAS ÊTRE CELUI DU SURVOL. Il l'était — les deux
   posaient --voile, et rien ne distinguait « la case sous ma souris » de
   « le filtre appliqué ». L'actif garde le voile ET porte un trait plein en
   pied, posé en ombre interne pour ne pas décaler la grille d'un pixel. */
.compteur-actif{background:var(--voile);box-shadow:inset 0 -3px 0 var(--cadastre-clair)}
.compteur-actif .l{color:var(--encre)}
/* Un compteur à zéro n'a rien à dire : estompé, il laisse la place à ceux qui
   demandent une action. Il reste cliquable — voir une file vide est une
   réponse. */
.compteur-vide .n{color:var(--encre-2);opacity:.45}
.compteur-vide .l{opacity:.6}
/* Titre de la rangée. Sans lui, six chiffres alignés se lisent comme un
   tableau de bord ; avec lui, ils se lisent comme des boutons. */
.compteurs-titre{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
                 color:var(--encre-2);margin:0 0 8px}

/* ── Cloche de notifications ─────────────────────────────────────────── */
/* Le bandeau vit HORS de .page (il est rendu par la colonne de navigation) :
   il reprend donc lui-même le gabarit de la page — même largeur maximale,
   même retrait latéral — sinon la cloche ne tomberait pas sur la verticale
   du titre qu'elle surplombe. */
.notif-barre{max-width:1240px;margin:0 auto;padding:20px 28px 0}
.notif{position:relative}
.notif-cloche{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
              background:var(--carte);border:1px solid var(--trait);
              border-radius:var(--r-s);padding:8px 14px;font-size:13.5px;
              color:var(--encre);list-style:none;user-select:none}
/* Safari dessine sa propre flèche de <summary> : elle ferait deux marqueurs
   pour une seule bascule. */
.notif-cloche::-webkit-details-marker{display:none}
.notif-cloche:hover{background:var(--voile)}
.notif-pastille{background:var(--cadastre-clair);color:var(--nuit);font-weight:600;
                font-size:12px;line-height:1;padding:4px 7px;border-radius:999px;
                font-variant-numeric:tabular-nums}
.notif-resume{color:var(--encre-2)}
.notif[open] .notif-cloche{background:var(--voile);border-color:var(--cadastre-clair)}

/* Le panneau flotte au lieu de pousser le contenu : ouvrir la cloche ne doit
   pas déplacer sous la souris l'écran qu'on était en train de lire. Il passe
   SOUS le tiroir de navigation (z-index 20 et plus) : sur téléphone, le menu
   ouvert doit rester au-dessus. */
.notif-panneau{position:absolute;top:calc(100% + 8px);left:0;z-index:15;
               width:min(460px,calc(100vw - 40px));background:var(--carte);
               border:1px solid var(--trait);border-radius:var(--r);
               max-height:min(70vh,560px);overflow-y:auto}
.notif-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;
            padding:14px 16px;border-bottom:1px solid var(--trait);
            position:sticky;top:0;background:var(--carte)}
.notif-tete p{margin:0;font-weight:600;font-size:14px}
.notif-tete form{margin:0}
.notif-groupe{display:flex;align-items:center;gap:8px;margin:0;
              padding:12px 16px 6px;font-size:11px;text-transform:uppercase;
              letter-spacing:.08em;color:var(--encre-2)}
.notif-groupe-nb{background:var(--accent);border-radius:999px;padding:2px 7px;
                 font-size:11px;letter-spacing:0}
.notif-liste{list-style:none;margin:0;padding:0}
.notif-liste li{display:flex;align-items:stretch;gap:6px;padding:0 10px 0 6px;
                border-bottom:1px solid var(--trait)}
.notif-liste li:last-child{border-bottom:0}
.notif-liste form{margin:0;display:flex}
.notif-forme{flex:1;min-width:0}
/* La ligne est un BOUTON (elle marque lu avant d'emmener), et doit se lire
   comme une ligne de liste : pas de fond, pas de bordure, texte à gauche. */
.notif-ligne{flex:1;min-width:0;display:block;text-align:left;background:none;
             border:0;cursor:pointer;font:inherit;color:inherit;padding:11px 10px;
             border-radius:var(--r-s)}
.notif-ligne:hover{background:var(--voile)}
.notif-titre{display:block;font-size:14px;font-weight:500;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-detail{display:block;font-size:12.5px;color:var(--encre-2);margin-top:2px;
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-lu{align-self:center;background:none;border:1px solid var(--trait);
          border-radius:var(--r-s);color:var(--encre-2);cursor:pointer;
          font:inherit;font-size:12px;padding:5px 10px}
.notif-lu:hover{background:var(--voile);color:var(--cadastre);
                border-color:var(--cadastre-clair)}

@media (max-width:900px){
  /* Sur téléphone, le panneau prend la largeur utile : une colonne de 460 px
     ancrée à gauche déborderait de l'écran. */
  .notif-barre{padding:14px 16px 0}
  .notif-panneau{width:calc(100vw - 32px)}
}

/* ── Registre (tableaux) ─────────────────────────────────────────────── */
.registre{width:100%;border-collapse:collapse;font-size:14px}
.registre th{text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;
             letter-spacing:.07em;color:var(--encre-2);padding:8px 10px;
             border-bottom:1px solid var(--trait)}
.registre td{padding:10px;border-bottom:1px solid var(--trait);vertical-align:top}
.registre tr:last-child td{border-bottom:0}
.registre td .secondaire{display:block;font-size:12.5px}
.valeur-alerte{color:var(--brique);font-weight:600}

/* ── Pastilles de statut ─────────────────────────────────────────────── */
.pastille{display:inline-block;font-size:12px;padding:3px 9px;border-radius:999px;
          border:1px solid var(--trait);white-space:nowrap}
.pastille-active{background:var(--voile);border-color:var(--cadastre);color:var(--cadastre)}
.pastille-en_attente_validation{background:#FEF3C7;border-color:var(--ambre);color:var(--ambre-texte)}
/* « En attente » n'est PAS de la même famille visuelle que « À vérifier »,
   bien que les deux soient ambre : celle-ci est en pointillé, parce qu'elle
   n'attend rien de nous. Le remplissage aurait dit « travail à faire » sur
   une ligne où il n'y en a pas. */
/* ── LA FENÊTRE DU CLASSEMENT (Tickets, 20/08/2026) ───────────────────
   <dialog> NATIF : le navigateur centre, empile au-dessus de tout, grise le
   fond et piège le focus. Rien de tout cela n'est écrit ici — il ne reste
   que l'habillage, et c'est le meilleur argument pour l'élément natif.
   Largeur bornée en ch plutôt qu'en pixels : ce qu'on écrit là est une
   phrase, et une phrase se lit mal sur quatre-vingts caractères de large. */
.modale{border:0;border-radius:var(--r);background:var(--carte);color:var(--encre);
        padding:20px;width:min(56ch,calc(100vw - 32px));
        box-shadow:0 18px 48px rgba(11,15,23,.22)}
.modale::backdrop{background:rgba(11,15,23,.45)}
.modale h2{margin:0 0 6px}
.modale textarea{width:100%;resize:vertical}
/* La citation du ticket : plafonnée en hauteur et défilante. Un partenaire a
   droit à 1200 signes, et personne ne doit chercher le bouton « Classer »
   sous un pavé. */
.modale-citation{margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--trait);
                 background:var(--papier);color:var(--encre-2);font-size:13px;
                 white-space:pre-wrap;max-height:9em;overflow:auto}
.modale-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}

/* SANS PAIEMENT : ambre comme « À vérifier », pas rouge. C'est une file qui
   attend un geste de la conciergerie, pas une faute — et sur douze lignes,
   douze pastilles rouges feraient lire une panne. */
.pastille-sans_paiement{background:#FEF3C7;border-color:var(--ambre);color:var(--ambre-texte)}
.pastille-attente{background:transparent;border-style:dashed;border-color:var(--ambre);
                  color:var(--ambre-texte)}
.pastille-brouillon{color:var(--encre-2)}
.pastille-suspendue{background:var(--brique-voile);border-color:var(--brique);color:var(--brique)}
.pastille-archivee{color:var(--encre-2);text-decoration:line-through}
.pastille-initiales{display:inline-flex;align-items:center;justify-content:center;
     width:80px;height:80px;border-radius:999px;background:var(--voile);
     color:var(--cadastre);font-family:var(--titre);font-size:26px;flex:0 0 auto}

/* ── Formulaires ─────────────────────────────────────────────────────── */
label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],
input[type=number],input[type=password],select,textarea{
  width:100%;font:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--trait);
  border-radius:var(--r-s);background:#fff;color:var(--encre)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cadastre-clair);outline-offset:1px}
textarea{resize:vertical}
/* ── SOUS 640 px, LES CHAMPS PASSENT À 16 px ──────────────────────────
   Ce n'est pas un choix de taille, c'est un seuil : Safari iOS zoome sur
   tout champ dont le texte fait moins de 16 px, dès la mise au point — et
   il ne dézoome pas quand on en sort. La page reste agrandie et décalée, le
   bouton d'envoi passe hors champ, il faut pincer pour le retrouver. À 15 px
   on gagnait un cheveu de densité et on perdait l'usage au doigt.

   `.carte-notes` est repris explicitement : sa règle est plus spécifique et
   déclarée plus bas, elle repasserait sinon ses champs à 14 px. */
@media (max-width:640px){
  input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],
  input[type=number],input[type=password],input[type=date],select,textarea,
  .carte-notes textarea,.carte-notes input[type=date]{font-size:16px}
}
.champ{margin:0 0 14px}
.champ-erreur{color:var(--brique);font-size:13px;margin:6px 0 0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.duo{grid-template-columns:1fr}}
.bloc{margin-top:18px;padding-top:18px;border-top:1px solid var(--trait)}
.bloc-archivage{margin-top:18px;padding-top:18px;border-top:1px solid var(--trait)}
/* La mise en attente (migration 030) partage la mise en page de l'archivage :
   même filet de séparation, même respiration. Ce sont les deux sorties d'un
   dossier qu'on ne valide pas — l'une le garde ouvert, l'autre le ferme —, et
   les dessiner pareil dit qu'elles se choisissent au même moment. */
.bloc-attente{margin-top:18px;padding-top:18px;border-top:1px solid var(--trait)}
.bloc-attente textarea{width:100%;margin:6px 0 10px}
.attente-motif{margin:0 0 12px;padding:10px 14px;border-left:3px solid var(--ambre);
               background:var(--papier);border-radius:0 var(--r-s) var(--r-s) 0;
               font-size:14px;white-space:pre-line}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.case{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:14px;
      margin:0 0 8px;cursor:pointer}
.case input{width:17px;height:17px;margin-top:2px;accent-color:var(--cadastre);flex:0 0 auto}

/* Boutons du kit (ui/button.tsx) : rectangle arrondi rounded-lg, texte
   14 px / graisse 500 — PAS de pilule dans le kit. Le principal est le vert
   de marque sous texte encre (brand + brand-foreground), l'appui l'éclaircit
   comme le hover:bg-primary/80 du kit. `sobre` suit la variante `outline`
   (bord gris, fond blanc, survol gris) ; `danger` suit `destructive`
   (voile brique + texte brique, sans bord). */
.bouton{display:inline-flex;align-items:center;gap:6px;
        background:var(--cadastre-clair);color:var(--encre);
        border:1px solid transparent;border-radius:var(--r);padding:8px 14px;
        font-family:var(--texte);font-size:14px;font-weight:500;cursor:pointer;
        text-decoration:none;white-space:nowrap}
.bouton:hover{background:color-mix(in oklch,var(--cadastre-clair) 80%,white)}
.bouton[disabled]{background:var(--trait);color:var(--encre-2);cursor:not-allowed}
.bouton-mince{padding:5px 11px;font-size:13.5px}
.bouton-sobre{background:var(--carte);color:var(--encre);border-color:var(--trait)}
.bouton-sobre:hover{background:var(--papier);color:var(--encre)}
.bouton-danger{background:var(--brique-voile);color:var(--brique);border-color:transparent}
.bouton-danger:hover{background:color-mix(in oklch,var(--brique-voile) 92%,var(--brique))}
.lien-danger{background:none;border:0;color:var(--brique);font:inherit;font-size:13px;
             cursor:pointer;text-decoration:underline;padding:0}

/* ── Listes de faits ─────────────────────────────────────────────────── */
.fiches-faits{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
              gap:2px 18px}
.fiches-faits > div{padding:8px 0;border-bottom:1px solid var(--trait)}
.fiches-faits dt{font-size:11px;text-transform:uppercase;letter-spacing:.07em;
                 color:var(--encre-2)}
.fiches-faits dd{margin:2px 0 0;font-size:14.5px}

.manques{margin:0 0 14px;padding-left:20px;color:var(--brique);font-size:14px}
.manques li{margin:3px 0}
.verifs{list-style:none;margin:0;padding:0}
.verifs li{padding:10px 0;border-bottom:1px solid var(--trait)}
.verifs li:last-child{border-bottom:0}
.verifs .secondaire{display:block}

.liste-engagements{list-style:none;margin:0;padding:0}
.liste-engagements li{padding:12px 0;border-bottom:1px solid var(--trait)}
.liste-engagements li:last-child{border-bottom:0}
.liste-engagements p{margin:0}

/* ── Aperçu public de la fiche ───────────────────────────────────────── */
.apercu{background:var(--papier);border-radius:var(--r-s);padding:18px}
.apercu-entete{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.apercu-logo{max-width:120px;height:auto}
.apercu-gerant{display:flex;gap:16px;align-items:flex-start;background:var(--carte);
               border:1px solid var(--trait);border-radius:var(--r-s);padding:16px;margin:14px 0}
.apercu-gerant img{border-radius:999px;object-fit:cover;flex:0 0 auto}
.apercu-gerant blockquote{margin:0;font-family:var(--titre);font-size:17px;line-height:1.45}
.signature{margin:8px 0 0;font-size:13.5px;color:var(--encre-2)}
.apercu-services{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.apercu-services li{background:var(--carte);border:1px solid var(--trait);border-radius:999px;
                    padding:4px 11px;font-size:13px}

/* ── Demandes (espace partenaire) ────────────────────────────────────── */
.demandes{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.demande{border:1px solid var(--trait);border-radius:var(--r);padding:16px 18px}
.demande-ouverte{border-color:var(--cadastre)}
.demande-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
              flex-wrap:wrap}
.demande-commune{font-family:var(--titre);font-size:18px;margin:0}
.demande-ref{font-size:12.5px;color:var(--encre-2);margin:0;font-variant-numeric:tabular-nums}
.demande-faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
               gap:2px 14px;margin:12px 0}
.demande-faits dt{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--encre-2)}
.demande-faits dd{margin:1px 0 0;font-size:14.5px}
.demande-estimation{background:var(--papier);border-radius:var(--r-s);padding:10px 12px;
                    font-size:14px;font-variant-numeric:tabular-nums}
.demande-estimation strong{color:var(--ambre-texte)}
.indice{color:var(--encre-2);font-size:12.5px;margin-left:6px}
.demande-pied{display:flex;justify-content:space-between;align-items:center;gap:14px;
              flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--trait)}
.demande-prix{font-size:20px;font-weight:600;margin:0;font-variant-numeric:tabular-nums}
.demande-attente{margin:0;font-size:13.5px;color:var(--encre-2)}

.contact{background:var(--voile);border-radius:var(--r-s);padding:12px 14px;margin:12px 0}
.contact-nom{font-family:var(--titre);font-size:17px;margin:0 0 2px}
.preuve{border:1px solid var(--trait);border-radius:var(--r-s);padding:10px 14px;margin:0 0 12px}
.preuve summary{cursor:pointer;font-weight:600;font-size:14px}
.preuve blockquote{margin:10px 0;padding-left:12px;border-left:2px solid var(--trait);
                   font-size:14px;color:var(--encre-2)}
.alerte-inline{color:var(--brique);font-weight:600;font-size:13px;margin-left:8px}
.closing{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.closing label{margin:0 0 8px}
.closing select{width:auto;min-width:170px}

.media-actuel{display:flex;align-items:flex-end;gap:16px;margin:0 0 10px}
.media-actuel img{border-radius:var(--r-s);object-fit:cover;display:block}
.media-actuel figure{margin:0}
.media-actuel figcaption{margin-top:4px;font-size:12px}

/* ── Titre d'écran ───────────────────────────────────────────────────
   Il remplace l'ancien bandeau horizontal : la marque et la navigation
   sont passées dans la colonne de gauche, le haut de page n'a plus qu'à
   dire où l'on est. */
.page-tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.page-tete h1{font-family:var(--titre);font-size:24px;font-weight:600;
              letter-spacing:-.015em;margin:0}
/* Le groupe d'actions de l'en-tête : poussé à droite, c'est la place de
   l'action principale dans la structure d'écran du kit (« Titre de la page +
   [Action principale] », CONVENTIONS.md). */
.page-tete .tete-actions{margin-left:auto;display:flex;gap:10px;align-items:center;
                         flex-wrap:wrap}

/* ── Panneau « créer » de l'en-tête ──────────────────────────────────
   Un <details> : le bouton est le summary, le formulaire s'ouvre dans un
   panneau posé sous lui. Sans JavaScript, tout fonctionne — c'est le
   comportement natif de l'élément. Sur petit écran le panneau redevient un
   bloc dans le flux : un panneau flottant de 90 vw cache tout le reste. */
.entete-creer{position:relative}
.entete-creer>summary{list-style:none;cursor:pointer}
.entete-creer>summary::-webkit-details-marker{display:none}
.entete-creer .panneau{position:absolute;right:0;top:calc(100% + 8px);z-index:30;
  width:min(460px,calc(100vw - 48px));background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--r);padding:18px 20px;
  box-shadow:0 12px 32px rgba(15,23,42,.12)}
.entete-creer .panneau h2{margin-bottom:10px}
@media (max-width:640px){
  .entete-creer{position:static}
  .entete-creer .panneau{position:static;width:auto;margin-top:10px;box-shadow:none}
}

/* ── Grille d'intégrations (Réglages, sur le modèle Adwen OS) ────────── */
.grille-integrations{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
                     gap:14px;margin:0 0 18px;align-items:start}
.grille-integrations .carte{margin:0}
.integration-tete{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.integration-icone{width:36px;height:36px;border-radius:10px;display:grid;
  place-items:center;font-weight:700;font-size:15px;flex:0 0 auto}
.integration-tete h2{margin:0;flex:1;font-size:16px}
.badge-etat{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;
            white-space:nowrap}
.badge-connecte{background:var(--cadastre-clair);color:var(--encre)}
.badge-configure{background:var(--voile);color:var(--cadastre)}
.badge-absent{background:var(--papier);color:var(--encre-2);
              border:1px solid var(--trait)}
/* Configurée mais le dernier test a échoué : l'état du milieu de la
   convention n°2 du kit — jamais « Connectée » sur la seule présence d'une
   clé. */
.badge-panne{background:var(--brique-voile);color:var(--brique)}
.profil-photo{width:56px;height:56px;border-radius:999px;object-fit:cover;
              flex:0 0 auto;background:var(--papier)}
/* Le déplié « Configurer » d'une carte d'intégration. */
.configurer>summary{list-style:none;cursor:pointer;font-size:14px;font-weight:500;
  color:var(--encre);display:inline-flex;align-items:center;gap:6px;
  padding:4px 0;margin-top:4px}
.configurer>summary::-webkit-details-marker{display:none}
.configurer>summary::after{content:"▾";font-size:11px;color:var(--encre-2)}
.configurer[open]>summary::after{content:"▴"}
.configurer .configurer-corps{margin-top:12px;padding-top:12px;
                              border-top:1px solid var(--trait)}

/* ── Le graphique des leads (includes/graphe-leads.php) ──────────────
   Une seule série : une seule teinte (cadastre), aucune légende — le titre
   dit ce qui est tracé. Les jours vides sont dessinés à zéro : les sauter
   resserrerait les colonnes et laisserait croire à un flux continu.
   Déplacé ici depuis l'écran Leads le 19/08/2026, quand le graphique a
   déménagé sur le Dashboard. */
.graphe{background:var(--carte);border:1px solid var(--trait);
        border-radius:var(--r);padding:18px 20px 14px;margin:0 0 18px}
.graphe-tete{display:flex;justify-content:space-between;align-items:baseline;
             gap:12px;flex-wrap:wrap;margin-bottom:14px}
.graphe-tete h2{font-size:17px}
.graphe-tete .sous{font-size:12.5px;color:var(--encre-2)}
.graphe svg{display:block;width:100%;height:auto}
.g-grille{stroke:var(--trait);stroke-width:1}
.g-axe{fill:var(--encre-2);font-size:11px;font-variant-numeric:tabular-nums}
.g-barre{fill:var(--cadastre)}
.g-zero{fill:var(--trait)}
.g-pic{fill:var(--encre);font-size:11px;font-weight:600;
       font-variant-numeric:tabular-nums}
.g-touche{fill:transparent;cursor:default}
.g-touche:hover ~ .g-barre,.g-colonne:hover .g-barre{fill:var(--cadastre-clair)}
.g-infobulle{position:absolute;z-index:40;pointer-events:none;opacity:0;
             transition:opacity .1s;background:var(--nuit);color:#fff;
             border-radius:var(--r-s);padding:7px 10px;font-size:12.5px;
             line-height:1.35;white-space:nowrap;transform:translate(-50%,-100%)}
.g-infobulle.visible{opacity:1}
.g-infobulle .j{color:#8b93a5;font-size:11px}
.graphe-hote{position:relative}

/* ── Éditeur visuel des campagnes ────────────────────────────────────── */
.editeur-outils{display:flex;gap:4px;flex-wrap:wrap;padding:8px;
  border:1px solid var(--trait);border-bottom:0;
  border-radius:var(--r-s) var(--r-s) 0 0;background:var(--papier)}
.editeur-outils button{background:var(--carte);border:1px solid var(--trait);
  border-radius:7px;padding:5px 10px;font:inherit;font-size:13px;cursor:pointer;
  color:var(--encre)}
.editeur-outils button:hover{background:var(--voile);border-color:var(--cadastre)}
.editeur-outils .sep{width:1px;background:var(--trait);margin:2px 4px}
.editeur-zone{border:1px solid var(--trait);border-radius:0 0 var(--r-s) var(--r-s);
  background:#fff;min-height:280px;padding:18px 20px;font-size:15px;line-height:1.6;
  max-width:100%;overflow-wrap:break-word}
.editeur-zone:focus{outline:2px solid var(--cadastre-clair);outline-offset:1px}
.editeur-zone h1,.editeur-zone h2,.editeur-zone h3{margin:0 0 10px;font-family:inherit}
.editeur-zone p{margin:0 0 12px}
.editeur-zone a{color:var(--cadastre)}
.editeur-zone .bouton-mail{display:inline-block;background:#00e5a0;color:#0b0f17;
  padding:11px 22px;border-radius:8px;font-weight:600;text-decoration:none}

/* ── Écart avant / après (validation des modifications) ──────────────
   Deux colonnes côte à côte, l'ancienne valeur en gris, la nouvelle en
   encre pleine. Une valeur seule ne se juge pas : « 06 12 34 56 78 » ne
   dit rien sans le numéro qu'il remplace. */
.registre-ecart td{width:33%;vertical-align:top}
.registre-ecart .avant{color:var(--encre-2)}
.registre-ecart .apres{font-weight:500;background:var(--voile)}
.vide-inline{color:var(--encre-2);font-style:italic}
.apercu-media{border-radius:var(--r-s);display:block}

.avis-ambre{background:#FEF3C7;border-left-color:var(--ambre)}
.avis-liste{margin:6px 0 8px;padding-left:20px;font-size:14px}
.avis-liste li{margin:2px 0}
.avis form{margin:0}

.carte-action{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.carte-action .secondaire{margin:0;max-width:70ch}

.titre-connexion{font-family:var(--titre);font-size:22px;margin:0 0 4px}
.carte-etroite{margin-top:48px}

/* ── Observation par l'éditeur ────────────────────────────────────────
   Bandeau BRIQUE et pleine largeur, en haut de tous les écrans de l'espace.
   Il doit être impossible d'oublier qu'on regarde le compte de quelqu'un
   d'autre : c'est ce qui évite de commenter au téléphone un chiffre qu'on
   croit être le sien. */
.bandeau-observation{background:var(--brique);color:#fff;padding:12px 18px;
    border-radius:var(--r-s);margin:0 0 18px;display:flex;gap:16px;
    align-items:center;justify-content:space-between;flex-wrap:wrap}
.bandeau-observation p{margin:0;font-size:14px;max-width:80ch}
.bandeau-observation button{background:#fff;color:var(--brique);border:0;
    border-radius:var(--r-s);padding:8px 14px;font:inherit;font-weight:500;cursor:pointer}
.bandeau-observation button:hover{background:var(--brique-voile)}

/* ── Secteur : jetons de communes et recherche ───────────────────────
   Repris du formulaire de candidature, à l'identique dans le principe :
   le partenaire qui modifie son secteur retrouve le geste qu'il a fait à
   l'inscription. */
.jetons{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.jetons li{display:flex;align-items:center;gap:8px;background:var(--voile);
           border-radius:999px;padding:5px 6px 5px 13px;font-size:14px}
.jetons small{color:var(--encre-2);font-variant-numeric:tabular-nums}
.jeton-retirer{border:0;background:#fff;color:var(--encre-2);width:22px;height:22px;
               border-radius:999px;cursor:pointer;font-size:15px;line-height:1}
.jeton-retirer:hover{background:var(--brique);color:#fff}
.recherche-commune{display:flex;gap:8px;align-items:stretch}
.recherche-commune input{flex:1}
.retenu{background:var(--voile);border-radius:var(--r-s);padding:8px 12px;margin:0 0 8px}
.choix-communes{border:1px solid var(--trait);border-radius:var(--r-s);padding:12px 14px;
                margin:10px 0 0}
.choix-communes ul{list-style:none;margin:0 0 10px;padding:0}
.choix-communes li{padding:4px 0}
.choix-communes label{font-weight:400;display:flex;gap:8px;align-items:baseline;cursor:pointer}

.segments{display:flex;flex-wrap:wrap;gap:8px}
.segment{position:relative;margin:0}
.segment input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.segment span{display:block;border:1px solid var(--trait);border-radius:999px;
              padding:7px 14px;font-size:14px;background:#fff}
.segment input:checked + span{border-color:var(--cadastre);background:var(--voile);font-weight:600}
.segment input:focus-visible + span{outline:2px solid var(--cadastre-clair);outline-offset:2px}

.champ-unite{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.champ-unite span{color:var(--encre-2);font-size:14px}
.champ-court{max-width:110px}
fieldset{border:0;padding:0;margin:0 0 14px}
legend{font-size:13px;font-weight:600;padding:0;margin-bottom:6px}
.ligne-sensible td:first-child{border-left:3px solid var(--brique);padding-left:8px}

/* ═══════════════════════════════════════════════════════════════════════
   TABLEAU DE SUIVI — cinq colonnes, une par étape du closing.

   Défilement HORIZONTAL assumé plutôt que colonnes qui rétrécissent : à
   cinq colonnes sur un écran de bureau étroit, chacune ferait 180 px et une
   carte n'y tiendrait plus. On préfère faire glisser que faire deviner.

   LE CONTENEUR EST DÉCRIT PLUS BAS, sous `.kanban-suivi`, APRÈS le kanban
   générique (20/08/2026). Les deux tableaux portaient la même classe
   `.kanban` avec deux mises en page contradictoires : la seconde ne
   remplaçait que `grid-template-columns`, `grid-auto-flow:column` restait
   posé, et sur téléphone la première colonne se pliait à la largeur d'un mot
   pendant que les suivantes lui passaient dessus. Une classe, une mise en
   page — c'est la règle qui manquait.
   ═══════════════════════════════════════════════════════════════════════ */
.kanban-colonne{background:var(--carte);border:1px solid var(--trait);
                border-radius:var(--r);padding:14px;min-width:0}
.kanban-tete{margin:0 0 12px}
.kanban-tete h2{font-size:15px;display:flex;align-items:center;gap:8px;margin:0}
.kanban-n{background:var(--voile);color:var(--cadastre);border-radius:999px;
          padding:1px 8px;font-size:12px;font-family:var(--texte);
          font-variant-numeric:tabular-nums}
.kanban-aide{font-size:12px;color:var(--encre-2);margin:3px 0 0}
.kanban-cartes{display:flex;flex-direction:column;gap:10px;min-height:60px}
.kanban-vide{color:var(--trait);text-align:center;margin:12px 0;font-size:20px}
.kanban-note{max-width:80ch;margin:8px 0 0}

/* La colonne « signé » est la seule en cadastre plein : c'est la seule qui
   rapporte, et une colonne qui rapporte doit se voir de loin. */
.kanban-signe{border-color:var(--cadastre)}
.kanban-signe .kanban-n{background:var(--cadastre);color:#fff}
.kanban-perdu{opacity:.72}
.kanban-nouveau{border-color:var(--ambre)}
.kanban-nouveau .kanban-n{background:var(--ambre);color:#fff}

/* ── Une carte ───────────────────────────────────────────────────────── */
.carte-lead{border:1px solid var(--trait);border-radius:var(--r-s);padding:11px 12px;
            background:#fff;font-size:14px;cursor:grab}
.carte-lead:active{cursor:grabbing}
.carte-lead.glisse{opacity:.45}
.kanban-colonne.survolee{background:var(--voile)}
/* Une demande payée qui dort : le propriétaire a écrit à trois conciergeries
   le même soir, et c'est la première qui rappelle qui signe. */
.carte-urgente{border-color:var(--brique);border-left-width:3px}
.carte-lead-tete{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.carte-commune{font-family:var(--titre);font-size:16px;margin:0}
.carte-prix{margin:0;font-size:13px;color:var(--encre-2);font-variant-numeric:tabular-nums}
.carte-contact{margin:8px 0;line-height:1.45}
.carte-bien{margin:0 0 8px;color:var(--encre-2);font-size:13px}
.carte-estimation{color:var(--ambre-texte);font-variant-numeric:tabular-nums}
.carte-alerte{background:var(--brique-voile);color:var(--brique);border-radius:6px;
              padding:6px 9px;font-size:12.5px;margin:0 0 8px;font-weight:500}
.carte-note{background:var(--papier);border-radius:6px;padding:7px 9px;font-size:13px;
            margin:0 0 8px;white-space:pre-line}
.carte-pied{font-size:12px;color:var(--encre-2);margin:0 0 8px;
            font-variant-numeric:tabular-nums}
.relance-due{color:var(--brique);font-weight:600}

/* Déplacer : des boutons plats, un par colonne voisine. Ils sont le socle du
   tableau, pas un repli — le glisser-déposer ne fait qu'éviter un clic. */
.carte-deplacer{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.bouton-colonne{background:var(--papier);border:1px solid var(--trait);border-radius:999px;
                padding:4px 10px;font:inherit;font-size:12px;cursor:pointer;color:var(--encre-2)}
.bouton-colonne:hover{background:var(--voile);border-color:var(--cadastre);color:var(--cadastre)}
.carte-notes{margin:9px 0 0}
.carte-notes summary{font-size:12.5px;color:var(--encre-2);cursor:pointer}
.carte-notes label{margin-top:8px;font-size:12px}
.carte-notes textarea,.carte-notes input[type=date]{font-size:14px;padding:7px 9px}
.carte-notes .bouton{margin-top:8px}
/* L'adresse n'apparaît que sur une demande débloquée : elle fait partie du
   bloc contact, jamais servi avant paiement. */
.carte-adresse{color:var(--encre);font-weight:500}

/* ── Numérotation et nombre de fiches ──────────────────────────────────
   Le rang est un repère de comptage, pas une donnée : il reste en retrait
   pour ne pas concurrencer le statut et la raison sociale, qui sont ce
   qu'on lit vraiment. */
.registre .rang{color:var(--encre-2);width:1%;white-space:nowrap;
                padding-right:4px;text-align:right}

/* Le nombre de fiches, posé à côté du titre de la carte : il répond à
   « combien y en a-t-il » sans faire défiler jusqu'au bas du tableau. */
.compte-fiches{margin-left:10px;font-family:var(--texte);font-size:13px;
               font-weight:500;color:var(--encre-2);
               font-variant-numeric:tabular-nums;
               letter-spacing:0;text-transform:none}

/* ═══════════════════════════════════════════════════════════════════════
   TÉLÉPHONE

   Ces écrans étaient dessinés pour le bureau et servis tels quels au
   téléphone : un tableau de huit colonnes débordait de sa carte ET de la
   page, si bien que le document devenait plus large que l'écran. Deux
   conséquences visibles : les dernières colonnes étaient inatteignables, et
   la barre de menu fixée, dimensionnée sur le document, débordait avec lui.

   Le tableau défile donc DANS sa carte, et la carte seule. La page, elle,
   ne défile jamais de côté : c'est la règle qui rend le reste lisible.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width:900px){
  /* 28 px de marge de chaque côté sur un écran de 375 en coûtent 56 au
     contenu, soit une colonne entière du tableau. */
  .page{padding:20px 16px 56px}

  /* La carte devient le conteneur de défilement. Pas le tableau lui-même :
     le passer en display:block referait sa mise en page interne, et ces
     tableaux ont des colonnes calées à la main (le rang, les nombres). */
  .carte{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Un tableau qui défile ne doit pas d'abord essayer de tenir en écrasant
     ses colonnes : « Non renseigné » sur quatre lignes d'un caractère est
     illisible bien avant d'être compact. */
  .registre{width:auto;min-width:100%}
  .registre th,.registre td{white-space:nowrap}
  /* Sauf la raison sociale et les communes, qui sont du texte et non des
     étiquettes : elles gardent le droit de revenir à la ligne. */
  .registre td .secondaire{white-space:normal}

  /* LE BANDEAU SUIT LA MÊME MARGE QUE LA PAGE (20/08/2026). Il gardait ses
     28 px pendant que le contenu passait à 16 : le titre et le premier
     compteur ne tombaient pas sur la même verticale, et c'est ce décalage-là
     qu'on voit en premier sur un écran de téléphone. */
  .bandeau{padding:14px 16px}
}

/* Le même défilement, à TOUTE LARGEUR, pour les cartes qui portent un
   registre (20/08/2026). La règle ne vivait que sous 900 px ; entre 900 et
   ~1250 — tablette en paysage, fenêtre à moitié d'écran — un tableau de huit
   colonnes ne peut pas se comprimer davantage et repousse la page de côté.
   `:has()` ne vise que la carte qui contient un tableau : une carte de
   formulaire garde son débordement visible, ses panneaux dépliés en
   dépendent. */
.carte:has(>.registre){overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── L'en-tête d'écran au téléphone ───────────────────────────────────
   `margin-left:auto` pousse le groupe d'actions à droite du titre : c'est la
   structure du kit au bureau. Dès que le groupe passe à la ligne, ce même
   `auto` le pousse contre le bord droit et laisse un trou à gauche — le
   sélecteur de période du Dashboard flottait ainsi seul en l'air, et
   « Personnaliser » restait collé à gauche en dessous. Sous 640 px, les
   actions redeviennent une ligne pleine largeur, alignée sur le titre. */
@media (max-width:640px){
  .page-tete{gap:10px 12px}
  .page-tete .tete-actions{margin-left:0;width:100%}
  /* Écrit avec `.page-tete` devant : `.selecteur-periode{margin-left:auto}`
     est déclaré plus BAS dans cette feuille, et à spécificité égale c'est la
     dernière règle qui gagne, requête média ou non. */
  .page-tete .selecteur-periode{margin-left:0}
  /* Le panneau « créer » est déjà remis dans le flux à cette largeur ; il lui
     manquait de prendre la ligne entière UNE FOIS OUVERT. Fermé, son bouton
     reste un bouton parmi les autres et se replie avec eux : trois actions
     étirées sur trois lignes pleines annoncent trois fois la même
     importance, alors qu'une seule est l'action principale. */
  .page-tete .entete-creer[open]{width:100%}
  .page-tete .entete-creer .panneau{width:auto}
}

/* ── Kanban (To-do, Tickets, En production) ───────────────────────────
   Trois à cinq colonnes selon l'écran, des cartes dedans, déplacées AU
   GLISSER-DÉPOSER (14/08/2026). Les boutons de déplacement restent dans le
   HTML et sont masqués quand le script tourne : sans JavaScript le kanban
   se tient aux boutons, et au clavier ils réapparaissent sur la carte visée.
   `auto-fit` plutôt qu'un nombre fixe de colonnes : l'écran En production en
   a cinq, la to-do trois, et la même règle sert les deux. */
.kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
        gap:14px;align-items:start}
/* SUR TÉLÉPHONE, LES COLONNES S'EMPILENT (une par écran, pleine largeur).
   Le glisser-déposer n'existe pas au doigt — le script ne l'arme jamais sur
   écran tactile — donc une colonne n'a plus à être visible À CÔTÉ d'une
   autre : on déplace par les boutons de la carte, et une carte pleine
   largeur les montre tous sur une ligne au lieu d'un par ligne. */
@media (max-width:900px){
  .kanban{grid-template-columns:1fr}
  /* Une colonne vide n'est plus une cible de dépôt ici : elle redevient une
     ligne, pour qu'un pipeline de six étapes tienne dans un pouce de
     défilement au lieu de six boîtes vides. La hauteur de dépôt reste dès
     que le glisser existe vraiment (`.kanban-glissable`). */
  .kanban:not(.kanban-glissable) .kanban-cartes{min-height:0}
  .kanban:not(.kanban-glissable) .kanban-vide{padding:6px 8px 2px;text-align:left}
  /* Cible tactile : les boutons de déplacement sont le SEUL moyen de bouger
     une carte au doigt. */
  .kanban-carte .deplacer .bouton{padding:8px 13px}
}

/* ── Le tableau de suivi de l'espace partenaire ───────────────────────
   Le seul kanban qui défile de côté au lieu de rétrécir (voir le pavé plus
   haut). Il ne se distingue du kanban générique QUE par son conteneur ;
   ses colonnes et ses cartes suivent les mêmes règles. */
.kanban-suivi{grid-auto-flow:column;grid-auto-columns:minmax(270px,1fr);
              grid-template-columns:none;overflow-x:auto;padding:0 0 14px}
/* Sur téléphone il redevient une pile, comme les autres : cinq colonnes de
   270 px derrière un défilement latéral, sur 375 px de large, cachent quatre
   colonnes sur cinq. */
@media (max-width:900px){
  .kanban-suivi{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;padding:0}
}
.kanban-colonne{background:var(--papier);border:1px solid var(--trait);
                border-radius:var(--r);padding:12px;min-width:0}
.kanban-titre{display:flex;justify-content:space-between;align-items:baseline;
              margin:0 4px 10px;font-size:12px;text-transform:uppercase;
              letter-spacing:.08em;color:var(--encre-2);font-weight:600}
.kanban-titre .kanban-n{font-variant-numeric:tabular-nums;font-size:13px}
/* Hauteur minimale : une colonne vide doit rester une CIBLE. Sans elle, la
   colonne se réduit à son titre et il n'y a plus rien où lâcher la carte. */
.kanban-cartes{min-height:64px}
.kanban-carte{background:var(--carte);border:1px solid var(--trait);
              border-radius:var(--r-s);padding:12px 14px;margin:0 0 10px}
.kanban-carte:last-child{margin-bottom:0}
/* Arrivée par le lien d'une alerte Buzz (#ticket-N) : la carte visée se voit. */
.kanban-carte:target{border-color:var(--brique);box-shadow:0 0 0 2px var(--brique-voile);
                     scroll-margin-top:90px}
.kanban-carte .titre{font-weight:600;margin:0 0 2px}
.kanban-carte .detail{color:var(--encre-2);font-size:13px;margin:4px 0 0;
                      white-space:pre-line}
.kanban-carte .meta{color:var(--encre-2);font-size:12px;margin:6px 0 0}
.kanban-carte .deplacer{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* Les colonnes d'arrivée se lisent en retrait : ce qui est sorti du travail
   n'a pas à peser autant que ce qui y est. */
.kanban-close .kanban-carte{opacity:.75}
.kanban-vide{color:var(--encre-2);font-size:13px;text-align:center;
             padding:18px 8px}

/* ── Le glisser-déposer ───────────────────────────────────────────────
   Tout ce bloc est conditionné à `.kanban-glissable`, posé par le script
   seulement là où le geste existe vraiment : jamais sans JavaScript, jamais
   sur un écran tactile, où le glisser natif HTML5 n'est pas implémenté. */
.kanban-glissable .kanban-carte{cursor:grab}
.kanban-glissable .kanban-carte:active{cursor:grabbing}
/* La carte dit qu'elle se prend : elle se soulève au survol. */
.kanban-glissable .kanban-carte:hover{border-color:var(--cadastre)}
.kanban-glissable .carte-en-vol{opacity:.4}
/* La colonne visée s'allume : c'est la seule chose qui dise où la carte va
   tomber pendant qu'on la tient. */
.kanban-glissable .colonne-visee{border-color:var(--cadastre);
                                 background:var(--voile)}
/* Écriture en cours, puis confirmation brève : sans ce retour, on ne sait pas
   si le déplacement est parti ou seulement dessiné. */
.kanban-glissable .carte-en-cours{opacity:.6}
.kanban-glissable .carte-posee{border-color:var(--cadastre);
                               transition:border-color .5s}

/* LES BOUTONS S'EFFACENT QUAND LE GLISSER EXISTE, et reviennent dès que la
   carte prend le focus au clavier : la tabulation n'attrape pas un
   glisser-déposer, et une carte qu'on ne peut pas déplacer au clavier est une
   carte que certains ne peuvent pas déplacer du tout. */
.kanban-glissable .deplacer{display:none}
.kanban-glissable .kanban-carte:focus-within .deplacer,
.kanban-glissable .kanban-carte:focus .deplacer{display:flex}
.kanban-glissable .kanban-carte:focus{outline:2px solid var(--cadastre);
                                      outline-offset:2px}

/* ═══════════════════════════════════════════════════════════════════════
   REFONTE ADWEN (19/08/2026) — les blocs ajoutés par la refonte.
   Cartes KPI du dashboard, sélecteur de période, barres de répartition,
   éditeur de flux des automatisations, inbox. Tout ce qui précède n'a
   changé que par les valeurs du :root.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Cartes KPI et sélecteur de période (dashboard) ──────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
      gap:16px;margin:0 0 18px}
.kpi{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
     padding:18px 20px;display:block;color:inherit;text-decoration:none}
a.kpi:hover{border-color:var(--cadastre-clair)}
.kpi .l{font-size:12.5px;color:var(--encre-2);font-weight:600;margin:0 0 6px}
.kpi .n{font-size:32px;font-weight:650;line-height:1.1;letter-spacing:-.02em;
        font-variant-numeric:tabular-nums;margin:0}
.kpi .sous{font-size:12.5px;color:var(--encre-2);margin:6px 0 0}
.kpi .delta{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;
            border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums;
            margin-left:8px;vertical-align:4px}
.delta-hausse{background:var(--voile);color:var(--cadastre)}
.delta-baisse{background:var(--brique-voile);color:var(--brique)}
.delta-neutre{color:var(--encre-2)}

.selecteur-periode{display:inline-flex;border:1px solid var(--trait);border-radius:999px;
                   background:var(--carte);padding:3px;gap:2px;margin-left:auto}
.selecteur-periode a{padding:6px 14px;border-radius:999px;font-size:13px;
                     text-decoration:none;color:var(--encre-2);white-space:nowrap}
.selecteur-periode a.actif{background:var(--cadastre);color:#fff}

/* ── Barres de répartition (tags du dashboard) ───────────────────────── */
.barres-tags{display:grid;gap:10px;margin:0}
.barre-tag{display:grid;grid-template-columns:150px 1fr 44px;gap:12px;align-items:center}
.barre-tag .l{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre-tag .fond{background:var(--papier);border-radius:999px;height:10px;overflow:hidden}
.barre-tag .plein{background:var(--cadastre-clair);height:100%;border-radius:999px}
.barre-tag .n{font-size:13px;color:var(--encre-2);text-align:right;
              font-variant-numeric:tabular-nums}

/* ── Éditeur de flux des automatisations ─────────────────────────────
   Un flux VERTICAL : le déclencheur en haut, une carte par étape, des
   connecteurs entre elles, un « + » à chaque jointure pour insérer là.
   Sans JavaScript, tous les panneaux d'édition sont dépliés : le flux
   dégrade en la liste d'avant, rien n'est perdu. */
.flux{max-width:600px;margin:0 auto;display:flex;flex-direction:column}
.noeud{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
       padding:14px 16px;display:flex;gap:12px;align-items:center;cursor:pointer;
       text-align:left;width:100%;font:inherit;color:inherit}
.noeud:hover,.noeud-ouvert{border-color:var(--cadastre-clair)}
.noeud-declencheur{border-color:var(--cadastre);background:var(--voile);cursor:default}
.noeud-fin{background:var(--papier);color:var(--encre-2);cursor:default;
           justify-content:center;font-size:13px}
.noeud-icone{width:36px;height:36px;border-radius:10px;background:var(--voile);
             color:var(--cadastre);display:grid;place-items:center;flex:0 0 auto}
.noeud-icone svg{width:18px;height:18px}
.noeud-texte{min-width:0;flex:1}
.noeud-titre{font-weight:600;font-size:14.5px;margin:0}
.noeud-resume{font-size:13px;color:var(--encre-2);margin:2px 0 0;overflow:hidden;
              text-overflow:ellipsis;white-space:nowrap}
.noeud-rang{font-size:12px;color:var(--encre-2);font-variant-numeric:tabular-nums}
.noeud-panneau{border:1px solid var(--trait);border-top:0;
               border-radius:0 0 var(--r) var(--r);padding:16px;
               background:var(--papier);margin-top:-10px;padding-top:24px}
.noeud-ouvert{border-radius:var(--r) var(--r) 0 0}

.connecteur{display:flex;flex-direction:column;align-items:center;padding:0;
            position:relative}
.connecteur::before,.connecteur::after{content:"";width:2px;height:14px;
                                       background:var(--trait)}
.connecteur-plus{width:28px;height:28px;border-radius:999px;border:1px solid var(--trait);
                 background:var(--carte);color:var(--encre-2);cursor:pointer;
                 font-size:16px;line-height:1;padding:0}
.connecteur-plus:hover{border-color:var(--cadastre);color:var(--cadastre)}
.menu-actions{border:1px solid var(--trait);border-radius:var(--r-s);
              background:var(--carte);padding:6px;margin:6px 0;display:grid;gap:2px;
              min-width:240px}
/* Même piège que le voile de la navigation : display:grid bat l'attribut
   hidden posé par le script. Sans cette règle, le menu resterait déplié. */
.menu-actions[hidden]{display:none}
.menu-actions button{background:none;border:0;font:inherit;font-size:13.5px;
                     text-align:left;padding:7px 10px;border-radius:6px;cursor:pointer;
                     color:var(--encre);width:100%}
.menu-actions button:hover{background:var(--voile);color:var(--cadastre)}

/* ── Inbox ───────────────────────────────────────────────────────────── */
.inbox{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}
/* Le lien de retour n'existe que sur téléphone : au bureau la liste est là,
   à gauche, et un « retour » vers ce qu'on voit déjà n'a pas de sens. */
.inbox-retour{display:none}

/* ── SUR TÉLÉPHONE, UNE VUE À LA FOIS (21/08/2026) ────────────────────
   Les deux colonnes se contentaient de s'empiler ici : la liste d'abord, le
   fil dessous. La requête charge jusqu'à CENT conversations — le champ
   « Répondre » tombait à une dizaine d'écrans de défilement, et chaque clic
   rechargeait la page en haut, donc sur la liste. Répondre depuis un
   téléphone était impossible en pratique.

   D'où le motif des boîtes mail : une seule colonne visible à la fois, celle
   que l'URL désigne. `?c=42` montre le fil, `?` montre la liste. C'est le
   lien de retour qui fait la navigation — aucun script, et le bouton
   « précédent » du navigateur fait la même chose tout seul. */
@media (max-width:900px){
  .inbox{grid-template-columns:1fr}
  .inbox-fil-ouvert>.colonne:first-child{display:none}
  /* Sans fil ouvert, la colonne de droite ne dirait que « Sélectionne une
     conversation » sous la liste : une consigne posée là où on vient
     justement de choisir. */
  .inbox:not(.inbox-fil-ouvert)>.colonne:last-child{display:none}
  .inbox-retour{display:inline-block;margin:0 0 12px;padding:8px 2px;
                font-size:14px;font-weight:500;color:var(--encre-2);
                text-decoration:none}
  .inbox-retour:hover{color:var(--cadastre)}
}
.inbox-liste{background:var(--carte);border:1px solid var(--trait);
             border-radius:var(--r);overflow:hidden;padding:0}
.inbox-liste a{display:block;padding:13px 16px;border-bottom:1px solid var(--trait);
               text-decoration:none;color:inherit}
.inbox-liste a:last-child{border-bottom:0}
.inbox-liste a:hover{background:var(--papier)}
.inbox-liste a.actif{background:var(--voile)}
.inbox-qui{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.inbox-nom{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;
           white-space:nowrap}
.inbox-quand{font-size:12px;color:var(--encre-2);white-space:nowrap;
             font-variant-numeric:tabular-nums}
/* `display:block` n'est pas décoratif : `text-overflow` ne s'applique pas à
   un élément inline. Sans lui, l'extrait ne se terminait par aucun « … », il
   se faisait couper net au bord de la carte — franc sur téléphone, où la
   ligne fait 340 px. */
.inbox-extrait{display:block;font-size:13px;color:var(--encre-2);margin:3px 0 0;
               overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-non-lus{background:var(--cadastre);color:#fff;border-radius:999px;
               font-size:11.5px;padding:1px 7px;font-variant-numeric:tabular-nums}
.fil-messages{display:flex;flex-direction:column;gap:12px;margin:0 0 16px}
.bulle{max-width:82%;border:1px solid var(--trait);border-radius:var(--r);
       padding:12px 15px;font-size:14px}
.bulle .bulle-meta{font-size:12px;color:var(--encre-2);margin:0 0 6px;display:flex;
                   gap:8px;align-items:baseline;flex-wrap:wrap}
.bulle .bulle-corps{white-space:pre-line;margin:0;overflow-wrap:anywhere}
.bulle-entrant{align-self:flex-start;background:var(--carte)}
.bulle-sortant{align-self:flex-end;background:var(--voile);border-color:#A7F3D0}
.bulle-canal{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
             color:var(--encre-2)}
/* 82 % d'un écran de bureau laissent une belle marge ; 82 % de 340 px font une
   colonne de texte de vingt caractères. L'alternance entrant/sortant reste
   lisible à 92 % — c'est le décalage qui la porte, pas la largeur perdue. */
@media (max-width:640px){.bulle{max-width:92%}}
/* Un sortant qui n'a jamais quitté le serveur (mode essai) : même pastille,
   couleurs de panne, pour qu'il ne se confonde pas avec un envoi réel. */
.bulle-non-remis{background:var(--brique-voile);color:var(--brique);
                 padding:2px 8px;border-radius:999px}

/* ── TABLEAU GROUPÉ PAR STATUT (Opportunités, 20/08/2026) ──────────────
   Le kanban des opportunités a été remplacé par un tableau à sous-groupes
   repliables, à la Notion : les colonnes côte à côte montraient trois lignes
   par étape et cachaient le reste.

   CHAQUE GROUPE EST UN <details> NATIF. Rien ici ne dépend du script :
   l'ouverture, la fermeture, le clavier et l'annonce aux lecteurs d'écran
   sont donnés par le navigateur. assets/js/groupes.js n'ajoute QUE la
   mémoire de ce qui était ouvert.

   POURQUOI UN TABLEAU PAR GROUPE, et non un seul tableau à lignes de
   séparation : un <details> ne peut pas envelopper un <tbody> — il faudrait
   masquer les lignes une à une en JavaScript, et l'écran perdrait son
   pliage dès que le script ne tourne pas. Le prix à payer, c'est que chaque
   tableau se dimensionnerait sur SON contenu : d'où `table-layout:fixed` et
   des largeurs de colonnes en pourcentage, identiques partout. Sans elles,
   « Société » ne tombe pas au même endroit d'un groupe à l'autre et
   l'ensemble cesse de se lire comme un seul tableau. */
.tableau-aide{font-size:12.5px;color:var(--encre-2);margin:0 0 14px;max-width:80ch}
.groupes{display:flex;flex-direction:column;gap:10px}
.groupe{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
        overflow:hidden}
.groupe>summary{display:flex;align-items:center;gap:10px;padding:11px 14px;
                cursor:pointer;font-weight:600;font-size:14px;list-style:none;
                user-select:none}
/* Le chevron est dessiné à la main : le marqueur natif ne se place pas et ne
   se colore pas de la même façon d'un navigateur à l'autre, et il tombait
   sous la ligne de base du titre sur Safari. */
.groupe>summary::-webkit-details-marker{display:none}
.groupe>summary::before{content:"";width:0;height:0;flex:none;
                        border-left:6px solid var(--encre-2);
                        border-top:4.5px solid transparent;
                        border-bottom:4.5px solid transparent;
                        transition:transform .15s ease}
.groupe[open]>summary::before{transform:rotate(90deg)}
.groupe>summary:hover{background:var(--papier)}
.groupe[open]>summary{border-bottom:1px solid var(--trait)}
.groupe-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.groupe-n{background:var(--voile);color:var(--cadastre);border-radius:999px;
          padding:1px 9px;font-size:12px;font-weight:600;
          font-variant-numeric:tabular-nums}
/* Gagné et Perdu sont des ARCHIVES : elles se lisent, elles ne se travaillent
   pas. Le compte passe en gris pour qu'un 30 en vert ne se lise pas comme
   trente dossiers à traiter. Même règle pour un ZÉRO : sept pastilles vertes
   alignées dont cinq disent « 0 » font chercher du travail là où il n'y en a
   pas — c'est la couleur qui appelle, pas le chiffre qu'on lit après. */
.groupe-sortie .groupe-n,.groupe-n-zero{background:var(--accent);color:var(--encre-2)}
.groupe-vide{color:var(--encre-2);font-size:13px;margin:0;padding:12px 14px}
.groupe-corps{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tableau-groupe{table-layout:fixed}
.tableau-groupe th,.tableau-groupe td{overflow:hidden;text-overflow:ellipsis;
                                      white-space:nowrap}
.tableau-groupe .col-titre{width:24%}
.tableau-groupe .col-societe{width:20%}
.tableau-groupe .col-ville{width:14%}
.tableau-groupe .col-mail{width:24%}
.tableau-groupe .col-valeur{width:9%}
.tableau-groupe .col-date{width:12%}
/* Sur téléphone, les pourcentages écraseraient les six colonnes dans 360 px.
   Le tableau reprend une largeur minimale et défile DANS son groupe — la
   page, elle, ne bouge pas de côté. */
@media (max-width:760px){
  .tableau-groupe{min-width:720px}
}

/* ── L'ÉTAT DE MISE EN RELATION, dans l'onglet Propriétaires ──────────────
   Cinq états, trois couleurs. Le vert dit « c'est fait », l'ambre « quelque
   chose est en attente », le gris « il n'y a rien à faire ». Ce n'est pas de
   la décoration : cet écran se lit en diagonale pour repérer les communes à
   démarcher, et la couleur est ce qui permet de ne PAS lire. */
.etat-relation{display:inline-block;font-size:13px;line-height:1.35;
               padding:3px 10px;border-radius:999px;background:var(--voile);
               color:var(--encre-2)}
.etat-relation.etat-nom{background:#DDEEE6;color:var(--cadastre)}
.etat-relation.etat-alerte{background:#FBF0D8;color:var(--ambre-texte)}
.etat-relation.etat-refus{background:#F4E6E0;color:var(--brique)}

/* ── LES ANNONCES DE L'ÉDITRICE (23/09/2026, migration 047) ──────────────
   Bandeau et pop-up poussés depuis admin/annonces.php. Presque rien à écrire :
   le bandeau EST un `.avis`, la pop-up EST une `.modale`, tous deux déjà posés
   plus haut dans cette feuille. On n'ajoute que ce qui leur manque en propre —
   un titre, et de l'air autour. Une annonce qui aurait son propre habillage
   finirait par ne plus ressembler au reste de l'espace. */
.annonce-bandeau{margin:0 0 20px}
.annonce-titre{font-weight:600;margin:0 0 4px}
/* La pop-up est un peu plus étroite que la modale de ticket : elle porte deux
   phrases, pas un formulaire, et une ligne de texte de 700 px se lit mal. */
.annonce-modale{max-width:32rem}
.annonce-modale h2{margin:0 0 10px}
/* Les boutons d'une annonce vont à gauche, contrairement à ceux d'un
   formulaire : il n'y a rien à valider ici, seulement à prendre acte. Un
   bouton aligné à droite se lit comme « enregistrer ». */
.annonce-modale .modale-actions{justify-content:flex-start;flex-wrap:wrap}