/* Elevora CRM — fiche-client.css
   Refonte de la MISE EN PAGE de la fiche client (24/09/2026), pas de la charte : aucune couleur
   nouvelle, uniquement les jetons de css/elevora.css, dans les deux thèmes.

   Demande de Célian : « ça devient brouillon, il y a beaucoup d'informations de partout […] qu'au
   premier coup d'œil je sache directement où cliquer pour atteindre la page Factures ». Ce que
   la fiche faisait, et ce qui la remplace :
   · huit boutons d'action de huit couleurs → deux groupes nommés (« Créer un document », « Fiche »),
     boutons neutres ; la couleur est gardée pour ce qui a un sens (le statut de paiement) ;
   · onze onglets à égalité → deux groupes nommés, Suivi et Documents, un seul jeu d'onglets
     (le clavier les parcourt tous), le nombre d'éléments à côté de Devis, Contrats, Factures,
     Échanges ; Activité et Historique ne font plus qu'un ;
   · une carte encadrée par information (dix boîtes « Détails du projet », une carte par tâche,
     un cadre par bloc) → des sections titrées, des listes de définitions séparées par un filet ;
     l'en-tête reste la seule carte ;
   · dégradés (barre d'avancement, onglet de projet actif) et ombres → à plat.
   Mouvement : le panneau qui s'ouvre apparaît en fondu court (220 ms, 4 px), coupé sous
   prefers-reduced-motion ; aucun effet de survol hors changement de couleur.
   Chargé après css/mobile.css : à spécificité égale, ces règles l'emportent.

   V3 (25/09/2026 au soir) : voir la section « V3 » en fin de fichier. Célian a trouvé la V2 plus
   lisible pièce par pièce, mais « on se perd » : pas de démarcation entre les parties, des
   intitulés de groupe aussi petits que ce qu'ils regroupent, des actions tassées en haut à droite,
   et plus aucune couleur. La V3 remet des cartes titrées, un code couleur par type de document, et
   un bandeau par onglet. L'espace prospect (js/54, css/espace-prospect.css) emprunte les classes
   de la V2 : les règles ci-dessous restent, la V3 est limitée à .fiche-client. */

.fiche{display:flex;flex-direction:column;gap:var(--s5)}

/* ── En-tête : identité, actions, chiffres clés ───────────────────────────────────────── */
/* Des blocs qui passent à la ligne selon la place RÉELLEMENT disponible (la barre latérale en
   prend 220 px) : l'identité garde au moins 280 px, sinon les actions descendent en dessous. */
.fiche .fiche-tete{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);align-items:flex-start;
  margin:0;padding:var(--s5);background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl)}
.fiche-id{display:flex;gap:var(--s4);align-items:flex-start;min-width:0;flex:1 1 280px}
.fiche .profile-av{width:48px;height:48px;border-radius:12px;font-size:17px}
.fiche-id-txt{min-width:0;display:flex;flex-direction:column;gap:6px}
.fiche .profile-name{font-size:22px;font-weight:700;letter-spacing:-.4px;line-height:1.2;margin:0;overflow-wrap:anywhere}
.fiche-contact{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:13px;color:var(--text2);margin:0}
.fiche-contact:empty{display:none}
.fiche-contact a{color:var(--accent);text-decoration:none;overflow-wrap:anywhere}
.fiche-contact a:hover{text-decoration:underline}
.fiche-tel{font-family:var(--mono);font-size:12.5px}
.fiche-puces{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fiche-puces:empty{display:none}
.fiche-puce{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--glow);color:var(--accent)}

.fiche .fiche-actions{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);align-self:flex-start;flex:0 1 auto;min-width:0}
.fiche-actions-groupe{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.fiche-actions-l{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin-right:4px}
.fiche .fiche-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:13px;font-weight:500;
  background:transparent;border:1px solid var(--border2);color:var(--text)}
.fiche .fiche-btn svg{color:var(--text2)}
.fiche .fiche-btn:hover{background:var(--bg3);color:var(--text);transform:none;box-shadow:none}
.fiche .fiche-btn-danger{color:var(--red);border-color:transparent}
.fiche .fiche-btn-danger svg{color:currentColor}
.fiche .fiche-btn-danger:hover{background:var(--red-bg);color:var(--red)}
.fiche .fiche-btn-mini{padding:3px 8px;font-size:11.5px;min-height:24px}

