/*
 * Portail partenaires logement (/partenaires/logement/) — sobre plutôt que le
 * glass/aurora de l'admin (assets/css/admin.css) : c'est un outil externe,
 * consulté depuis un mobile en déplacement (visite d'appartement), utilisé
 * par des personnes qui ne connaissent pas la charte "fintech" de l'admin
 * interne. Charte turquoise/marine Colybry conservée, mise en page liste
 * simple (pas de kanban à glisser-déposer, spec produit explicite).
 */
:root {
  --turquoise: #50DDC4;
  --turquoise-dark: #26BCA1;
  --turquoise-tint: #eafaf6;
  --marine: #233048;
  --slate: #5b6b82;
  --border: #e3e8ef;
  --bg: #f4f6fb;
  --danger: #c8394a;
  --danger-bg: #fdf0f1;
  --violet-tint: #f8f6fe;
  --amber: #b8860b;
  --amber-tint: #fdf3e0;
  --shadow-card: 0 4px 18px rgba(35,48,72,0.07);
  --shadow-lift: 0 16px 36px rgba(35,48,72,0.14);
  /* Hiérarchie de radius à 2 paliers (revue design du 10/09/2026, avec le
     skill graphiste) — un radius uniforme partout (16-22px sur tout, du
     conteneur de page au badge) aplatissait toute hiérarchie visuelle.
     --radius-lg pour les conteneurs de page (carte fiche, connexion),
     --radius-md pour les blocs secondaires (liste, kanban, tuiles,
     palmarès), --radius-sm déjà en place sur boutons/inputs/badges. */
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; }
body {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  color: var(--marine);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--turquoise-dark); }
input, textarea, select, button { font-family: inherit; font-size: 1rem; }
button { -webkit-tap-highlight-color: transparent; }

/* Connexion — le bloc <form> porte lui-même le flex column (pas un <div>
   englobant) : label/input sont des éléments inline par défaut, sans ce
   flex directement sur le form ils retombaient en flux texte et
   s'entassaient sur la même ligne (bug repéré le 08/09/2026). */
.cb-pl-login-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 15% 10%, #2c3a58 0%, var(--marine) 55%, #182233 100%);
  padding: 20px;
}
.cb-pl-login-wrap { position: relative; width: 100%; max-width: 380px; }
.cb-pl-login-mascot {
  position: absolute; bottom: calc(100% - 10px); right: -6px; width: 64px; height: auto;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.35)); pointer-events: none; z-index: 1;
}
.cb-pl-login-box {
  background: #fff; border-radius: var(--radius-lg); padding: 40px 34px; width: 100%;
  display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 2;
  box-shadow: 0 28px 56px rgba(35,48,72,0.28);
}
.cb-pl-login-logo { height: 26px; width: auto; margin: 0 auto 4px; }
.cb-pl-login-box h1 { font-size: 1.25rem; font-weight: 800; text-align: center; }
.cb-pl-login-subtitle { font-size: 0.85rem; color: var(--slate); text-align: center; margin-top: -10px; line-height: 1.4; }
.cb-pl-login-field { display: flex; flex-direction: column; gap: 6px; }
/* Mêmes styles de champ que le login, réutilisés partout où un formulaire
   simple vit dans une .cb-pl-card (facturation, profil...) — pas juste sur
   l'écran de connexion, malgré le nom historique de la classe. */
.cb-pl-login-box label, .cb-pl-card .cb-pl-login-field label { font-size: 0.8rem; font-weight: 600; color: var(--slate); }
.cb-pl-login-box input, .cb-pl-card .cb-pl-login-field input, .cb-pl-card .cb-pl-login-field textarea {
  padding: 13px 15px; border: 1.5px solid var(--border); border-radius: 12px;
  font-size: 0.95rem; transition: border-color 0.15s, box-shadow 0.15s; width: 100%; font-family: inherit;
}
.cb-pl-login-box input:focus, .cb-pl-card .cb-pl-login-field input:focus, .cb-pl-card .cb-pl-login-field textarea:focus {
  outline: none; border-color: var(--turquoise-dark);
  box-shadow: 0 0 0 3px rgba(38,188,161,0.15);
}
.cb-pl-login-box button, .cb-pl-card form > button[type="submit"] {
  margin-top: 6px; background: var(--turquoise); color: var(--marine); font-weight: 700;
  padding: 14px; border: none; border-radius: 12px; cursor: pointer; font-size: 0.95rem;
  transition: background 0.15s, transform 0.1s;
}
.cb-pl-login-box button:hover, .cb-pl-card form > button[type="submit"]:hover { background: var(--turquoise-dark); }
.cb-pl-login-box button:active, .cb-pl-card form > button[type="submit"]:active { transform: scale(0.98); }
.cb-pl-error {
  color: var(--danger); background: var(--danger-bg); border-radius: 10px;
  padding: 10px 12px; font-size: 0.85rem; font-weight: 600; text-align: center;
}
.cb-pl-login-help { font-size: 0.78rem; color: var(--slate); text-align: center; margin-top: 4px; }

