/* L'ecran des candidatures au compte professionnel.
 *
 * DERIVEE DE `contacts.css`, ET ASSUMEE COMME TELLE.
 *
 * Les deux ecrans ont la meme forme : des onglets qui sont des etats, une barre
 * d'outils, une liste, et un panneau qui ouvre une fiche entiere. Repartir d'une
 * page blanche aurait produit un troisieme dialecte de la meme disposition.
 *
 * Ce qui s'y ajoute en propre est en bas : les pastilles d'etat, l'avertissement
 * « compte deja existant », et la liste des pieces jointes.
 */
/* Onglets : la meme forme qu'Analytics et que Recherches. Barre blanche bordee,
   majuscules espacees, et le trait navy pose par une ombre INTERNE — une
   bordure deplacerait le contenu de deux pixels a chaque changement. */
.ob-tabs{display:flex;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
    padding:0 var(--space-5);background:#fff;flex-shrink:0;margin:0 0 var(--space-4);
    border-radius:10px;border:1px solid #d9d9d9;}
.ob-tabs::-webkit-scrollbar{height:5px;}
.ob-tabs::-webkit-scrollbar-thumb{background:var(--grey-200);border-radius:999px;}
.ob-tab{padding:12px 16px;font-size:.8rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.04em;color:var(--grey-400);cursor:pointer;flex-shrink:0;
    box-shadow:inset 0 -2px 0 transparent;transition:color .15s,box-shadow .15s;
    white-space:nowrap;display:flex;align-items:center;gap:6px;}
.ob-tab:hover{color:var(--grey-700);}
.ob-tab.active{color:var(--psg-navy);box-shadow:inset 0 -2px 0 var(--psg-navy);}
.ob-tab-count{font-size:.68rem;font-weight:800;letter-spacing:0;padding:1px 6px;
    border-radius:999px;background:var(--grey-100);color:var(--grey-500);}
.ob-tab.active .ob-tab-count{background:rgba(0,33,71,.09);color:var(--psg-navy);}

/* `.alert` de main.css porte du padding et aucun display:none — un div vide se
   verrait. Le masquage vit dans commande.css, que cette page ne charge pas.
   Meme piege que sur Recherches, meme correctif.
   `.loading-panel` n'est definie que dans client.css et commande.css. */
.ob-message{display:none;}
.ob-message.visible{display:block;}
.loading-panel{padding:var(--space-10);text-align:center;color:var(--grey-400);font-weight:700;}

.ob-toolbar{display:flex;align-items:center;gap:var(--space-3);
    padding:var(--space-5);border-bottom:1px solid var(--grey-100);flex-wrap:wrap;}
.ob-toolbar-count{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--grey-400);white-space:nowrap;}

