/* ═══════════════════════════════════════════════════════════════
   ManiaKar — site web — ESPACE VENDEUR (et pages communes) — refonte du 14/09
   Couvre : /compte/prime, /compte/documents, /compte/profil,
   /compte/notifications (servie aussi sous /preferences).
   Seulement ce qui manque à desktop.css et refonte.css, avec les jetons de
   tokens.css (aucune couleur en dur hors #fff). Préfixe « cpt- » : aucune
   règle commune n'est écrasée.
═══════════════════════════════════════════════════════════════ */

/* ── Carte de section ──────────────────────────────────────────── */
.cpt-carte { background: var(--mk-surface); border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-carte); padding: 18px 20px; margin-bottom: 18px; }
.cpt-carte > h2 { font-family: var(--mk-police); font-size: 17px; font-weight: 800; color: var(--mk-encre); margin: 0 0 6px; }
.cpt-intro { color: var(--mk-texte-secondaire); font-size: 14.5px; line-height: 1.55; margin: 0 0 14px; }
.cpt-texte { color: var(--mk-texte); font-size: 15px; line-height: 1.55; margin: 0 0 12px; }
.cpt-note { font-size: 13px; line-height: 1.5; color: var(--mk-texte-secondaire); margin: 10px 0 0; }
.cpt-chargement { color: var(--mk-texte-secondaire); font-size: 14.5px; margin: 0; }
.cpt-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.cpt-echeance { display: block; margin: 0 0 4px; font-size: 15px; line-height: 1.5; }
/* ── Encarts : information, temps qui passe, erreur ────────────── */
.cpt-encart { background: var(--mk-surface-basse); border: 1px solid var(--mk-surface-moyenne); border-radius: var(--mk-rayon-md); padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--mk-texte); margin: 0 0 14px; }
.cpt-encart p { margin: 0 0 6px; }
.cpt-encart p:last-child { margin-bottom: 0; }
.cpt-encart ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.cpt-encart-ambre { background: var(--mk-ambre-fond); border-color: var(--mk-ambre-bordure); color: var(--mk-ambre-texte); }
.cpt-encart-erreur { background: var(--mk-erreur-fond); border-color: var(--mk-erreur-fond); color: var(--mk-erreur); }