/* Chiffres clés : une ligne typographique sous un filet, jamais des tuiles. */
.fiche-chiffres{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin:0;padding-top:var(--s4);border-top:1px solid var(--border)}
.fiche-chiffres:empty{display:none}
.fiche-chiffre{display:flex;flex-direction:column;gap:2px;min-width:0}
.fiche-chiffre dt{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3)}
.fiche-chiffre dd{margin:0;font-size:13px;color:var(--text2);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.fiche-chiffre .fiche-chiffre-v{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--text);display:block}
.fiche-chiffre .fiche-chiffre-2{font-weight:600;color:var(--text2)}
.fiche-statut{font-weight:700;font-size:14px}
.fiche-chiffre-note{font-size:12px;color:var(--text3)}
.fiche-lien{border:0;background:none;padding:0;min-height:24px;font:600 12.5px var(--font);color:var(--accent);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.fiche-lien:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.fiche-rouge{color:var(--red)}
.fiche-ambre{color:var(--amber)}
.fiche-vert{color:var(--green)}

/* ── Barre des projets : des onglets à plat ───────────────────────────────────────────── */
.fiche-projets{margin:0}
.fiche .proj-tabs-bar{background:none;border:0;box-shadow:none;padding:0;gap:6px}
.fiche .proj-tab{border:1px solid var(--border)}
.fiche .proj-tab:hover{background:var(--bg3)}
.fiche .proj-tab.active{background:var(--bg2);border-color:var(--border2);box-shadow:none}
.fiche .proj-tab.active::before{background:var(--accent)}
.fiche .proj-tab-dot{box-shadow:none}

/* ── Le projet affiché : état, livraison, avancement ──────────────────────────────────── */
.fiche-projet{margin:0 0 var(--s5)}
.fiche-projet-l1{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:var(--s3)}
.fiche-projet-titre{font-size:15px;font-weight:600;color:var(--text);margin:0;letter-spacing:-.1px;overflow-wrap:anywhere}
.fiche-projet-dates{font-size:12.5px;color:var(--text2)}
.fiche-projet-l2{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4)}
.fiche-pct{flex:1 1 240px;min-width:0}
.fiche-pct-piste{position:relative;height:20px;display:flex;align-items:center}
.fiche-pct-fond{position:absolute;left:0;right:0;height:8px;background:var(--bg4);border-radius:4px;overflow:hidden;pointer-events:none}
.fiche-pct-rempli{height:100%;border-radius:4px;background:var(--accent)}
.fiche .pct-range{position:relative;z-index:1;background:transparent;height:20px}
.fiche .pct-marks{display:flex;justify-content:space-between;font-size:10px;color:var(--text3);margin-top:2px}
.fiche .pct-val{font:700 22px var(--mono);color:var(--accent);min-width:3.2em;text-align:right}
.fiche .pct-save-btn{margin-top:0;width:auto}

/* ── Navigation : deux groupes d'onglets, Suivi et Documents ──────────────────────────── */
.fiche-nav{border-bottom:1px solid var(--border);margin:0 0 var(--s5)}
/* Les deux groupes se distinguent par leur intitulé et par l'espace qui les sépare — pas par un
   filet vertical, qui restait accroché à gauche quand le second groupe passait à la ligne. */
.fiche-onglets{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3) var(--s6)}
.fiche-onglets-groupe{display:flex;flex-wrap:wrap;align-items:flex-end;min-width:0}
.fiche-onglets-l{flex:0 0 100%;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:0 12px 2px}
/* Les onglets de la fiche client eux-mêmes (button.ptab) sont dessinés par la section V3. */
.ptab-n{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--text2);padding:0 6px;border-radius:8px;background:var(--bg3);line-height:18px}
.ptab-n:empty,.ptab-n[hidden]{display:none}

