/* ============================================================================
 * MENU DE COMPTE — feuille de la brique. Voir briques/compte.js.
 *
 * Écrite sur les JETONS DE LA CHARTE, avec une valeur de repli pour chacun :
 * une app qui n'a pas encore adopté les jetons s'affiche quand même juste, et
 * celle qui les a adoptés suit automatiquement son thème. C'est ce qui permet
 * de livrer la même feuille à Strata (--c-accent absent, repli #50a2ff) et à
 * une app passée à la charte (thème Commend, --c-accent = #006ED2).
 *
 * Les noms de classes viennent de Cursus : c'est la copie la plus ancienne.
 * ========================================================================== */

/* (!) Meme raison que dans connexion.css : la brique ne peut pas SUPPOSER que
   l'app pose box-sizing globalement, sinon ses largeurs sont fausses chez celles
   qui ne le font pas. */
.umenu, .umenu *, .ucompte-fond, .ucompte-fond * { box-sizing: border-box; }

/* --- 1001 · pastille et menu ---------------------------------------------- */
.umenu { position: relative; flex: none; }
.me {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-accent, #50a2ff); color: var(--c-blanc, #fff);
  font-size: 10.5px; font-weight: 700; font-family: ui-monospace, Consolas, monospace;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer;
}
.me:hover { background: var(--c-accent-fort, #2b7de0); }
.udrop {
  position: absolute; right: 0; top: 32px; z-index: 70; width: 226px;
  background: var(--c-blanc, #fff); border: 1px solid var(--c-g200, #dbe1e8);
  border-radius: var(--r-surface, 10px); box-shadow: var(--ombre-flottante, 0 8px 26px rgba(16, 40, 80, .18));
  overflow: hidden; text-align: left;
}
.uhead {
  display: flex; align-items: center; gap: 9px; padding: 11px 12px;
  border-bottom: 1px solid var(--c-g200, #dbe1e8);
}
.me.sm { width: 30px; height: 30px; font-size: 11.5px; flex: 0 0 30px; cursor: default; }
.me.sm:hover { background: var(--c-accent, #50a2ff); }
.uid { min-width: 0; }
.uid b {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--c-g900, #1f2733);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uitem {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; font: inherit; font-size: 12.5px; color: var(--c-g900, #1f2733);
  background: none; border: 0; text-align: left; cursor: pointer;
}
.uitem:hover { background: var(--c-accent-fond, #eaf3ff); color: var(--c-accent-texte, #1d4ed8); }
.ufoot {
  padding: 7px 12px; border-top: 1px solid var(--c-g200, #dbe1e8);
  background: var(--c-g50, #f7f9fb); font-size: 10.5px; color: var(--c-g400, #a8b0ba);
  text-align: right;
}

/* --- 1002 · modale « Mon compte » ------------------------------------------ */
/* position:fixed et non absolute : la modale ne doit pas hériter du défilement
   ni du recadrage du volet qui porte la pastille. */
.ucompte-fond {
  position: fixed; inset: 0; z-index: 200; background: rgba(17, 24, 39, .38);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ucompte {
  width: 400px; max-width: 100%; max-height: 90vh; overflow: auto;
  background: var(--c-blanc, #fff); border-radius: var(--r-modale, 12px);
  box-shadow: var(--ombre-flottante, 0 8px 26px rgba(16, 40, 80, .18));
  font: 13px/1.4 "Segoe UI", system-ui, sans-serif; color: var(--c-g900, #1f2733);
}
.uc-tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--c-g200, #dbe1e8);
  font-size: 14px; font-weight: 600;
}
.uc-x {
  border: 0; background: none; color: var(--c-g500, #66707d); cursor: pointer;
  padding: 2px; display: flex;
}
.uc-x:hover { color: var(--c-g900, #1f2733); }
.uc-sec { padding: 13px 16px; border-bottom: 1px solid var(--c-g200, #dbe1e8); }
.uc-sec:last-child { border-bottom: 0; }
.uc-titre {
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-g500, #66707d); margin: 0 0 8px;
}
.uc-ligne { display: flex; align-items: center; gap: 6px; }
.uc-ligne + .uc-ligne { margin-top: 8px; }
.uc-ligne.entre { justify-content: space-between; }
.uc-champ {
  flex: 1; min-width: 0; height: var(--h-btn-md, 30px); padding: 0 9px;
  border: 1px solid var(--c-g200, #dbe1e8); border-radius: var(--r-btn, 8px);
  font: inherit; font-size: 12.5px; color: inherit; background: var(--c-blanc, #fff);
  outline: none;
}
.uc-champ:focus {
  border-color: var(--c-accent, #50a2ff);
  box-shadow: var(--halo-focus, 0 0 0 3px rgba(80, 162, 255, .18));
}
.uc-btn {
  flex: none; height: var(--h-btn-md, 30px); padding: 0 11px;
  border: 1px solid var(--c-g200, #dbe1e8); border-radius: var(--r-btn, 8px);
  background: var(--c-blanc, #fff); color: var(--c-g500, #66707d);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.uc-btn:hover { border-color: var(--c-accent, #50a2ff); color: var(--c-accent-fort, #2b7de0); }
.uc-btn.prim {
  border-color: var(--c-accent, #50a2ff); background: var(--c-accent, #50a2ff);
  color: var(--c-blanc, #fff);
}
.uc-btn.prim:hover {
  background: var(--c-accent-fort, #2b7de0); border-color: var(--c-accent-fort, #2b7de0);
  color: var(--c-blanc, #fff);
}
.uc-note { font-size: 11px; color: var(--c-g500, #66707d); margin: 5px 0 0; line-height: 1.4; }
.uc-sous { display: block; font-size: 11px; color: var(--c-g500, #66707d); }
.uc-four { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.uc-four svg { flex: none; }
.uc-actif { font-size: 11px; color: var(--c-succes-fort, #16a34a); }
/* Le message de retour vit en PIED de modale, pas en tête : on lit le résultat
   là où l'on vient d'agir, sans remonter des yeux. */
.uc-msg {
  padding: 9px 16px; border-top: 1px solid var(--c-g200, #dbe1e8);
  font-size: 12px; color: var(--c-g700, #4b5563); background: var(--c-g50, #f7f9fb);
}
.uc-msg.err {
  background: var(--c-erreur-fond, #fef2f2); color: var(--c-erreur, #de3a3a);
  border-top-color: var(--c-erreur-bord, #f87171);
}