/* ── La liste ─────────────────────────────────────────────────────────── */
.ob-table{width:100%;border-collapse:collapse;}
.ob-table th{text-align:left;padding:12px 16px;font-size:.66rem;font-weight:800;
    text-transform:uppercase;letter-spacing:.05em;color:var(--grey-400);
    background:#f1f5f999;border-bottom:1px solid var(--grey-100);white-space:nowrap;}
.ob-table td{padding:11px 16px;border-bottom:1px solid var(--grey-100);font-size:.84rem;vertical-align:top;}
.ob-table tbody tr{cursor:pointer;}
.ob-table tbody tr:hover{background:#f8fafc;}
.ob-table tbody tr:last-child td{border-bottom:0;}

.ob-date{color:var(--grey-400);font-size:.76rem;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ob-site{display:inline-block;font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:999px;
    background:var(--grey-100);color:var(--grey-700);white-space:nowrap;}
.ob-qui{min-width:150px;}
.ob-nom{display:block;font-weight:800;color:var(--psg-navy);}
.ob-mail{display:block;font-size:.74rem;color:var(--grey-400);overflow-wrap:anywhere;}
.ob-objet{max-width:420px;}
.ob-sujet{display:block;font-weight:700;}
.ob-extrait{display:block;font-size:.78rem;color:var(--grey-400);}
.ob-pj{font-size:.72rem;font-weight:800;color:var(--grey-500);white-space:nowrap;}

/* Les etats. Le rouge est reserve au nouveau : c'est le seul qui demande une
   action, et un code couleur ou tout est colore ne signale plus rien. */
.ob-pastille{display:inline-block;font-size:.66rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.04em;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.ob-nouveau{background:#fee2e2;color:#991b1b;}
.ob-en_cours{background:#fef3c7;color:#92400e;}
.ob-traite{background:#dcfce7;color:#166534;}
.ob-ignore{background:var(--grey-100);color:var(--grey-500);}

.ob-vide{padding:48px 24px;text-align:center;color:var(--grey-400);font-weight:700;font-size:.88rem;}

/* ── Le panneau de detail ─────────────────────────────────────────────── */
.ob-panneau{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.45);
    display:flex;align-items:center;justify-content:center;padding:20px;}
.ob-panneau[hidden]{display:none;}
.ob-panneau-carte{background:#fff;border-radius:14px;width:100%;max-width:680px;
    max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
    box-shadow:0 20px 50px rgba(15,23,42,.25);}
.ob-panneau-tete{display:flex;align-items:flex-start;gap:12px;padding:18px 22px;
    border-bottom:1px solid var(--grey-100);}
.ob-panneau-type{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
    color:var(--grey-400);margin-bottom:3px;}
.ob-panneau-titre{margin:0;font-size:1.05rem;font-weight:800;color:var(--psg-navy);}
.ob-fermer{margin-left:auto;background:none;border:0;width:32px;height:32px;cursor:pointer;
    color:var(--grey-400);flex:0 0 auto;}
.ob-fermer:hover{color:var(--psg-navy);}
.ob-fermer svg{width:18px;height:18px;}
.ob-panneau-corps{padding:18px 22px;overflow-y:auto;flex:1;}
.ob-panneau-pied{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:14px 22px;border-top:1px solid var(--grey-100);background:#f8fafc99;}

.ob-champ{display:flex;gap:12px;padding:5px 0;font-size:.84rem;}
.ob-champ-nom{flex:0 0 130px;font-size:.7rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.04em;color:var(--grey-400);padding-top:2px;}
.ob-champ-val{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere;}

/* Le message garde ses retours a la ligne : une demande de devis est souvent
   une liste, et la mettre au kilometre la rend illisible. */
.ob-message-texte{margin:16px 0;padding:14px 16px;background:var(--grey-50,#f8fafc);
    border-radius:9px;border-left:3px solid var(--grey-200);
    font-size:.88rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;}

.ob-fichiers{margin:6px 0 16px;padding-left:18px;font-size:.82rem;}
.ob-fichiers li{margin-bottom:4px;overflow-wrap:anywhere;}
.ob-octets{color:var(--grey-400);font-size:.72rem;margin-left:6px;}
.ob-purge{color:var(--psg-red);font-size:.7rem;font-weight:800;margin-left:6px;}

.ob-note{min-height:80px;resize:vertical;margin-top:6px;font-size:.86rem;}

/* ── Ce qui est propre a cet ecran ─────────────────────────────────────── */

/* L'ETAT SE LIT AVANT LE NOM, ET C'EST VOULU.
   Une liste ou il faut chercher lesquelles attendent n'est pas une file. */
.ob-etat{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
.ob-etat-nouveau{background:#fef3c7;color:#92400e;}
.ob-etat-accepte{background:#dcfce7;color:#166534;}
.ob-etat-refuse{background:#f1f5f9;color:#475569;}

/* L'AVERTISSEMENT QUI EMPECHE UNE FAUSSE ACCEPTATION.
   La route de creation est idempotente : sur une adresse connue elle rend
   l'identifiant existant sans poser le moindre role. On le dit AVANT, en grand,
   parce que l'erreur ne se verrait qu'a la premiere commande au mauvais tarif. */
.ob-deja{border-left:4px solid #b45309;background:#fffbeb;color:#92400e;padding:12px 14px;border-radius:8px;margin:0 0 16px;font-size:.88rem;line-height:1.45;}
.ob-deja strong{font-weight:700;}

.ob-bloc{margin:0 0 18px;}
.ob-bloc-titre{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted,#64748b);margin:0 0 8px;}
.ob-paire{display:flex;gap:10px;padding:5px 0;font-size:.9rem;border-bottom:1px solid var(--border,#e2e8f0);}
.ob-paire:last-child{border-bottom:0;}
.ob-paire dt{flex:0 0 180px;color:var(--text-muted,#64748b);}
.ob-paire dd{margin:0;flex:1;min-width:0;word-break:break-word;}

/* La piece jointe est un LIEN, pas une image en ligne : elle se telecharge,
   servie par une route qui demande une session. */
.ob-piece{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border,#e2e8f0);border-radius:8px;font-size:.85rem;margin:0 8px 8px 0;}
.ob-piece small{color:var(--text-muted,#64748b);}

.ob-precedente{font-size:.82rem;color:var(--text-muted,#64748b);padding:3px 0;}

/* L'ATTRIBUT `hidden` NE CACHE RIEN QUAND UNE CLASSE POSE UN `display`.
 *
 * `[hidden]` vient de la feuille du navigateur, et une classe d'auteur le bat a
 * specificite egale. `.ob-panneau-pied` declare `display:flex` : le script a beau
 * poser `hidden` sur une candidature deja tranchee, le pied restait visible et
 * offrait « Creer le compte » sur un dossier deja clos.
 *
 * C'est le troisieme endroit de Darsy ou ce piege se referme. Un test le
 * surveille desormais, et c'est lui qui a attrape celui-ci.
 */
.ob-panneau-pied[hidden]{display:none;}

/* ── Ce que l'essai a montre ───────────────────────────────────────────── */

/* LA LIGNE EST CLIQUABLE, ET ELLE DOIT EN AVOIR L'AIR.
 *
 * Au-dessus d'un tableau, le curseur par defaut est la barre de saisie de texte.
 * La ligne s'ouvrait bien au clic, mais rien ne disait qu'elle le pouvait — on
 * la survolait en croyant pouvoir selectionner du texte. Le bouton « Ouvrir » a
 * droite le dit en toutes lettres ; le curseur et le fond au survol le disent
 * avant qu'on ait lu. `user-select` enleve en prime le reflexe de glisser pour
 * selectionner, qui ouvrait la fiche par megarde. */
.card .table tbody tr{cursor:pointer;user-select:none;}
.card .table tbody tr:hover{background:var(--grey-50,#f8fafc);}

/* LA PIECE EST UN BOUTON DEPUIS QU'ELLE PASSE PAR `downloadBlob`.
 * Elle etait un lien ; il lui faut donc ce qu'un bouton n'herite pas. */
.ob-piece{cursor:pointer;background:none;font:inherit;color:inherit;text-align:left;}
.ob-piece:hover{background:var(--grey-50,#f8fafc);}

/* Le select fait la hauteur d'un champ, les boutons celle d'un bouton : sans
 * cet alignement ils flottaient a cote, et la rangee paraissait de travers. */
.ob-panneau-pied{align-items:center;}

/* ═══ LA COMPARAISON AVEC UN COMPTE DEJA OUVERT ════════════════════════════

   Le professionnel a souvent deja commande une fois en particulier, puis
   demande ses tarifs : son adresse porte donc un compte, et le compte initial
   porte souvent des erreurs. Les deux versions se lisent cote a cote, et
   l'operateur coche ce que le dossier remplace.

   Aucune de ces regles ne pose `display` sur un element que le script masque
   par `hidden` : `#obComparaison` n'est vise par aucun selecteur de mise en
   page, sinon l'attribut ne ferait rien. C'est le piege qui a mordu sur
   `.ob-panneau-pied`.
   ═══════════════════════════════════════════════════════════════════════ */

/* LA BOITE DE LA COMPARAISON, ET POURQUOI ELLE N'EST PAS UN `.ob-bloc`.

   Les autres blocs du panneau sont PLATS : ni fond, ni bordure, ni padding —
   `.ob-bloc` ne porte qu'une marge basse, et le padding vient du corps du
   panneau. Ca va pour une liste de paires qu'on parcourt.

   Celle-ci n'est pas une liste : c'est un avertissement avec des cases a
   cocher, et le seul endroit de l'ecran ou l'on decide d'ecraser les donnees
   de quelqu'un. Elle a donc son fond, sa barre et son padding — sinon ses
   lignes se confondent avec le dossier qu'on vient de lire.

   Le premier jet la posait a cote du corps du panneau, donc hors de son
   padding : elle touchait les bords. */
.ob-cmp-boite {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: var(--grey-50, #f8fafc);
    border-left: 3px solid var(--psg-gold, #40aef0);
    border-radius: 0 8px 8px 0;
}

/* Le seul cas ou l'on refuse d'agir : un compte du personnel. */
.ob-cmp-boite--stop {
    background: #fef2f2;
    border-left-color: var(--psg-red, #DA291C);
    color: #991b1b;
}
.ob-cmp-boite--stop .ob-bloc-titre { color: #991b1b; }
.ob-cmp-boite--stop .ob-avis { color: #991b1b; }

.ob-avis {
    margin: 0 0 12px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--grey-600);
}

.ob-cmp { width: 100%; border-collapse: collapse; font-size: .8rem; margin-top: 4px; }
.ob-cmp th {
    text-align: left;
    padding: 6px 8px;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--grey-400);
    border-bottom: 1px solid var(--grey-200);
}
.ob-cmp td { padding: 7px 8px; border-bottom: 1px solid var(--grey-100); vertical-align: top; }
.ob-cmp td:first-child { width: 28px; }
.ob-cmp td:nth-child(2) { font-weight: 700; color: var(--grey-600); white-space: nowrap; }

/* Une ligne qui change se voit : c'est la seule chose a lire dans ce tableau.
   Les lignes identiques restent, pour qu'on sache qu'elles ont ete regardees. */
.ob-cmp-change td:nth-child(3) { color: var(--grey-500); text-decoration: line-through; }
.ob-cmp-change td:nth-child(4) { color: var(--psg-navy); font-weight: 700; }

.ob-cmp-case { cursor: pointer; }

/* « vide » dans une cellule, et NON `.ob-vide` qui existe deja ailleurs avec
   un tout autre sens : un panneau sans resultat, 48px de marge. La reprendre
   ici aurait fait exploser la hauteur de chaque ligne du tableau. */
.ob-cmp-vide { color: var(--grey-300); font-style: italic; }

/* La case qui decide si le client est prevenu.

   Elle est DANS la boite de comparaison, pas dans le pied : c'est une
   consequence de la mise a jour, et elle se lit au moment ou l'on regarde ce
   qu'on va changer. Dans le pied, a cote des boutons, elle aurait ete cochee
   ou decochee sans y penser.

   Cochee par defaut, sauf si le compte est deja pro — la boutique refuserait
   l'envoi de toute facon, et une case cochee qui ne fait rien se remarque. */
.ob-cmp-notif {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    padding: 9px 11px;
    background: #fff;
    border: 1px solid var(--grey-200, #e2e8f0);
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--grey-600, #475569);
    cursor: pointer;
}
.ob-cmp-notif input { margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.ob-cmp-notif em { color: var(--grey-400, #94a3b8); font-weight: 500; }