/* Le panneau qui s'ouvre : un fondu court, pour que le changement se voie sans se remarquer. */
@keyframes ficheApparait{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fiche .ptab-content.active{animation:ficheApparait .22s cubic-bezier(.25,1,.5,1)}
@media (prefers-reduced-motion:reduce){
  .fiche .ptab-content.active{animation:none}
  .act-groupe-t::before{transition:none}
}

/* ── Onglet Informations : sections titrées, listes de définitions ────────────────────── */
.fiche-infos{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
@media (min-width:1100px){.fiche-infos{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.fiche-infos-col{display:flex;flex-direction:column;gap:var(--s6);min-width:0}
.fiche-section-tete{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s2) var(--s3);margin-bottom:var(--s3)}
.fiche-section-t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin:0 0 var(--s3)}
.fiche-section-tete .fiche-section-t{margin:0}
.fiche-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 var(--s5);margin:0}
.fiche-dl > div{padding:10px 0;border-top:1px solid var(--border);min-width:0}
.fiche-dl dt{font-size:11.5px;color:var(--text3);margin-bottom:2px}
.fiche-dl dd{margin:0;font-size:13.5px;font-weight:500;color:var(--text);overflow-wrap:anywhere}
.fiche-dl .fiche-dl-large{grid-column:1 / -1}
.fiche-mono{font-family:var(--mono)}
.fiche-accent{color:var(--accent)}
.fiche-sans{color:var(--text3);font-weight:400}
.fiche-note{margin-top:var(--s4);padding:var(--s3) var(--s4);background:var(--bg3);border-radius:var(--r)}
.fiche-note-t{font-size:11.5px;color:var(--text3);font-weight:600;margin:0 0 4px}
.fiche-note-txt{font-size:13.5px;line-height:1.65;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.fiche-vide{font-size:12.5px;color:var(--text3);margin:0}
.fiche-taches{list-style:none;margin:0;padding:0}
.fiche-tache{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 0;border-top:1px solid var(--border)}
.fiche-tache:last-child{border-bottom:1px solid var(--border)}
.fiche-tache input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.fiche-tache-t{flex:1 1 160px;min-width:0;font-size:13px;font-weight:500;color:var(--text);overflow-wrap:anywhere}
.fiche-tache-faite .fiche-tache-t{text-decoration:line-through;color:var(--text2)}
.fiche-tache-m{font-size:11.5px;color:var(--text3);flex-shrink:0}
.fiche-tache-m.fiche-rouge{color:var(--red)}

/* ── Onglet Échanges : une liste à filets, et les captures d'écran ─────────────────────── */
.fiche .ech-liste{gap:0}
.fiche .ech-item{background:none;border:0;border-top:1px solid var(--border);border-radius:0;padding:14px 0}
.fiche .ech-item:last-child{border-bottom:1px solid var(--border)}
.ech-captures{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ech-vignette{display:block;width:96px;height:72px;padding:0;border:1px solid var(--border2);border-radius:var(--rs);background:var(--bg3);overflow:hidden;cursor:zoom-in}
.ech-vignette img{width:100%;height:100%;object-fit:cover;display:block}
.ech-vignette:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ech-vignette-ko{cursor:default}
.ech-captures-note{font-size:12px;color:var(--text3);margin:6px 0 0;line-height:1.5}
.ech-visionneuse{margin:0;display:flex;flex-direction:column;gap:8px;align-items:center}
.ech-visionneuse img{max-width:100%;max-height:62vh;object-fit:contain;border-radius:var(--rs);background:var(--bg3)}
.ech-visionneuse figcaption{font-size:12px;text-align:center;overflow-wrap:anywhere}
.ech-visionneuse-nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:10px}
/* Dans la fenêtre de l'échange */
.ech-cap-tete{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.ech-cap-tete .gen-l{min-height:0}
.ech-depot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 14px;border:1.5px dashed var(--border-input);border-radius:var(--r);background:var(--bg3)}
.ech-depot.ech-survol{border-color:var(--accent);background:var(--glow)}
.ech-depot-t{margin:0;font-size:13px;color:var(--text2)}
.ech-cap-aide{font-size:12px;margin:6px 0 0;line-height:1.5}
.ech-cap-liste{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ech-cap-liste:empty{display:none}
.ech-cap-item{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:112px}
.ech-cap-item img{width:112px;height:80px;object-fit:cover;border-radius:var(--rs);border:1px solid var(--border2);background:var(--bg3)}
.ech-cap-item .pr-leger{font-size:11.5px}
.ech-cap-statut{font-size:12.5px;color:var(--text2);margin-top:4px}
.ech-cap-statut:empty{margin:0}

/* ── Onglet Activité (Activité + Historique) ──────────────────────────────────────────── */
.act-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:var(--s3)}
.act-compte{font-size:12.5px;color:var(--text2);margin:0;font-family:var(--mono)}
.act-filtres{display:flex;flex-direction:column;gap:10px;padding:0 0 var(--s4);margin-bottom:var(--s4);border-bottom:1px solid var(--border)}
.act-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.act-puce{display:inline-flex;align-items:center;gap:6px;min-height:var(--cmd-h,36px);padding:4px 12px;border-radius:16px;border:1px solid var(--border2);
  background:transparent;color:var(--text2);font:500 12.5px var(--font);cursor:pointer}
.act-puce:hover{color:var(--text)}
.act-puce[aria-pressed="true"]{border-color:var(--accent);background:var(--glow);color:var(--accent);font-weight:600}
.act-puce-n{font-family:var(--mono);font-size:11px}
.act-puce:focus-visible,.act-seg:focus-visible,.act-groupe-t:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.act-segments{display:inline-flex;padding:2px;min-height:var(--cmd-h,36px);box-sizing:border-box;border-radius:var(--rs);background:var(--bg3);gap:2px}
.act-seg{min-height:calc(var(--cmd-h,36px) - 4px);padding:3px 12px;border:0;border-radius:5px;background:transparent;color:var(--text2);font:500 12.5px var(--font);cursor:pointer}
.act-seg[aria-pressed="true"]{background:var(--bg2);color:var(--text);font-weight:600}
.act-champ{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text2)}
.act-champ .fi,.act-champ .fsel{width:auto;max-width:100%;padding:5px 8px;font-size:12.5px}
.act-avis{font-size:12.5px;color:var(--text);background:var(--amber-bg);border-radius:var(--r);padding:8px 12px;margin:0 0 var(--s3)}
.act-groupes{display:flex;flex-direction:column;gap:var(--s4)}
.act-groupe-t{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:4px 0;min-height:28px;border-radius:var(--rs)}
.act-groupe-t::-webkit-details-marker{display:none}
.act-groupe-t::before{content:'';width:6px;height:6px;border-right:2px solid var(--text2);border-bottom:2px solid var(--text2);transform:rotate(45deg);margin:0 2px 3px 3px;transition:transform .18s}
.act-groupe:not([open]) .act-groupe-t::before{transform:rotate(-45deg);margin-bottom:0}
.act-groupe-nom{display:inline-block;font-size:13px;font-weight:600;color:var(--text)}
.act-groupe-nom::first-letter{text-transform:uppercase}
.act-groupe-n{font-size:11.5px;color:var(--text3)}
.act-liste{list-style:none;margin:6px 0 0 6px;padding:0 0 0 20px;border-left:1px solid var(--border)}
.act-item{display:flex;gap:12px;padding:7px 0;align-items:flex-start}
.act-ic{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  margin-left:-34px;border:2px solid var(--bg);background:var(--bg3);color:var(--text2)}
.act-doc .act-ic{background:var(--glow);color:var(--accent)}
.act-argent .act-ic{background:var(--green-bg);color:var(--green)}
.act-echange .act-ic{background:var(--blue-bg);color:var(--blue)}
.act-etape .act-ic{background:var(--amber-bg);color:var(--amber)}
.act-corps{min-width:0;flex:1}
.act-titre{font-size:13.5px;font-weight:500;color:var(--text);overflow-wrap:anywhere}
.act-fort .act-titre{font-weight:600}
.act-sub{font-size:12.5px;color:var(--text2);margin-top:1px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.act-meta{font-size:11.5px;color:var(--text3);margin-top:2px}
.act-meta time{font-family:var(--mono)}
.act-plus{text-align:center;margin-top:var(--s4)}

/* ── Écrans étroits : tout s'empile, rien ne déborde à 320 px ─────────────────────────── */
@media (max-width:1100px){
  .fiche .fiche-actions{align-items:flex-start}
  .fiche-actions-groupe{justify-content:flex-start}
}
@media (max-width:900px){
  .fiche .fiche-tete{padding:var(--s4)}
  .fiche-onglets{gap:var(--s2) var(--s5)}
}
@media (max-width:480px){
  /* Une ligne de devis, de contrat ou de facture : ses boutons passent sous le nom au lieu de
     pousser la page de 30 px au-delà des 320 px (mesuré sur l'onglet Factures, 24/09/2026). */
  .fiche .di{flex-wrap:wrap}
  .fiche .di-actions{flex-wrap:wrap;flex-shrink:1;min-width:0;margin-left:auto}
  .fiche .dn2{white-space:normal;overflow-wrap:anywhere}
  .fiche .profile-name{font-size:19px}
  .fiche-actions-l{flex:0 0 100%;margin:0}
  .fiche-chiffres{gap:var(--s3) var(--s5)}
  .fiche .fiche-onglets button.ptab{padding:9px;font-size:13.5px}
  .fiche-onglets-l{padding:0 9px 2px}
  .act-liste{padding-left:16px}
  .act-ic{margin-left:-30px}
}

/* Échange : « Me rappeler de faire le suivi dans … » (25/09/2026) */
.ech-suivi{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.ech-suivi-l{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.ech-suivi-l input{width:18px;height:18px;margin:0}
.ech-suivi-j{width:auto;min-width:10rem}

/* ════════════════════════════════════════════════════════════════════════════════════════
   V3 — 25/09/2026 au soir (retours de Célian, captures 49, 50 et 51)
   Tout est limité à .fiche-client (la fiche d'un client) : l'espace prospect garde la V2.
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Le code couleur ─────────────────────────────────────────────────────────────────────
   Une teinte par type de document, posée par data-teinte sur un bouton, un onglet ou un
   panneau, et héritée par tout ce qu'il contient. --t : texte et contours ; --t-bg : fond
   teinté (les jetons -bg, 8 à 14 % d'opacité — au-delà, le texte de la teinte posé dessus passe
   sous 4,5:1, mesuré le 25/09/2026) ; --t-fill et --t-on : l'aplat de l'action principale et son
   texte. Aucun survol n'épaissit la teinte : il pose le contour plein, le contraste ne bouge pas. */
.fiche-client,.fiche-client [data-teinte]{--t:var(--accent);--t-bg:var(--glow);--t-fill:var(--accent-fill);--t-on:var(--on-fill)}
.fiche-client [data-teinte="devis"]{--t:var(--blue);--t-bg:var(--blue-bg);--t-fill:var(--accent-fill);--t-on:var(--on-fill)}
.fiche-client [data-teinte="contrat"]{--t:var(--green);--t-bg:var(--green-bg);--t-fill:var(--green-fill);--t-on:var(--on-fill)}
.fiche-client [data-teinte="facture"]{--t:var(--amber);--t-bg:var(--amber-bg);--t-fill:var(--amber-fill);--t-on:var(--amber-on)}
.fiche-client [data-teinte="proposition"]{--t:var(--red);--t-bg:var(--red-bg);--t-fill:var(--red-fill);--t-on:var(--on-fill)}
.fiche-client [data-teinte="cdc"]{--t:var(--violet);--t-bg:var(--violet-bg);--t-fill:var(--violet-fill);--t-on:var(--on-fill)}
.fiche-client [data-teinte="bilan"]{--t:var(--pink);--t-bg:var(--pink-bg)}
.fiche-client [data-teinte="neutre"]{--t:var(--text2);--t-bg:var(--bg3);--t-fill:var(--accent-fill);--t-on:var(--on-fill)}

.fiche-client{gap:var(--s5)}

/* ── En-tête : identité et actions de la fiche / chiffres clés / barre « Créer un document » ── */
.fiche-client .fc-tete.profile-header{display:block;padding:0;margin:0;overflow:visible}
.fc-tete-haut{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s4) var(--s5);padding:var(--s5) var(--s5) var(--s4)}
.fiche-client .fiche-id{flex:1 1 320px}
.fiche-client .profile-av{width:52px;height:52px;font-size:18px}
.fiche-client .profile-name{font-size:24px}
.fiche-client .fc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;align-self:flex-start}
.fiche-client .fc-btn{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:8px 14px;border-radius:var(--r);
  border:1px solid var(--border2);background:transparent;color:var(--text);font:600 13.5px var(--font)}
.fiche-client .fc-btn svg{flex-shrink:0}
.fiche-client .fc-btn:hover{background:var(--bg3);color:var(--text)}
.fiche-client .fc-btn.fc-teinte{background:var(--t-bg);color:var(--t);border-color:transparent}
.fiche-client .fc-btn.fc-teinte:hover{background:var(--t-bg);color:var(--t);border-color:var(--t)}
.fiche-client .fc-plus[aria-expanded="true"]{background:var(--bg3);border-color:var(--border-input)}

/* Menu « Plus » : ce qui ne sert pas tous les jours, et la suppression, à l'écart. */
.fc-menu{position:relative}
.fc-menu-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:230px;padding:6px;background:var(--bg2);
  border:1px solid var(--border2);border-radius:12px;box-shadow:0 14px 36px -10px rgba(0,0,0,.5)}
.fc-menu-liste[hidden]{display:none}
.fc-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 12px;border:0;border-radius:8px;
  background:none;color:var(--text);font:500 13.5px var(--font);text-align:left;cursor:pointer}