/* Topbar — logo/déconnexion sur une ligne, menu de navigation permanent
   (Liste/Statut/Reporting) juste en dessous, toujours visible quel que
   soit le nombre de dossiers (demande explicite du 08/09/2026). */
.cb-pl-topbar {
  background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 14px 18px 10px; position: sticky; top: 0; z-index: 5;
}
.cb-pl-topbar-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cb-pl-topbar-logo { height: 20px; width: auto; }
.cb-pl-topbar-user { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--slate); }
.cb-pl-topbar-user a { font-weight: 600; }

/* Menu "Paramètres" (regroupe Mes informations/Mon profil, demande
   explicite du 10/09/2026 — même principe que le portail CVthèque) —
   <details> natif, pas de JS. */
.cb-pl-settings { position: relative; }
.cb-pl-settings summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--violet-tint); color: var(--marine);
  transition: background 0.15s, color 0.15s;
}
.cb-pl-settings summary::marker { content: ''; display: none; }
.cb-pl-settings summary::-webkit-details-marker { display: none; }
.cb-pl-settings summary svg { width: 20px; height: 20px; }
.cb-pl-settings summary:hover { background: var(--turquoise-tint); color: var(--turquoise-dark); }
.cb-pl-settings[open] summary { background: var(--turquoise-tint); color: var(--turquoise-dark); }
.cb-pl-settings-menu {
  position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lift); min-width: 170px; padding: 6px; z-index: 20;
  display: flex; flex-direction: column;
}
.cb-pl-settings-menu a { padding: 8px 10px; border-radius: 6px; font-weight: 500; font-size: 0.85rem; color: var(--marine); text-decoration: none; }
.cb-pl-settings-menu a:hover { background: var(--bg); }

/* Contenu — mobile-first : une colonne, cartes empilées, tout tient sans
   zoomer sur un écran de téléphone (usage attendu principal). */
.cb-pl-main { max-width: 720px; margin: 0 auto; padding: 20px 14px 60px; }
/* Vue "Statut" (Kanban) : le conteneur 720px pensé pour la liste empilée
   étranglait le Kanban en desktop, forçant un scroll horizontal disproportionné
   pour seulement 5 colonnes de 280px (~1470px nécessaires). Élargi comme le
   Kanban CVthèque/Entreprises (assets/css/partenaires-emploi.css,
   .cb-emp-main, max-width 1400px), sans toucher les autres vues (Liste,
   Reporting) qui restent volontairement centrées et étroites. */
.cb-pl-main-kanban { max-width: 1400px; }
.cb-pl-main-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cb-pl-main h1 { font-size: 1.2rem; }

/* Bascule Liste/Statut/Reporting (refonte du 08/09/2026, revue avec le
   skill expert-produit-colybry) — mêmes dossiers, 3 lectures différentes
   selon si l'agent a 2 dossiers ou 20, plus le suivi de son activité. */
