/* Mon compte (5.22) — photo de profil, nom, identifiant, mot de passe, e-mail */

/* lien discret (connexion, mot de passe oublié) */
.lien-discret{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;
  text-decoration-color:rgba(var(--accent-rgb),.4);text-underline-offset:3px;cursor:pointer}
.lien-discret:hover{text-decoration-color:currentColor}
.lien-discret.oubli{display:block;width:max-content;margin:8px 0 0 auto;font-size:.82rem;text-decoration:none;color:var(--dim)}
.lien-discret.oubli:hover{color:var(--gold)}
.cp-icone{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:14px auto 4px;
  background:var(--ok-fond);color:var(--ok)}
.cp-icone svg.ic{width:26px;height:26px}

/* photo dans les pastilles rondes (barre latérale, équipe) */
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.moi-carte{cursor:pointer}
.moi-carte:hover .moi-ident b{color:var(--gold)}

/* ── témoin « ✓ Enregistré » ─────────────────────────────────────────────── */
.cp-statut{display:inline-flex;align-items:center;gap:5px;font-size:.88rem;font-weight:500;color:var(--ok);
  white-space:nowrap;min-height:1.2em}
.cp-statut svg.ic{width:15px;height:15px}
.cp-statut[data-genre="cours"]{color:var(--faint)}
.cp-statut[data-genre="err"]{color:var(--red)}
.cp-statut-mobile{display:none}
@media (max-width:900px){
  #sec-compte > .retour-bureau{display:none}
  body[data-section="compte"] .cp-statut-mobile{display:inline-flex;font-size:.8rem;margin-right:4px}
  #sec-compte .cp-entete .cp-statut{display:none}
}

/* ── mise en page ────────────────────────────────────────────────────────── */
#sec-compte{max-width:980px}
.cp-entete .es-actions{align-self:flex-end}
.cp-grille{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.cp-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.cp-col .card+.card{margin-top:0}
@media (max-width:900px){ .cp-grille{grid-template-columns:minmax(0,1fr);gap:14px} }

/* ── en-tête du profil : photo ronde, nom, niveau ───────────────────────── */
.cp-profil{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 4px}
.cp-photo{position:relative;width:112px;height:112px;margin-bottom:10px}
.cp-rond{width:112px;height:112px;border-radius:50%;padding:0;overflow:hidden;cursor:pointer;
  border:3px solid var(--surface);box-shadow:0 0 0 2px var(--gold),var(--lueur);
  background:radial-gradient(circle at 30% 25%,var(--surface-3),var(--fond-creux) 75%);
  display:grid;place-items:center}
.cp-rond img{width:100%;height:100%;object-fit:cover;display:block}
.cp-rond span{font-family:var(--serif);font-weight:600;font-size:2.6rem;color:var(--gold)}
.cp-appareil{position:absolute;right:-2px;bottom:4px;width:36px;height:36px;border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;background:var(--or);color:var(--sur-or);
  border:3px solid var(--fond);box-shadow:var(--ombre-douce)}
.cp-appareil svg.ic{width:17px;height:17px}
.cp-nom{font-size:1.2rem;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.cp-niveau{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:4px 12px;border-radius:99px;
  font-size:.78rem;font-weight:600;background:var(--surface-3);color:var(--dim)}
.cp-niveau.or{background:rgba(var(--accent-rgb),.16);color:var(--gold)}
.cp-niveau svg.ic{width:14px;height:14px}

/* ── cartes et champs ────────────────────────────────────────────────────── */
.cp-carte{border-radius:20px;padding:18px 18px 16px}
.cp-carte h3{display:flex;align-items:center;gap:8px;margin:0;font-size:1.05rem;font-weight:600;
  font-family:var(--font)}
.cp-carte h3 svg.ic{width:17px;height:17px;color:var(--gold)}
.cp-carte p{margin:4px 0 0;color:var(--dim)}
.cp-champ{margin-bottom:16px}
.cp-champ:last-child{margin-bottom:0}
.cp-champ label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 7px}
.cp-saisie{position:relative}
.cp-saisie input{border-radius:14px;padding:12px 14px;font-size:1rem;border-color:var(--trait-fort);
  background:var(--fond-creux)}
.cp-saisie input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)}
.cp-saisie em{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;
  font-size:.82rem;pointer-events:none;background:var(--fond-creux);padding-left:6px;white-space:nowrap}