.fc-menu-item svg{color:var(--text2);flex-shrink:0}
.fc-menu-item:hover,.fc-menu-item:focus-visible{background:var(--bg3)}
.fc-menu-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fc-menu-danger,.fc-menu-danger svg{color:var(--red)}
.fc-menu-danger:hover,.fc-menu-danger:focus-visible{background:var(--red-bg)}
.fc-menu-sep{height:1px;background:var(--border);margin:4px 6px}
/* 28/09/2026 : « Supprimer le client… » pour un membre — désactivé (aria-disabled), qui dit pourquoi ;
   cliqué, il l'explique (js/10b). Même traitement dans le menu d'une ligne de la liste (css/elevora.css). */
.fc-menu-inactif,.fc-menu-inactif svg{color:var(--text2);cursor:default}
.fc-menu-texte{display:flex;flex-direction:column;gap:2px}
.fc-menu-note{display:block;font-size:11.5px;font-weight:400;color:var(--text3)}

.fiche-client .fiche-chiffres{margin:0 var(--s5);padding:var(--s4) 0 var(--s5);border-top:1px solid var(--border)}
.fiche-client .fiche-chiffres:empty{display:block;min-height:1px;padding:0}

/* La barre de création : sur toute la largeur, en pied de carte, un fond à part. Les boutons ont
   repris les couleurs d'avant le 24/09 (fond teinté, texte de la teinte), en plus grand. */
