/* Interface client : grand texte, gros boutons, peu d'éléments */
html { font-size: 18px; }
body.cp-body { background: #f3f6fb; color: #1f2937; font-size: 1rem; line-height: 1.55; }
.cp-wrap { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 16px; }

.cp-header { background: #fff; border-bottom: 1px solid #e3e8ef; }
.cp-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.cp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.cp-brand-logo { height: 48px; width: auto; }
.cp-brand-name { font-size: 1.25rem; font-weight: 700; }
.cp-logout { min-height: 48px; display: inline-flex; align-items: center; gap: 8px; }

.cp-nav { background: #fff; border-bottom: 1px solid #e3e8ef; position: sticky; top: 0; z-index: 20; }
.cp-nav-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 8px; padding-bottom: 8px; }
.cp-nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px;
	padding: 8px 6px; border-radius: 14px; text-decoration: none; color: #374151; font-weight: 600; text-align: center; line-height: 1.2; }
.cp-nav-link i { font-size: 1.5rem; }
.cp-nav-link:hover { background: #eef3ff; color: #1d4ed8; }
.cp-nav-link.active { background: #1d4ed8; color: #fff; }

.cp-main { padding: 24px 0 64px; }
.cp-title { font-size: 1.9rem; font-weight: 800; margin-bottom: 20px; }
.cp-content { display: flex; flex-direction: column; gap: 20px; }

.cp-card { background: #fff; border-radius: 18px; box-shadow: 0 2px 10px rgba(15, 23, 42, .08); padding: 22px; }
.cp-card h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 14px; }
.cp-muted { color: #6b7280; }

.cp-balance { text-align: center; }
.cp-balance-value { font-size: 3rem; font-weight: 800; line-height: 1.1; }
.cp-balance.ok .cp-balance-value { color: #15803d; }
.cp-balance.low .cp-balance-value { color: #b45309; }
.cp-balance.negative .cp-balance-value { color: #b91c1c; }

.cp-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cp-action { display: flex; align-items: center; gap: 16px; min-height: 84px; padding: 16px 20px; border-radius: 16px; border: 0;
	text-decoration: none; font-size: 1.2rem; font-weight: 700; color: #fff; background: #1d4ed8; text-align: left; }
.cp-action i { font-size: 1.8rem; }
.cp-action:hover { color: #fff; filter: brightness(1.1); }
.cp-action.green { background: #15803d; }
.cp-action.grey { background: #475569; }

.cp-btn-big { min-height: 56px; font-size: 1.15rem; font-weight: 700; border-radius: 14px; padding: 12px 22px; }
.cp-choice { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 84px; padding: 16px 20px; border-radius: 16px;
	background: #fff; border: 3px solid #d7deea; font-size: 1.2rem; font-weight: 700; text-align: left; }
.cp-choice small { display: block; font-weight: 400; color: #6b7280; font-size: .95rem; }
.cp-choice i { font-size: 1.8rem; color: #1d4ed8; }
.cp-choice:hover { border-color: #1d4ed8; }
.cp-choice.selected { border-color: #1d4ed8; background: #eef3ff; }
.cp-choice:disabled { opacity: .45; cursor: not-allowed; }

.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.cp-slot { min-height: 64px; border-radius: 14px; border: 3px solid #d7deea; background: #fff; font-size: 1.25rem; font-weight: 700; }
.cp-slot:hover:not(:disabled) { border-color: #1d4ed8; }
.cp-slot.selected { border-color: #1d4ed8; background: #1d4ed8; color: #fff; }
.cp-slot:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

.cp-steps { display: flex; gap: 8px; margin-bottom: 4px; }
.cp-step { flex: 1; height: 8px; border-radius: 4px; background: #d7deea; }
.cp-step.done { background: #1d4ed8; }

.cp-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .95rem; font-weight: 700; }
.cp-badge.wait { background: #fef3c7; color: #92400e; }
.cp-badge.ok { background: #dcfce7; color: #166534; }
.cp-badge.no { background: #fee2e2; color: #991b1b; }
.cp-badge.cancel { background: #e5e7eb; color: #374151; }
.cp-badge.done { background: #dbeafe; color: #1e40af; }

.cp-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid #e5e7eb; }
.cp-item:last-child { border-bottom: 0; }
.cp-item-title { font-weight: 700; font-size: 1.1rem; }

.cp-scroll { max-height: 420px; overflow-y: auto; }
.form-control, .form-select { min-height: 52px; font-size: 1.05rem; border-radius: 12px; }
label.form-label { font-weight: 700; }

@media (max-width: 560px) {
	html { font-size: 17px; }
	.cp-brand-name { font-size: 1.05rem; }
	.cp-logout span { display: none; }
	.cp-nav-inner { grid-template-columns: repeat(2, 1fr); }
	.cp-title { font-size: 1.6rem; }
	.cp-balance-value { font-size: 2.5rem; }
}