/* ═══════════════════════════════════════════════════════════════════════════
   CLIENT.CSS — ce qui n'appartient QU'À l'espace client (10/10/2026).
   La coque, les boutons, les tuiles, les cartes, les tableaux, les fenêtres :
   /portail.css (commun avec l'espace partenaire). L'éditeur de règles :
   /regles.css (commun avec le poste de pilotage). Couleurs : toujours par les
   variables de /portail.css, jamais en dur.
   ═════════════════════════════════════════════════════════════════════════ */
.marque-ligne{display:flex;align-items:center;gap:8px;min-width:0}
.marque-ligne img{height:22px;width:auto;max-width:110px;border-radius:5px;flex:none}
#vue:focus,#vue:focus-visible{outline:none}
.pied{margin-top:8px;font-size:12px;color:var(--encre-3);line-height:1.6;text-align:center;white-space:pre-line}

/* Bandeaux au-dessus de la page : démo, espace bloqué, serveur muet, mes comptes. */
#bandeaux{display:flex;flex-direction:column;gap:10px}
#bandeaux:empty{display:none}
.bandeau.info{background:var(--accent-doux);color:var(--encre);flex-wrap:wrap;justify-content:space-between}
.bandeau.ko{background:var(--baisse-fond);color:var(--encre)}
.bandeau.ko b{color:var(--baisse)}
.bandeau .actions{gap:8px}
.mes-comptes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--encre-3)}
.mes-comptes a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--r-s);
  border:1px solid var(--trait-fort);color:var(--encre-2);font-weight:500;text-decoration:none}
.mes-comptes a[aria-current="true"]{background:var(--accent-doux);border-color:var(--accent-plein);color:var(--encre)}
.point{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}

/* La carte d'état : la réponse à « ma copie tourne-t-elle ? ». */
.etat{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;padding:20px;border-radius:var(--r);
  border:1px solid var(--trait-fort);background:linear-gradient(0deg,var(--surface),color-mix(in srgb,var(--accent-plein) 14%,var(--surface)))}
.etat > div{flex:1 1 320px;min-width:0}
.etat .gros{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.etat p{margin:6px 0 0;color:var(--encre-2);max-width:60ch}
.etat p b{color:var(--encre);font-weight:600}
.etat ul{margin:8px 0 0;padding-left:20px;color:var(--encre-2);max-width:60ch}
.etat.att{background:var(--surface);border-color:var(--ambre)}
.etat.ko{background:var(--baisse-fond);border-color:var(--baisse)}
.etat.ko .gros > span:first-child{color:var(--baisse)}

/* Une ligne de compte, une ligne de liste (mise en route, journal, factures). */
.compte{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--trait)}
.compte:last-of-type{border-bottom:0}
.compte .qui{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:2px}
.compte .qui b{font-size:16px;font-weight:600;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.compte .qui span{color:var(--encre-2);font-size:13.5px;overflow-wrap:anywhere}
.compte .argent{display:flex;gap:20px;text-align:right}
.compte .argent div{display:flex;flex-direction:column}
.compte .argent small{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3)}
a.outil{text-decoration:none}
.ligne{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--trait)}
.ligne:last-child{border-bottom:0}
.ligne > .pastille{flex:none;min-width:92px;justify-content:center}
.ligne .quoi{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ligne .quoi b{font-weight:600}
.ligne .quoi span{color:var(--encre-2);font-size:13px;overflow-wrap:anywhere}
.geste{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--trait)}
.geste:last-child{border-bottom:0}
.geste > div{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:2px}
.geste small{color:var(--encre-2);font-size:13px}
.carte .vide{padding:28px 20px;text-align:center}
.carte .vide b{display:block;color:var(--encre);font-size:15px;margin-bottom:4px}
.carte .vide p{margin:0 auto;max-width:46ch;font-size:13.5px}
.corps > p{margin:0}
.corps p.texte{color:var(--encre-2);font-size:14px;max-width:70ch}
.corps p.texte b{color:var(--encre)}

/* Le petit « ? » : on tape, une explication simple s'ouvre. */
.aide-q{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--trait-fort);background:none;color:var(--encre-2);font-size:12px;font-weight:600;letter-spacing:0;
  text-transform:none;line-height:1;padding:0;margin-left:6px;vertical-align:middle;flex:none}
.aide-q:hover{color:var(--accent);border-color:var(--accent)}
.fenetre.courte{width:min(460px,calc(100vw - 24px))}
.fenetre .f-corps p{margin:0;color:var(--encre-2);font-size:14.5px;line-height:1.6}
.fenetre .f-corps p b{color:var(--encre)}
.toast.ko{background:var(--baisse-fond);border-color:var(--baisse)}

/* Tableaux des trades. */
.jauge{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.jauge > i{display:block;height:100%;background:var(--hausse);border-radius:99px}
.achat{color:var(--hausse)}.vente{color:var(--baisse)}
table.t td.large{white-space:normal;min-width:220px;color:var(--encre-2)}
details.plus-bas > summary{cursor:pointer;padding:12px 16px;color:var(--encre-2);font-size:13.5px;font-weight:600;border-top:1px solid var(--trait)}

/* Réglages. */
.raccourcis{display:flex;flex-wrap:wrap;gap:8px}
.objectif{display:flex;align-items:center;gap:12px}
.objectif > span:first-child{flex:none;min-width:104px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)}
.objectif > span:last-child{flex:none;width:28px;color:var(--encre-3);font-size:13px}
.objectif .c{flex:1;min-width:0}
.radios{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px}
.radios label{display:flex;gap:8px;align-items:center;cursor:pointer}
.fam{background:var(--papier)}

/* Guide. */
.guide img{display:block;width:100%;max-width:640px;border:1px solid var(--trait);border-radius:12px}
.guide h3{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;letter-spacing:-.01em}
.guide h3 i{font-style:normal;flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent-plein);color:#fff;
  display:grid;place-items:center;font-size:14px;font-family:var(--f-mono)}
.exemple{border-collapse:collapse;font-size:14px;max-width:520px;width:100%}
.exemple th,.exemple td{padding:7px 8px;text-align:left;border-bottom:1px solid var(--trait)}
.exemple th{color:var(--encre-3);font-size:12px;font-weight:600}
details.question{padding:14px 16px;border-bottom:1px solid var(--trait)}
details.question:last-child{border-bottom:0}
details.question > summary{cursor:pointer;font-weight:600;font-size:14.5px}
details.question p{margin:10px 0 0;color:var(--encre-2);font-size:14px;max-width:70ch}
.premier{max-width:560px;margin:8vh auto 0}

@media (max-width:860px){
  /* Sur téléphone, les outils d'un compte gardent leur nom : une icône seule ne dit rien. */
  .compte .barre .outil:not(.ico):not(.va){width:auto;padding:0 10px}
  .compte .barre .outil span{display:inline}
  .compte .argent{text-align:left}
  .etat{padding:16px}
  .etat .btn,.geste .btn{width:100%}
  .objectif > span:first-child{min-width:84px}
}