.fc-creer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);padding:var(--s4) var(--s5);
  background:var(--bg);border-top:1px solid var(--border);border-radius:0 0 var(--rl) var(--rl)}
.fc-creer-l{font:700 12px var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--text2)}
.fc-creer-boutons{display:flex;flex-wrap:wrap;gap:10px}
.fiche-client .fc-doc{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 18px;border-radius:var(--r);
  background:var(--t-bg);color:var(--t);border:1px solid color-mix(in srgb,var(--t) 30%,transparent);font:600 14px var(--font)}
.fiche-client .fc-doc:hover{background:var(--t-bg);color:var(--t);border-color:var(--t)}
.fiche-client .fc-doc[data-teinte="neutre"]{background:transparent;color:var(--text);border-color:var(--border2)}
.fiche-client .fc-doc[data-teinte="neutre"]:hover{background:var(--bg3);color:var(--text)}

/* ── Le projet affiché : onglets de projet, puis l'avancement ───────────────────────────────── */
.fiche-client .fiche-projet{margin:0 0 var(--s5)}
/* La jauge, sa valeur et le bouton sur UNE rangée de grille (centrés sur le même axe), les
   graduations sur la rangée d'en dessous — capture 50 : « 100 % » et le bouton étaient plus bas
   que la ligne. */
.fiche-client .fc-jauge{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"piste val btn" "marks . .";
  align-items:center;column-gap:var(--s4);row-gap:2px}
.fiche-client .fc-jauge .fiche-pct-piste{grid-area:piste;min-width:0}
.fiche-client .fc-jauge .pct-marks{grid-area:marks;margin:0}
.fiche-client .fc-jauge .pct-val{grid-area:val;line-height:1;min-width:0;display:block}
.fiche-client .fc-jauge .pct-save-btn{grid-area:btn;margin:0}

/* ── Navigation : de vrais onglets, Suivi et Documents (28/09/2026) ─────────────────────────
   Retour de Célian sur la V3 : « ces bulles font AI slop » (Informations, Échanges, Activité,
   Étapes, Devis, Contrat, Facture…), et leurs mots n'étaient pas au milieu de la hauteur. Les
   pastilles arrondies, contour et point de couleur compris, laissent la place à des onglets :
   un intitulé, rien autour ; l'onglet ouvert s'écrit dans la couleur de son type, en gras, et
   pose dessous un trait de 3 px de cette couleur, au ras du bas de la barre. Le survol ne fait
   que changer la couleur du texte et annoncer ce trait, en plus fin. Ce qui reste de la V3 : les
   deux groupes, chacun sous son titre (Suivi, Documents), le code couleur par type, le clavier
   et les compteurs — un nombre discret après l'intitulé, plus une pastille dans la pastille.
   Une seule carte pour toute la barre ; les deux groupes y sont séparés par un filet, vertical
   quand ils sont côte à côte, horizontal quand Documents passe à la ligne : chaque groupe porte
   un filet à gauche et en haut, et la carte (overflow:hidden, marges de -1 px) masque ceux qui
   tombent sur son bord. Sans ce montage, le filet vertical restait accroché à gauche quand le
   second groupe passait à la ligne (constat de la V2). */