.cp-saisie em:empty{display:none}
.cp-saisie input:has(+ em:not(:empty)){padding-right:118px}
.cp-champ small,.cp-carte .cp-note{display:block;margin-top:6px;font-size:.82rem;color:var(--faint);line-height:1.45}
.cp-champ small.attention{color:var(--warn)}
.cp-champ small.non,.cp-err{color:var(--red)!important}
:root[data-theme="clair"] .cp-champ small.attention{color:#a8670a}
em.ok{color:var(--ok)} em.non{color:var(--red)} em.moyen{color:var(--warn)} em.attente{color:var(--warn)}
:root[data-theme="clair"] em.ok,:root[data-theme="clair"] .cp-statut,:root[data-theme="clair"] .cp-app.ici em{color:#2f8a4a}
:root[data-theme="clair"] .cp-statut[data-genre="cours"]{color:var(--faint)}
:root[data-theme="clair"] .cp-statut[data-genre="err"]{color:var(--red)}
:root[data-theme="clair"] em.attente,:root[data-theme="clair"] em.moyen{color:#a8670a}

.cp-ligne-carte{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cp-ligne-carte>div{min-width:0}
.cp-btn{border-radius:99px;padding:10px 22px;background:rgba(var(--accent-rgb),.12);
  border:1px solid rgba(var(--accent-rgb),.4);color:var(--texte);font-weight:600;flex:none}
.cp-btn:hover{background:rgba(var(--accent-rgb),.2)}
.cp-btn.cp-rouge{color:var(--red);margin-top:12px}
.cp-btn.cp-rouge svg.ic{width:16px;height:16px}

/* appareils */
.cp-appareils{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.cp-app{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--trait-doux)}
.cp-app:last-child{border-bottom:0}
.cp-app>svg.ic{width:20px;height:20px;flex:none;color:var(--dim)}
.cp-app span{display:flex;flex-direction:column;min-width:0}
.cp-app b{font-weight:500}
.cp-app em{font-style:normal;font-size:.82rem;color:var(--faint);overflow-wrap:anywhere}
.cp-app.ici>svg.ic{color:var(--gold)}
.cp-app.ici em{color:var(--ok)}

/* ── fenêtre « changer le mot de passe » ─────────────────────────────────── */
.cp-feuille-mdp .feuille-boite,.cp-feuille-photo .feuille-boite{max-width:520px;width:100%}
.cp-form-mdp{margin-top:6px}
.cp-voir{margin:2px 0 12px;font-size:.86rem;color:var(--dim)}
.cp-phrase{margin:0 0 14px;color:var(--dim);line-height:1.5}

/* ── recadrage de la photo ───────────────────────────────────────────────── */
.cp-recadrage{display:flex;flex-direction:column;align-items:stretch}
.cp-scene{position:relative;width:min(300px,100%);aspect-ratio:1;margin:4px auto 0;overflow:hidden;
  border-radius:16px;background:#000;touch-action:none;cursor:grab;user-select:none}
.cp-scene:active{cursor:grabbing}
.cp-scene img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none;
  -webkit-user-drag:none}
.cp-masque{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 999px rgba(0,0,0,.55);outline:2px solid rgba(255,255,255,.85);outline-offset:-2px}
.cp-zoom{display:flex;align-items:center;gap:14px;margin:12px 0 16px}
.cp-zoom canvas{width:56px;height:56px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--gold);background:var(--surface-3)}
.cp-zoom-curseur{flex:1;display:flex;align-items:center;gap:8px;color:var(--dim)}
.cp-zoom-curseur svg.ic{width:18px;height:18px;flex:none}
.cp-zoom-curseur input[type=range]{flex:1;padding:0;border:0;background:none;accent-color:var(--gold);height:28px}