.cb-pl-view-tabs { display: inline-flex; gap: 2px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 3px; box-shadow: var(--shadow-card); }
.cb-pl-view-tabs a {
  font-size: 0.8rem; font-weight: 600; color: var(--slate); text-decoration: none;
  padding: 7px 16px; border-radius: 999px; transition: background 0.15s, color 0.15s;
}
.cb-pl-view-tabs a.active { background: var(--marine); color: #fff; }
.cb-pl-view-tabs a:not(.active):hover { background: var(--bg); }

/* Table générique restée utile pour le détail des commissions (voir plus
   bas .cb-pl-commission-table) — la liste "Mes dossiers" est passée en
   cartes empilées (.cb-pl-dossier-list) le 10/09/2026. */
.cb-pl-table-id { color: var(--slate); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* Kanban en lecture (pas de glisser-déposer, choix déjà acté pour ce
   portail) : un clic sur une carte ouvre sa fiche détaillée en modale
   plutôt que de la déplacer directement depuis la colonne. */
/* Kanban "Statut" — refonte du 24/09/2026 en trois passes (retours
   fondateur) : 1) colonnes en scroll horizontal → mauvaise UX mobile,
   remplacées par des sections verticales. 2) version verticale jugée trop
   plate → passe design (couleurs, icônes, contraste). 3) retour à un vrai
   Kanban en colonnes horizontales, sur le modèle du Kanban CVthèque/
   Entreprises déjà en place (assets/css/partenaires-emploi.css,
   .cb-emp-kanban) : colonnes larges (280px desktop), une seule quasi plein
   écran à la fois sur mobile (flex-basis ~82vw, pattern "swipe" déjà
   validé ailleurs sur le site) plutôt que plusieurs colonnes tronquées.
   Statuts limités à ce qui compte au quotidien : les 3 étapes négatives
   sont fusionnées en une colonne "Annulé" (voir partenaires/logement/
   index.php) au lieu de 3 colonnes presque toujours vides. Conserve les
   acquis des passes précédentes : couleurs de statut (turquoise = positif,
   rouge = abandon, violet = actif neutre), tri par ancienneté, alerte
   "dossier qui traîne". Toujours pas de glisser-déposer (choix produit
   acté 3 fois) : le changement de statut reste réservé à la fiche
   détaillée, pour forcer le passage par la note de contexte. */
/* Défilement horizontal sans barre native visible (même convention que la
   nav horizontale de l'admin, assets/css/admin.css .cb-admin-nav) — une
   barre de scroll grise sous le Kanban donnait une impression d'outil
   inachevé plutôt qu'un geste de swipe volontaire. scroll-snap pour que
   chaque colonne se cale toujours entière à l'écran, jamais tronquée à mi-
   chemin (défaut repéré par le fondateur : une colonne coupée en deux à
   l'arrêt du scroll ressemble à un bug). */
/* Colonnes réduites à 232px (au lieu de 280px, retour fondateur du
   24/09/2026) : les 5 colonnes + espaces (232*5 + 10*4 = 1200px) tiennent
   maintenant entièrement dans le conteneur élargi (1400px, voir
   .cb-pl-main-kanban) sur un écran desktop courant, sans scroll horizontal
   à faire pour voir le plateau complet — le scroll reste disponible en
   dessous de ~1250px de large. */
.cb-pl-kanban {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cb-pl-kanban::-webkit-scrollbar { display: none; }
.cb-pl-kanban-col {
  flex: 0 0 232px; min-width: 0; background: rgba(244,246,251,0.6); border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 8px; display: flex; flex-direction: column; max-height: calc(100vh - 220px);
  border-top: 3px solid var(--border); scroll-snap-align: start;
}
/* Couleur réservée aux étapes d'ISSUE (turquoise = positif, rouge =
   abandon) — retour fondateur/graphiste du 24/09/2026 : un violet vif sur
   TOUTES les étapes actives (Nouveau, En attente, Recherche) diluait le
   sens des couleurs de résultat et donnait un plateau trop chargé. Les
   étapes actives restent neutres (gris), comme la colonne "par défaut" du
   Kanban CVthèque/Entreprises (assets/css/partenaires-emploi.css,
   .cb-emp-col sans data-badge) — cohérence visuelle avec l'autre Kanban du
   site plutôt qu'une couleur ad hoc ici. */
.cb-pl-kanban-col-done { border-top-color: var(--turquoise); }
.cb-pl-kanban-col-danger { border-top-color: var(--danger); }
.cb-pl-kanban-col-head {
  display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; color: var(--marine);
  padding: 6px 6px 12px;
}
.cb-pl-kanban-col-icon { font-size: 1rem; flex-shrink: 0; }
.cb-pl-kanban-col-name { flex: 1 1 auto; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.74rem; color: var(--slate); }
.cb-pl-kanban-col-count {
  border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: 0.78rem; color: #fff;
  background: var(--slate); flex-shrink: 0;
}
.cb-pl-kanban-col-done .cb-pl-kanban-col-count { background: var(--turquoise-dark); }
.cb-pl-kanban-col-danger .cb-pl-kanban-col-count { background: var(--danger); }
.cb-pl-kanban-col-neutral .cb-pl-kanban-col-count { background: var(--marine); }
.cb-pl-kanban-col-cards { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.cb-pl-kanban-card {
  display: flex; align-items: flex-start; gap: 8px; background: #fff; border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: 12px; padding: 10px 12px; text-decoration: none;
  color: var(--marine); width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s; flex-shrink: 0;
}
.cb-pl-kanban-card:hover { border-color: var(--turquoise); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.cb-pl-kanban-card-done { border-left-color: var(--turquoise); }
.cb-pl-kanban-card-danger { border-left-color: var(--danger); }
/* Repère "dossier qui traîne" allégé (retour fondateur du 24/09/2026) : un
   fond ambré plein carte + une pilule pleine largeur, répétés sur presque
   chaque carte du plateau de démo, créaient une "alerte jaune" générale qui
   fatiguait l'œil plutôt que de signaler un cas précis. Remplacé par un
   simple liseré ambré (cohérent avec le liseré de statut turquoise/rouge
   déjà en place) + le texte "⏳ Xj sans MAJ" directement dans la ligne de
   métadonnées, sans bloc ni fond séparé. */
.cb-pl-kanban-card-stale { border-left-color: var(--amber); }
.cb-pl-kanban-card-main { flex: 1 1 auto; min-width: 0; }
.cb-pl-kanban-card-top { display: flex; align-items: baseline; gap: 6px; }
.cb-pl-kanban-card-top strong { font-size: 0.9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-pl-kanban-card-notes { font-size: 0.7rem; color: var(--slate); flex-shrink: 0; white-space: nowrap; }
.cb-pl-avatar-xs {
  width: 28px; height: 28px; font-size: 0.72rem; border-width: 2px; flex-shrink: 0; margin-top: 1px;
}
.cb-pl-kanban-card-substage {
  display: inline-block; margin-top: 4px; font-size: 0.68rem; font-weight: 700; color: var(--danger);
  background: var(--danger-bg); border-radius: 999px; padding: 1px 8px;
}
.cb-pl-kanban-card-meta { display: flex; align-items: baseline; gap: 8px; font-size: 0.76rem; color: var(--slate); margin-top: 4px; flex-wrap: wrap; }
.cb-pl-kanban-card-ville { white-space: nowrap; }
.cb-pl-kanban-card-amount { color: var(--marine); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.86rem; margin-top: 1px; }
.cb-pl-kanban-card-updated { opacity: 0.8; white-space: nowrap; }
.cb-pl-kanban-card-updated-stale { opacity: 1; color: var(--amber); font-weight: 700; }
.cb-pl-kanban-empty { font-size: 0.8rem; color: var(--slate); padding: 10px 6px; text-align: center; }
@media (max-width: 640px) {
  .cb-pl-kanban { gap: 10px; }
  .cb-pl-kanban-col { flex-basis: 82vw; }
}

/* Reporting — données d'activité utiles à l'agent (ancienneté, taux de
   conclusion, palmarès), jamais de montant tant que la formule de
   commission n'est pas confirmée (voir partenaires/logement/index.php,
   choix revus avec expert-produit-colybry et expert-cmo-colybry). */
.cb-pl-report-section-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--slate); margin: 20px 0 10px;
}
.cb-pl-report-section-label:first-child { margin-top: 0; }
.cb-pl-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 6px; }
.cb-pl-report-tile {
  background: #fff; border-radius: var(--radius-md); padding: 18px 16px; box-shadow: var(--shadow-card); border: 1px solid var(--border);
}
.cb-pl-report-tile-good { background: var(--turquoise-tint); border-color: var(--turquoise); }
.cb-pl-report-tile .n { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--marine); }
.cb-pl-report-tile .l { font-size: 0.78rem; color: var(--slate); margin-top: 2px; }

/* "Commission due à Colybry" — jamais la même couleur que ce que l'agent a
   gagné (recommandation produit du 08/09/2026, pour ne jamais confondre les
   deux sens : ce qu'il a facturé vs ce qu'il nous doit). */
.cb-pl-report-tile-due { background: var(--amber-tint); border-color: var(--amber); }
.cb-pl-report-tile-due .n { color: var(--amber); }

.cb-pl-commission-table-scroll { overflow-x: auto; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); border: 1px solid var(--border); margin-bottom: 10px; }
.cb-pl-commission-table { width: 100%; border-collapse: collapse; min-width: 420px; }
.cb-pl-commission-table th { text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); padding: 11px 14px; border-bottom: 1px solid var(--border); }
.cb-pl-commission-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.cb-pl-commission-table tr:last-child td { border-bottom: none; }
.cb-pl-report-disclaimer { font-size: 0.76rem; color: var(--slate); line-height: 1.5; margin-bottom: 16px; }