/* ── Ma prime : le montant d'abord, l'état ensuite ─────────────── */
.cpt-prime { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 24px; align-items: start; }
.cpt-prime-montant { border-right: 1px solid var(--mk-bordure); padding-right: 20px; }
.cpt-prime-sous { font-size: 13.5px; line-height: 1.45; color: var(--mk-texte-secondaire); margin-top: 4px; }
.cpt-etat-titre { font-family: var(--mk-police); font-size: 19px; font-weight: 800; color: var(--mk-encre); margin: 0 0 6px; }
.cpt-etapes { list-style: none; counter-reset: cpt-etape; margin: 0; padding: 0; display: grid; gap: 14px; }
.cpt-etapes li { counter-increment: cpt-etape; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.cpt-etapes li::before { content: counter(cpt-etape); width: 30px; height: 30px; border-radius: 50%; background: var(--mk-surface-moyenne); color: var(--mk-vert-marque); font-weight: 800; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.cpt-etape-titre { font-weight: 700; color: var(--mk-encre); }
.cpt-etape-detail { font-size: 14px; line-height: 1.5; color: var(--mk-texte-secondaire); }
@media (max-width: 700px) {
  .cpt-prime { grid-template-columns: 1fr; gap: 14px; }
  .cpt-prime-montant { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--mk-bordure); padding-bottom: 12px; }
}

/* ── Lignes : primes, factures ─────────────────────────────────── */
.cpt-lignes { display: grid; }
.cpt-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--mk-bordure); }
.cpt-ligne:first-child { border-top: 0; padding-top: 2px; }
.cpt-ligne-texte { flex: 1 1 240px; min-width: 0; }
.cpt-ligne-titre { font-weight: 700; color: var(--mk-encre); font-size: 15px; overflow-wrap: anywhere; }
.cpt-ligne-detail { font-size: 13.5px; color: var(--mk-texte-secondaire); margin-top: 2px; }
.cpt-ligne-montant { font-weight: 700; color: var(--mk-encre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cpt-ligne-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Documents : pièces à télécharger ──────────────────────────── */
.cpt-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cpt-doc { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-md); padding: 14px; background: var(--mk-surface); }
.cpt-doc-titre { font-weight: 700; color: var(--mk-encre); }
.cpt-doc-detail { flex: 1; font-size: 13.5px; line-height: 1.5; color: var(--mk-texte-secondaire); }
.cpt-doc .btn { align-self: flex-start; margin-top: 6px; }
.cpt-choix { max-width: 440px; }
@media (max-width: 1000px) { .cpt-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cpt-docs { grid-template-columns: 1fr; } }

/* ── Documents : une vente et sa check-list par étape ──────────── */
.cpt-vente-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 8px; }
.cpt-vente-titre { font-family: var(--mk-police); font-size: 17px; font-weight: 800; color: var(--mk-encre); margin: 0; overflow-wrap: anywhere; }
.cpt-phases { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.cpt-phase { border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-md); background: var(--mk-surface); }
.cpt-phase.courante { border-left: 4px solid var(--mk-vert-cta); }
.cpt-phase summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-weight: 700; color: var(--mk-encre); list-style: none; }
.cpt-phase summary::-webkit-details-marker { display: none; }
.cpt-phase summary::after { content: ''; flex: none; width: 8px; height: 8px; margin: 0 4px 3px; border-right: 2px solid var(--mk-texte-secondaire); border-bottom: 2px solid var(--mk-texte-secondaire); transform: rotate(45deg); }
.cpt-phase[open] summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
.cpt-phase-nom { flex: 1; min-width: 0; }
.cpt-check { list-style: none; margin: 0; padding: 0 14px 14px; display: grid; gap: 10px; }
.cpt-check li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--mk-texte); }
.cpt-check li::before { content: ''; width: 12px; height: 12px; margin-top: 5px; border: 2px solid var(--mk-contour-clair); border-radius: 3px; }
.cpt-check-detail { display: block; font-size: 13px; color: var(--mk-texte-secondaire); }

/* ── Profil et sécurité ────────────────────────────────────────── */
.cpt-form { max-width: 660px; }
.cpt-grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.cpt-lecture { font-size: 14.5px; line-height: 1.55; color: var(--mk-texte); margin: 0 0 6px; overflow-wrap: anywhere; }
.cpt-statut { font-weight: 700; color: var(--mk-encre); margin: 0 0 8px; }
.cpt-statut.ok { color: var(--mk-succes-texte); }
.cpt-carte.cpt-danger { border-color: var(--mk-erreur); }
.cpt-carte.cpt-danger > h2 { color: var(--mk-erreur); }
.cpt-cache-identifiant { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
@media (max-width: 600px) { .cpt-grille-2 { grid-template-columns: 1fr; } }

/* ── Notifications : une case par type d'e-mail ────────────────── */
.cpt-groupe { margin: 0; padding: 0; border: 0; min-width: 0; }
.cpt-groupe + .cpt-groupe { margin-top: 8px; }
.cpt-groupe legend { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-texte-secondaire); padding: 10px 0 4px; }
.cpt-pref { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--mk-bordure); cursor: pointer; }
.cpt-pref-texte { flex: 1; min-width: 0; }
.cpt-pref-titre { display: block; font-weight: 700; color: var(--mk-encre); font-size: 15px; }
.cpt-pref-detail { display: block; font-size: 13.5px; color: var(--mk-texte-secondaire); margin-top: 2px; }
.cpt-pref-etat { display: block; font-size: 12.5px; font-weight: 600; color: var(--mk-succes-texte); margin-top: 4px; }
.cpt-pref-etat:empty { display: none; }
.cpt-pref input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--mk-vert-marque); cursor: pointer; }
.cpt-pref input[type="checkbox"]:disabled { cursor: progress; }