.fiche-client .fc-nav{margin:0 0 var(--s5);background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden}
.fiche-client .fc-onglets{display:flex;flex-wrap:wrap;align-items:stretch;gap:0}
.fc-groupe{display:flex;flex-direction:column;min-width:0;padding:14px 14px 0;margin:-1px 0 0 -1px;border-left:1px solid var(--border);border-top:1px solid var(--border)}
.fc-groupe:first-child{flex:0 0 auto}
.fc-groupe-docs{flex:1 1 auto}
.fc-groupe-t{display:flex;align-items:center;gap:8px;margin:0 8px 2px;font:700 15px/1.3 var(--font);letter-spacing:-.1px;color:var(--text)}
.fc-groupe-t svg{flex-shrink:0;color:var(--text3)}
.fc-groupe-onglets{display:flex;flex-wrap:wrap;gap:0 2px}
.fiche-client .fc-onglets button.fc-onglet{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:11px 10px;
  border:0;border-radius:0;background:none;color:var(--text2);font:500 14px var(--font);white-space:nowrap;cursor:pointer;transition:color .15s}
.fiche-client .fc-onglets button.fc-onglet::before{content:none}
/* [P1] 02/10/2026 : point 12 — les documents gardent leur couleur au repos, mais le point de 8 px
   devant l'intitulé « fait généré par IA » (brief du 01/10, capture 08). Chaque intitulé du groupe
   Documents devient une étiquette : contour de la teinte, texte de la teinte, fond --t-bg (8 à
   14 %). Texte sur son fond, posé sur la barre (--bg2) : sombre 5,2:1 (rouge) à 6,6:1 (ambre),
   clair 5,3:1 (vert, ambre, rouge) à 7,3:1 (bleu) ; Fichiers, --text2 sur --bg3 : 6,2 / 7,6:1
   (tests/v9-chiffres-etiquettes.py refait le calcul). Le contour est à 55 % au repos et plein
   au survol et sur l'onglet ouvert, qui garde aussi son gras et son trait de 3 px : la couleur
   n'est jamais seule à dire lequel est ouvert (1.4.1). La zone de clic reste le bouton de 44 px.
   Pas dans Suivi, où tout est bleu (l'étiquette n'y dirait rien). */
.fiche-client .fc-groupe-docs .fc-onglet-l{padding:3px 10px;border:1px solid color-mix(in srgb,var(--t) 55%,transparent);border-radius:var(--rs);
  background:var(--t-bg);color:var(--t);line-height:1.35}
/* L'étiquette ajoute 8 px de haut : le bouton les reprend sur son propre remplissage, pour rester à
   44 px comme les onglets de Suivi (intitulés sur la même ligne), au bureau comme au téléphone. */
.fiche-client .fc-groupe-docs .fc-groupe-onglets button.fc-onglet{padding-top:8px;padding-bottom:8px}
.fiche-client .fc-groupe-docs .fc-onglet:hover .fc-onglet-l{border-color:var(--t)}
.fiche-client .fc-groupe-docs .fc-onglet.active .fc-onglet-l{border-color:var(--t)}
/* Le trait de l'onglet : absent au repos, fin et pâle au survol, plein et de la couleur du type
   quand l'onglet est ouvert. Il double la couleur par une forme (1.4.1) ; aria-selected le dit. */
.fiche-client .fc-onglets button.fc-onglet::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:transparent}
.fiche-client .fc-onglets button.fc-onglet:hover{color:var(--text);background:none}
.fiche-client .fc-onglets button.fc-onglet:hover::after{height:2px;background:color-mix(in srgb,var(--t) 45%,transparent)}
.fiche-client .fc-onglets button.fc-onglet.active{color:var(--t);font-weight:700;background:none}
.fiche-client .fc-onglets button.fc-onglet.active::after{height:3px;background:var(--t)}
.fiche-client .fc-onglets button.fc-onglet:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--rs)}
/* L'intitulé garde la largeur de sa version grasse (copie invisible, muette pour les lecteurs
   d'écran) : ouvrir un onglet ne décale plus ses voisins. */
.fiche-client .fc-onglet-l{display:inline-flex;flex-direction:column;align-items:center}
.fiche-client .fc-onglet-l::after{content:attr(data-l) / "";height:0;overflow:hidden;visibility:hidden;font-weight:700}
.fiche-client .fc-onglet .ptab-n{padding:0;border-radius:0;background:none;color:var(--text3);font:500 12px var(--mono);line-height:inherit}
.fiche-client .fc-onglet.active .ptab-n{background:none;color:var(--t)}
@media (prefers-reduced-motion:reduce){.fiche-client .fc-onglets button.fc-onglet{transition:none}}