.cb-pl-palmares { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); border: 1px solid var(--border); margin-bottom: 16px; overflow: hidden; }
.cb-pl-palmares-item { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.cb-pl-palmares-item:last-child { border-bottom: none; }
.cb-pl-palmares-item strong { font-size: 0.88rem; }
.cb-pl-palmares-item span { font-size: 0.78rem; color: var(--slate); }

.cb-pl-report-pending {
  background: var(--violet-tint); border-radius: var(--radius-md); padding: 16px 18px; font-size: 0.86rem; color: var(--slate);
}
.cb-pl-report-pending strong { display: block; color: var(--marine); font-size: 0.9rem; margin-bottom: 4px; }

/* Modale plein écran (fiche détaillée) — recommandation expert produit :
   un panneau latéral est inutilisable en petit écran, une modale plein
   écran avec un vrai bouton retour reproduit le pattern "fiche" d'une app
   native, adapté à un usage mobile en déplacement. */
.cb-pl-modal-backdrop {
  display: none; position: fixed; inset: 0; background: #fff; z-index: 20; overflow-y: auto;
}
.cb-pl-modal-backdrop.open { display: block; }
.cb-pl-modal-sheet { min-height: 100%; }
.cb-pl-modal-head {
  position: sticky; top: 0; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); padding: 14px 16px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
}
.cb-pl-modal-back {
  background: none; border: none; font-family: inherit; font-size: 0.88rem; font-weight: 700;
  color: var(--marine); cursor: pointer; padding: 6px 4px;
}
.cb-pl-modal-head-name { font-size: 0.85rem; font-weight: 600; color: var(--slate); }
.cb-pl-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cb-pl-modal-sheet .cb-pl-card {
  /* Réutilise --radius-lg/--shadow-lift (déjà définis en haut de ce fichier)
     plutôt qu'une recette d'ombre/radius ad hoc (audit design du
     11/09/2026) — ce bloc est justement le conteneur de page visé par la
     hiérarchie de radius à 2 paliers documentée plus haut. */
  margin: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
@media (min-width: 640px) {
  .cb-pl-modal-sheet .cb-pl-card { max-width: 560px; margin: 24px auto; }
}

.cb-pl-flash {
  background: #eafaf6; border: 1px solid var(--turquoise); color: var(--marine);
  padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 0.88rem;
}

/* Mascotte sur les états vides (ajouté le 10/09/2026, revue graphiste) — la
   marque disparaissait entièrement après l'écran de connexion, tout devenait
   un cadre en pointillés générique interchangeable avec n'importe quel
   back-office. */
.cb-pl-empty {
  background: #fff; border-radius: var(--radius-md); padding: 32px 20px; text-align: center; color: var(--slate);
  border: 1px dashed var(--border);
}
.cb-pl-empty-mascot { width: 72px; height: auto; margin: 0 auto 12px; }
.cb-pl-empty p + p { margin-top: 8px; }
.cb-pl-empty a { color: var(--turquoise-dark); font-weight: 700; }

/* Revue UX du 01/10/2026 : message de résultat d'une action recopié en haut
   de la fiche rouverte (voir le script de partenaires/logement/index.php),
   et marge sous le message d'erreur de page (collé au contenu suivant). */
.cb-pl-main > .cb-pl-error { margin-bottom: 16px; text-align: left; }
.cb-pl-modal-sheet > .cb-pl-flash, .cb-pl-modal-sheet > .cb-pl-error { margin: 14px 14px 0; text-align: left; }
@media (min-width: 640px) {
  .cb-pl-modal-sheet > .cb-pl-flash, .cb-pl-modal-sheet > .cb-pl-error { max-width: 560px; margin: 24px auto 0; }
}

.cb-pl-avatar-sm {
  width: 40px; height: 40px; font-size: 1rem; border-width: 2px; flex-shrink: 0;
}

/* Liste "Mes dossiers" en cartes empilées plutôt qu'un tableau en scroll
   horizontal (revue design + produit du 10/09/2026) — cohérent avec le
   pattern déjà posé sur la fiche dossier, lisible aussi bien sur mobile que
   desktop pour ce volume de dossiers par agent (jamais un tableau de
   données dense type Excel). */
.cb-pl-dossier-list { display: flex; flex-direction: column; gap: 8px; }
.cb-pl-dossier-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fff; border-radius: var(--radius-md); border: 1px solid var(--border);
  padding: 12px 14px; cursor: pointer; font-family: inherit; transition: border-color 0.12s, box-shadow 0.12s;
}
.cb-pl-dossier-row:hover { border-color: var(--turquoise); box-shadow: var(--shadow-card); }
.cb-pl-dossier-main { flex: 1 1 auto; min-width: 0; }
.cb-pl-dossier-name { font-size: 0.92rem; font-weight: 700; }
.cb-pl-dossier-meta { font-size: 0.78rem; color: var(--slate); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.cb-pl-dossier-amount { font-size: 0.8rem; color: var(--marine); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-pl-dossier-arrow { color: var(--slate); font-size: 1rem; flex-shrink: 0; }

.cb-pl-card {
  background: #fff; border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-card); border: 1px solid var(--border);
}
.cb-pl-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.cb-pl-card-head strong { font-size: 0.98rem; }
.cb-pl-card-identity { display: flex; align-items: center; gap: 14px; }
.cb-pl-avatar {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--violet-tint);
  color: var(--marine); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem; border: 3px solid var(--violet-tint); box-shadow: 0 0 0 2px #fff;
}
.cb-pl-avatar-ring-done { border-color: var(--turquoise); background: var(--turquoise-tint); }
.cb-pl-avatar-ring-danger { border-color: rgba(200,57,74,0.4); background: var(--danger-bg); }
.cb-pl-card-name { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.cb-pl-card-subtle { font-size: 0.76rem; color: var(--slate); margin-top: 2px; }

/* Coordonnées client — visibles depuis le 08/09/2026 (décision du
   fondateur qui lève la restriction "Colybry unique canal de contact"
   posée plus tôt) : un partenaire peut désormais joindre le client
   directement, par ex. pour organiser une visite. */
.cb-pl-contact-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.cb-pl-contact-link { font-size: 0.84rem; font-weight: 600; color: var(--marine); text-decoration: none; }
.cb-pl-contact-link:hover { color: var(--turquoise-dark); }

/* Sections de la fiche (recherche client / infos du bien / statut) —
   séparées visuellement plutôt qu'un simple empilement de formulaires
   (demande d'amélioration du design du 08/09/2026). */
.cb-pl-card-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.cb-pl-card-section:first-of-type { margin-top: 18px; }
.cb-pl-card-section-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--slate); margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.cb-pl-card-section-label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--turquoise); flex-shrink: 0;
}
.cb-pl-card-section-highlight {
  margin-left: -20px; margin-right: -20px; padding: 16px 20px 4px; border-top: none;
  background: var(--turquoise-tint);
}
/* Par défaut (dossier en cours, cas le plus fréquent) : chip pleine couleur
   plutôt qu'un simple tint neutre (revue graphiste du 10/09/2026) — c'est le
   statut qui doit se repérer le plus vite au premier coup d'œil sur une
   liste, contrairement aux statuts terminés (résolu, pas d'action requise). */
