/* ═══ Contacts — les demandes de tous les sites ═══════════════════════════ */

/* 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. */
.cx-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;}
.cx-tabs::-webkit-scrollbar{height:5px;}
.cx-tabs::-webkit-scrollbar-thumb{background:var(--grey-200);border-radius:999px;}
.cx-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;}
.cx-tab:hover{color:var(--grey-700);}
.cx-tab.active{color:var(--psg-navy);box-shadow:inset 0 -2px 0 var(--psg-navy);}
.cx-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);}
.cx-tab.active .cx-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. */
.cx-message{display:none;}
.cx-message.visible{display:block;}
.loading-panel{padding:var(--space-10);text-align:center;color:var(--grey-400);font-weight:700;}

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

/* ── La liste ─────────────────────────────────────────────────────────── */
.cx-table{width:100%;border-collapse:collapse;}
.cx-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;}
.cx-table td{padding:11px 16px;border-bottom:1px solid var(--grey-100);font-size:.84rem;vertical-align:top;}
.cx-table tbody tr{cursor:pointer;}
.cx-table tbody tr:hover{background:#f8fafc;}
.cx-table tbody tr:last-child td{border-bottom:0;}

.cx-date{color:var(--grey-400);font-size:.76rem;font-variant-numeric:tabular-nums;white-space:nowrap;}
.cx-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;}
.cx-qui{min-width:150px;}
.cx-nom{display:block;font-weight:800;color:var(--psg-navy);}
.cx-mail{display:block;font-size:.74rem;color:var(--grey-400);overflow-wrap:anywhere;}
.cx-objet{max-width:420px;}
.cx-sujet{display:block;font-weight:700;}
.cx-extrait{display:block;font-size:.78rem;color:var(--grey-400);}
.cx-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. */
.cx-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;}
.cx-nouveau{background:#fee2e2;color:#991b1b;}
.cx-en_cours{background:#fef3c7;color:#92400e;}
.cx-traite{background:#dcfce7;color:#166534;}
.cx-ignore{background:var(--grey-100);color:var(--grey-500);}

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

/* ── Le panneau de detail ─────────────────────────────────────────────── */
.cx-panneau{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.45);
    display:flex;align-items:center;justify-content:center;padding:20px;}
.cx-panneau[hidden]{display:none;}
.cx-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);}
.cx-panneau-tete{display:flex;align-items:flex-start;gap:12px;padding:18px 22px;
    border-bottom:1px solid var(--grey-100);}
.cx-panneau-site{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
    color:var(--grey-400);margin-bottom:3px;}
.cx-panneau-titre{margin:0;font-size:1.05rem;font-weight:800;color:var(--psg-navy);}
.cx-fermer{margin-left:auto;background:none;border:0;width:32px;height:32px;cursor:pointer;
    color:var(--grey-400);flex:0 0 auto;}
.cx-fermer:hover{color:var(--psg-navy);}
.cx-fermer svg{width:18px;height:18px;}
.cx-panneau-corps{padding:18px 22px;overflow-y:auto;flex:1;}
.cx-panneau-pied{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:14px 22px;border-top:1px solid var(--grey-100);background:#f8fafc99;}

.cx-champ{display:flex;gap:12px;padding:5px 0;font-size:.84rem;}
.cx-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;}
.cx-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. */
.cx-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;}

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

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

/* ── La reponse, dans le panneau ────────────────────────────────────────── */

.cx-reponse{margin-top:18px;padding-top:16px;border-top:1px solid var(--grey-200,#e2e8f0);}
.cx-reponse-envoi{display:flex;align-items:center;gap:10px;margin-top:10px;}
.cx-reponse-aide{font-size:.76rem;color:var(--grey-500,#64748b);}

/* Une reponse deja partie. Relue, pas modifiable : c'est ce qui a ete envoye. */
.cx-deja{border-left:3px solid var(--grey-200,#e2e8f0);padding:8px 0 8px 12px;margin:0 0 10px;font-size:.84rem;white-space:pre-wrap;}
.cx-deja-tete{font-size:.72rem;color:var(--grey-500,#64748b);margin-bottom:4px;}
.cx-deja.echec{border-left-color:#dc2626;}
.cx-deja.echec .cx-deja-tete{color:#dc2626;font-weight:700;}

/* ── Les pieces jointes, cliquables ─────────────────────────────────────── */

/* Elles etaient des <li> de texte : rien a cliquer, rien a voir. */
.cx-fichiers li{display:flex;align-items:center;gap:8px;}
.cx-fichier-btn{background:none;border:0;padding:0;font:inherit;color:var(--psg-navy,#1e3a5f);
    text-decoration:underline;cursor:pointer;text-align:left;}
.cx-fichier-btn:hover{opacity:.75;}
/* Une piece purgee n'est plus un bouton : l'octet n'existe plus. */
.cx-fichiers li.purgee .cx-fichier-btn{color:var(--grey-400,#94a3b8);text-decoration:none;cursor:default;pointer-events:none;}

/* ── La visionneuse ─────────────────────────────────────────────────────── */

/* z-index au-dessus du panneau de detail (1000) : la visionneuse s'ouvre
   PAR-DESSUS lui (on clique une piece jointe depuis l'intérieur du panneau
   ouvert), jamais derriere — repere le 13/10/2026, elle s'ouvrait bien mais
   restait invisible sous le panneau tant qu'on ne le fermait pas. */
.cx-visionneuse{position:fixed;inset:0;z-index:1100;background:rgba(15,23,42,.82);
    display:flex;flex-direction:column;}
/* 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. Sans cette ligne, la visionneuse restait ouverte sur toute
   la page des le chargement. Troisieme fois que ce piege se referme ici. */
.cx-visionneuse[hidden]{display:none;}
.cx-visionneuse-barre{display:flex;align-items:center;gap:12px;padding:10px 16px;
    background:#fff;color:var(--grey-800,#1e293b);font-size:.86rem;font-weight:700;}
.cx-visionneuse-corps{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px;}
.cx-visionneuse-corps img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;}
.cx-visionneuse-corps iframe{width:100%;height:100%;border:0;background:#fff;}

/* ═══ LES PIECES JOINTES, COMME SUR UNE FICHE COMMANDE ══════════════════════

   C'etaient des <li> avec un nom de fichier en texte, sous le message : on ne
   voyait pas ce que le client avait envoye sans ouvrir chaque piece une par
   une. La fiche commande fait l'inverse depuis longtemps — une vignette pour
   une image, une pastille pour le reste — et on sait d'un coup d'oeil si la
   photo de la cle est lisible.

   Memes dimensions que la : 72 pixels. Ce n'est pas un hasard a reproduire,
   c'est la taille ou une photo de cle se reconnait sans etre ouverte.
   ════════════════════════════════════════════════════════════════════════ */

.cx-pieces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.cx-piece-vignette {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid var(--grey-200);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
}
.cx-piece-vignette:hover { border-color: var(--psg-gold); }
.cx-piece-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cx-piece-pastille {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 6px;
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    color: var(--psg-navy);
    cursor: pointer;
}
.cx-piece-pastille:hover { border-color: var(--psg-gold); }

/* Une piece purgee garde sa place, en texte inerte : la faire disparaitre
   laisserait croire que le client n'avait rien joint. */
.cx-piece-purgee {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--grey-200);
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--grey-500);
    background: var(--grey-50);
}