/* ── Les panneaux : un bandeau de la couleur de l'onglet, puis le contenu ───────────────────── */
/* 28/09/2026 : plus de trait épais à gauche (5 px de la couleur du type). Célian : « c'est cramé
   à 1000 km que c'est fait par de l'IA […] tu mets juste une case bleue et ça suffit ». Le bandeau
   garde son fond teinté et son contour fin ; la couleur du type reste dans le fond et le bouton. */
/* Même dessin pour les bandeaux de js/06 (fichePanneauTete) et ceux de js/40, js/08, js/07 :
   ils partagent .ech-tete / .ech-h / .pr-note / .ech-boutons. */
.fiche-client .fc-panneau .ech-tete{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s3) var(--s5);
  margin:0 0 var(--s5);padding:var(--s4) var(--s5);background:var(--t-bg);border:1px solid color-mix(in srgb,var(--t) 30%,transparent);
  border-radius:var(--rl)}
.fiche-client .fc-panneau .ech-tete > div:first-child{min-width:0;flex:1 1 320px}
.fiche-client .fc-panneau .ech-tete .ech-h{font:700 20px/1.25 var(--font);letter-spacing:-.3px;color:var(--text);margin:0 0 4px}
.fiche-client .fc-panneau .ech-tete .pr-note{margin:0;font-size:13.5px;line-height:1.5;color:var(--text2);max-width:92ch}
.fiche-client .fc-panneau .ech-boutons{gap:10px}

/* Boutons d'un panneau : l'action principale (.btn-p) en aplat de la couleur du type, seule de
   son espèce dans le bandeau ; les autres boutons en contour et texte de la couleur. */
.fiche-client .fc-panneau .btn{color:var(--t);border-color:color-mix(in srgb,var(--t) 40%,transparent);background:transparent}
.fiche-client .fc-panneau .btn:hover{color:var(--t);border-color:var(--t);background:var(--t-bg)}
/* « Supprimer » ne prend pas la couleur de l'onglet : une suppression n'est pas l'action du type. */
.fiche-client .fc-panneau .btn-d{color:var(--text2);border-color:var(--border2)}
.fiche-client .fc-panneau .btn-d:hover{color:var(--red);border-color:var(--red);background:var(--red-bg)}
.fiche-client .fc-panneau .btn-p{background:var(--t-fill);color:var(--t-on);border-color:transparent;font-weight:600}
.fiche-client .fc-panneau .btn-p:hover{background:var(--t-fill);color:var(--t-on);border-color:transparent;filter:brightness(.9)}
.fiche-client .fc-panneau .btn-p:disabled{filter:none}
/* Un bouton en attente (« Analyser le client » sans échange) ne doit pas passer pour l'action
   à faire : il pâlit, et son title dit ce qui manque. */
.fiche-client .fc-panneau .btn:disabled{opacity:.5;cursor:not-allowed;background:transparent}
.fiche-client .fc-panneau .btn-p:disabled{background:var(--t-fill)}
.fiche-client .fc-panneau .ech-tete .btn-p,.fiche-client .fc-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;
  font:700 14.5px var(--font);border-radius:var(--r)}
/* 02/10/2026 (point 14) : à côté du bouton principal de 44 px, les autres boutons du bandeau
   (« Guide » du cahier des charges, boutons secondaires) faisaient 25 à 32 px. Même hauteur et
   même taille de texte pour tous ; le bouton principal garde seulement son remplissage. */
.fiche-client .fc-panneau .ech-tete .ech-boutons>.btn,.fiche-client .fc-panneau .ech-tete .ech-boutons>.fsel{min-height:44px;height:auto;padding:0 18px;font-size:14px}
.fiche-client .fc-cta svg{flex-shrink:0}

/* Listes de documents : l'icône, « Modifier » et « Télécharger » prennent la couleur du type.
   Les icônes des factures (js/16) portent leur couleur en style en ligne : !important ici, pour
   que la couleur du panneau l'emporte partout. */
.fiche-client .fc-panneau .dic{background:var(--t-bg)!important;color:var(--t)!important}
.fiche-client .fc-panneau .di-action.edit,.fiche-client .fc-panneau .di-action.dl{color:var(--t);border-color:color-mix(in srgb,var(--t) 38%,transparent)}
.fiche-client .fc-panneau .di-action.edit:hover,.fiche-client .fc-panneau .di-action.dl:hover{color:var(--t);background:var(--t-bg);border-color:var(--t)}
/* « Télécharger » porte la classe .dl… comme la LISTE de documents (.dl, colonne) : l'icône
   passait au-dessus du mot. */
.fiche-client .fc-panneau .di-action.dl{flex-direction:row}
.fiche-client .fc-panneau .dz-import{margin:var(--s4) 0 0}
.fiche-client .fc-panneau .dz-import:hover,.fiche-client .fc-panneau .dz-import.drag{border-color:var(--t);background:var(--t-bg)}
.fc-compte{font-size:13px;color:var(--text2);margin:0 0 10px}
.fc-vide{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--s6) var(--s5);background:var(--bg2);
  border:1px dashed var(--border2);border-radius:var(--rl)}
.fc-vide-ic{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--t-bg);color:var(--t);margin-bottom:12px}
.fc-vide-ic svg{width:26px;height:26px}
.fc-vide-t{font:600 15px var(--font);color:var(--text);margin:0 0 4px}
.fc-vide-txt{font-size:13px;line-height:1.5;color:var(--text2);margin:0;max-width:56ch}