.cb-pl-stage-badge {
  background: var(--turquoise); color: var(--marine); font-weight: 700; font-size: 0.75rem;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.cb-pl-stage-badge.done { background: var(--turquoise-tint); border-color: var(--turquoise); color: var(--turquoise-dark); }
.cb-pl-stage-badge.danger { background: var(--danger-bg); border-color: rgba(200,57,74,0.3); color: var(--danger); }
/* Statut d'attente (facture en attente de paiement, contrat envoyé pas
   encore signé) — même famille ambre que "commission due" ailleurs sur ce
   portail, pour rester cohérent sur ce que l'ambre signifie. */
.cb-pl-stage-badge.pending { background: var(--amber-tint); border-color: var(--amber); color: var(--amber); }

.cb-pl-card-details {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; margin-bottom: 14px;
}
.cb-pl-card-details .cb-pl-full { grid-column: 1 / -1; }
.cb-pl-card-details dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); }
.cb-pl-card-details dd { font-size: 0.9rem; }

/* Timeline de progression du dossier — remplace le select seul
   (recommandation design du 08/09/2026) : chaque étape est un bouton
   submit du même formulaire (name=stage_id), aucun JS requis. Passée =
   pastille turquoise pleine avec coche, courante = pastille marine avec
   anneau, future = pastille grise cliquable pour avancer directement. */
.cb-pl-timeline { display: flex; align-items: flex-start; margin-bottom: 14px; }
.cb-pl-timeline-step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; font-family: inherit; cursor: pointer; padding: 4px 2px;
  position: relative;
}
.cb-pl-timeline-step:not(:last-child)::after {
  content: ''; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; z-index: 0;
  background: var(--border);
}
.cb-pl-timeline-step-passee:not(:last-child)::after { background: var(--turquoise); }
.cb-pl-timeline-dot {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; z-index: 1; position: relative;
  background: #fff; border: 2px solid var(--border); color: var(--slate);
}
.cb-pl-timeline-step-passee .cb-pl-timeline-dot { background: var(--turquoise); border-color: var(--turquoise); color: #fff; }
.cb-pl-timeline-step-courante .cb-pl-timeline-dot { background: var(--marine); border-color: var(--marine); color: #fff; box-shadow: 0 0 0 4px rgba(35,48,72,0.12); }
.cb-pl-timeline-label { font-size: 0.68rem; font-weight: 600; color: var(--slate); text-align: center; line-height: 1.2; }
.cb-pl-timeline-step-courante .cb-pl-timeline-label { color: var(--marine); font-weight: 800; }

.cb-pl-stage-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.cb-pl-btn-danger-link {
  background: none; border: none; font-family: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--danger); cursor: pointer; text-decoration: underline; padding: 6px 2px;
}

.cb-pl-transaction-group { background: var(--bg); border-radius: 12px; padding: 12px; }

.cb-pl-stage-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cb-pl-stage-form label { font-size: 0.78rem; font-weight: 600; color: var(--slate); margin-top: 6px; }
.cb-pl-stage-form select, .cb-pl-stage-form textarea {
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; width: 100%;
}
.cb-pl-transaction-form { display: flex; flex-direction: column; gap: 8px; }
.cb-pl-transaction-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cb-pl-transaction-row label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--slate); margin-bottom: 4px; }
.cb-pl-transaction-row input, .cb-pl-transaction-row select {
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; width: 100%; font-size: 0.9rem;
}
@media (max-width: 560px) { .cb-pl-transaction-row { grid-template-columns: minmax(0, 1fr); } }
.cb-pl-note-label { margin-top: 10px; }
.cb-pl-btn-secondary {
  margin-top: 8px; align-self: flex-start; background: #fff; color: var(--marine);
  border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 14px;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.cb-pl-btn-secondary:hover { border-color: var(--turquoise-dark); }

/* Bouton primaire générique (ex. "Copier le lien" de l'espace affilié) —
   pill pleine couleur cohérente avec .cb-home-form button plutôt qu'un
   <button> sans classe qui retombe au style natif du navigateur (retour du
   11/09/2026 : bouton "Copier le lien" jugé daté). État .copied (survolé
   1.5s après le clic) confirme visuellement l'action sans dépendre du seul
   changement de texte. */
.cb-pl-btn-primary {
  display: inline-flex; align-items: center; gap: 8px; background: var(--turquoise); color: var(--marine);
  font-weight: 700; font-size: 0.88rem; padding: 11px 20px; border-radius: 999px; border: none;
  cursor: pointer; font-family: inherit; box-shadow: 0 8px 20px rgba(80,221,196,0.32);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.cb-pl-btn-primary:hover { background: var(--turquoise-dark); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(80,221,196,0.4); }
.cb-pl-btn-primary:active { transform: translateY(0); }
.cb-pl-btn-primary.copied { background: var(--turquoise-dark); }

.cb-pl-notes { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.cb-pl-notes-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--slate); margin-bottom: 8px; }
.cb-pl-note { margin-bottom: 8px; }
.cb-pl-note-meta { font-size: 0.72rem; color: var(--slate); }
.cb-pl-note-text { font-size: 0.88rem; }

@media (min-width: 640px) {
  .cb-pl-main { padding-top: 32px; }
}

/* ====================== Refonte UX du 24/09/2026 ======================
   Synthèse en tête de liste, recherche + filtres, documents du dossier. */
.cb-pl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 720px) { .cb-pl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cb-pl-kpi { background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); padding: 14px 16px; }
.cb-pl-kpi strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--marine); line-height: 1.1; }
.cb-pl-kpi span { font-size: 0.78rem; color: var(--slate); }
.cb-pl-kpi.warn strong { color: var(--amber); }
.cb-pl-kpi.danger strong { color: var(--danger); }
.cb-pl-kpi.ok strong { color: var(--turquoise-dark); }
.cb-pl-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.cb-pl-toolbar input[type=search] { flex: 1; min-width: 200px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--border); font: inherit; font-size: 0.9rem; background: #fff; }
.cb-pl-toolbar input[type=search]:focus { outline: none; border-color: var(--turquoise-dark); }
.cb-pl-filters { display: inline-flex; flex-wrap: wrap; gap: 2px; background: rgba(35,48,72,0.05); border-radius: 12px; padding: 3px; }
.cb-pl-filters button { border: none; background: none; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--slate); padding: 7px 12px; border-radius: 9px; cursor: pointer; }
.cb-pl-filters button.active { background: #fff; color: var(--marine); box-shadow: 0 1px 2px rgba(35,48,72,0.1); }
.cb-pl-stale-tag { color: var(--amber); font-weight: 700; }
.cb-pl-doc { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-radius: 10px; background: var(--bg); margin-bottom: 6px; text-decoration: none; color: var(--marine); font-size: 0.86rem; font-weight: 600; }
.cb-pl-doc:hover { background: var(--turquoise-tint); }
.cb-pl-doc small { font-weight: 500; color: var(--slate); font-size: 0.76rem; }
.cb-pl-doc-upload { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cb-pl-doc-upload label { cursor: pointer; font-size: 0.84rem; font-weight: 700; color: var(--turquoise-dark); }
.cb-pl-doc-upload input[type=file] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cb-pl-view-tabs a { white-space: nowrap; }
/* Mobile (revue du 24/09/2026) : les onglets de vue dépassaient l'écran de 90px — ils défilent dans leur pilule. */
@media (max-width: 640px) { .cb-pl-view-tabs { display: flex; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .cb-pl-view-tabs::-webkit-scrollbar { display: none; } }

/* Outil Affiliés (refonte du 24/09/2026) */
.cb-pa-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .cb-pa-grid { grid-template-columns: minmax(0, 1fr); } }
.cb-pa-grid .cb-pl-card { margin-bottom: 0; }
.cb-pa-link { display: flex; gap: 8px; margin-bottom: 10px; }
.cb-pa-link input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--border); font: inherit; font-size: 0.88rem; background: var(--bg); }
.cb-pa-code { cursor: pointer; background: var(--turquoise-tint); color: var(--turquoise-dark); font-weight: 700; padding: 2px 8px; border-radius: 6px; border: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: inherit; }
.cb-pa-code:hover { background: var(--turquoise); color: var(--marine); }
.cb-pa-share { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
.cb-pa-share-btn { flex: 1; min-width: 100px; text-align: center; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 0.86rem; text-decoration: none; color: #fff; }
.cb-pa-share-btn.wa { background: #25D366; }
.cb-pa-share-btn.mail { background: var(--marine); }
.cb-pa-share-btn.in { background: #0A66C2; }
.cb-pa-share-btn:hover { filter: brightness(0.94); }
.cb-pa-msg { margin-top: 10px; }
.cb-pa-msg summary { cursor: pointer; font-weight: 700; font-size: 0.86rem; color: var(--turquoise-dark); }
.cb-pa-msg label { display: block; font-size: 0.76rem; font-weight: 700; color: var(--slate); margin: 12px 0 4px; }
.cb-pa-msg textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); font: inherit; font-size: 0.84rem; background: var(--bg); resize: vertical; margin-bottom: 6px; }
.cb-pa-cond { display: grid; gap: 10px; }
.cb-pa-cond dt { font-size: 0.76rem; color: var(--slate); }
.cb-pa-cond dd { font-weight: 800; font-size: 1.05rem; color: var(--marine); }
.cb-pa-steps { padding-left: 20px; display: grid; gap: 8px; font-size: 0.86rem; color: #3d4a60; line-height: 1.5; }
.cb-pa-faq { border-top: 1px solid var(--border); padding: 10px 0; }
.cb-pa-faq summary { cursor: pointer; font-weight: 700; font-size: 0.88rem; }
.cb-pa-faq p { font-size: 0.85rem; color: var(--slate); margin-top: 6px; line-height: 1.5; }
.cb-pa-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--marine); color: #fff; padding: 10px 18px; border-radius: 12px; font-weight: 700; font-size: 0.86rem; opacity: 0; transition: all .2s; pointer-events: none; z-index: 50; max-width: calc(100vw - 32px); text-align: center; }
.cb-pa-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Revue mobile du 24/09/2026 — Safari iOS zoome automatiquement sur tout
   champ de saisie dont le texte fait moins de 16px, et ne dézoome pas
   ensuite : la page reste agrandie et déborde. 16px minimum sur mobile. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="hidden"]),
  select,
  textarea { font-size: 16px !important; }
}

/* Revue UX du 01/10/2026 — focus clavier visible partout (cartes, lignes,
   étoiles « favori » et onglets compris) : marine plutôt que turquoise, le
   turquoise sur blanc n'atteint pas le contraste 3:1 d'un indicateur. */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible,
[tabindex]:focus-visible, input[type=checkbox]:focus-visible, input[type=radio]:focus-visible, input[type=file]:focus-visible {
  outline: 2px solid var(--marine); outline-offset: 2px;
}