/* ── Cartes : chaque partie a son cadre et son titre ────────────────────────────────────────── */
.fiche-client .fc-carte{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:var(--s4) var(--s5) var(--s5);min-width:0}
.fiche-client .fc-carte-tete{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin:0 0 var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--border)}
.fiche-client .fc-carte-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 var(--s3);font:700 16px/1.3 var(--font);
  letter-spacing:-.1px;text-transform:none;color:var(--text)}
.fiche-client .fc-carte-tete .fc-carte-t{margin:0}
.fiche-client .fc-carte-sous{font-size:13px;font-weight:500;color:var(--text2)}
.fiche-client .fc-carte .fiche-dl{gap:18px 28px}
.fiche-client .fc-carte .fiche-dl > div{border:0;padding:0}
/* 02/10/2026 (brief v9, point 13) : « les catégories de la colonne de gauche sont un peu trop
   petites ». Même disposition ; le libellé passe de 12 px en --text3 à 13 px en --text2, un cran
   plus lisible sans rivaliser avec la valeur, qui garde le gras et prend 14 px. */
.fiche-client .fc-carte .fiche-dl dt{font-size:13px;line-height:1.35;font-weight:500;color:var(--text2);margin-bottom:4px}
.fiche-client .fc-carte .fiche-dl dd{font-size:14px;line-height:1.45}
.fiche-client .fc-carte .fiche-note{margin-top:var(--s4)}
.fc-manque{color:var(--amber);font-weight:600}
.fc-lien{color:var(--accent);text-decoration:none}
.fc-lien:hover{text-decoration:underline}
.fiche-client .fc-panneau .fc-completer{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent);background:var(--amber-bg)}
.fiche-client .fc-panneau .fc-completer:hover{color:var(--amber);border-color:var(--amber);background:var(--amber-bg)}
.fc-completer-n{font-family:var(--mono);font-weight:700;margin-left:2px}
.fiche-client .fiche-infos{gap:var(--s5)}
.fiche-client .fiche-infos-col{gap:var(--s5)}

/* Proposition : le générateur et les propositions enregistrées côte à côte sur grand écran. */
@media (min-width:1200px){
  .fiche-client .fc-panneau[data-teinte="proposition"].active{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s5);align-items:start}
  .fiche-client .fc-panneau[data-teinte="proposition"] > .ech-tete{grid-column:1 / -1;margin:0}
}
@media (max-width:1199px){.fiche-client .fc-prop-gen{margin-bottom:var(--s5)}}

/* Échanges (js/40) et mémoire du dossier (js/51) : la liste dans une carte, la mémoire aussi. */
.fiche-client .fc-panneau .mem-bloc{border-radius:var(--rl);padding:var(--s4) var(--s5);margin:0 0 var(--s4)}
.fiche-client .fc-panneau .ech-liste{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:0 var(--s5)}
.fiche-client .fc-panneau .ech-item:first-child{border-top:0}
.fiche-client .fc-panneau .ech-item:last-child{border-bottom:0}
.fiche-client .fc-panneau .ech-vide{background:var(--bg2);border-radius:var(--rl);padding:var(--s5);margin-bottom:var(--s4)}

/* Activité (js/08) : les filtres dans une carte ; Étapes (js/07) : la liste dans une carte. */
.fiche-client .fc-panneau .act-filtres{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:var(--s4) var(--s5);margin-bottom:var(--s5)}
.fiche-client .act-compte{margin:0;font-size:13px;color:var(--text2)}
.fc-etapes{display:flex;flex-direction:column;gap:10px}
.fc-etapes-pct{margin:0;font:800 30px/1 var(--mono);color:var(--t)}

/* ── Écrans étroits ─────────────────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .fc-tete-haut{padding:var(--s4)}
  .fiche-client .fiche-chiffres{margin:0 var(--s4)}
  .fc-creer{padding:var(--s4)}
  .fiche-client .fc-panneau .ech-tete{padding:var(--s3) var(--s4)}
  .fiche-client .fc-panneau .ech-tete .ech-h{font-size:18px}
  .fiche-client .fc-carte{padding:var(--s3) var(--s4) var(--s4)}
}
@media (max-width:560px){
  .fiche-client .fc-jauge{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"piste val" "marks ." "btn btn";row-gap:6px}
  .fiche-client .fc-jauge .pct-save-btn{justify-self:start}
  .fiche-client .fc-actions{width:100%}
  .fc-menu-liste{right:auto;left:0}
  .fc-creer-l{flex:0 0 100%}
  .fc-creer-boutons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .fiche-client .fc-doc{padding:9px 12px;white-space:normal;text-align:left;justify-content:flex-start}
  .fc-groupe{padding:12px 8px 0}
  .fc-groupe-t{margin:0 6px 2px}
  .fiche-client .fc-onglets button.fc-onglet{padding:10px 8px;font-size:13.5px}
  .fiche-client .fc-onglets button.fc-onglet::after{left:8px;right:8px}
  .fiche-client .fc-panneau .ech-boutons{width:100%}
  .fiche-client .profile-name{font-size:21px}
}