.compte-page { padding: 72px 0 96px; min-height: 62vh; }
.compte-conteneur { max-width: 560px; }
.compte-entete { text-align: center; margin-bottom: 32px; }
.compte-entete h1, .compte-carte h1 { font-size: 2rem; font-weight: 800;
  letter-spacing: -0.03em; }
.compte-sous-titre { color: var(--muted); margin-top: 12px; line-height: 1.6; }

.compte-carte { background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 40px 32px; text-align: center; }

.compte-btn-google { display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; background: var(--bg-raised); color: var(--text); font-family: inherit;
  font-size: 0.95rem; font-weight: 600; padding: 13px 20px; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; transition: border var(--transition), background var(--transition); }
.compte-btn-google:hover { border-color: var(--gold); background: #1a1a1a; }
.compte-btn-google svg { flex-shrink: 0; }

.compte-diviseur { display: flex; align-items: center; gap: 14px; margin: 24px 0;
  color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.compte-diviseur::before, .compte-diviseur::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.compte-form { display: flex; flex-direction: column; gap: 14px; margin-top: 0; text-align: left; }
.compte-form input { width: 100%; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 8px; padding: 13px 16px; color: var(--text); font: inherit;
  font-size: 0.95rem; outline: none; transition: border var(--transition); }
.compte-form input:focus { border-color: var(--gold); }
.compte-form button { width: 100%; margin-top: 6px; background: var(--gold); color: #0a0a0a; font-family: inherit;
  font-size: 0.95rem; font-weight: 700; padding: 13px 22px; border: none;
  border-radius: 8px; cursor: pointer;
  transition: background var(--transition), transform var(--transition); }
.compte-form button:hover { background: #f0d060; transform: translateY(-1px); }
.compte-form.loading button { opacity: 0.6; pointer-events: none; }

.compte-message { display: none; margin-top: 18px; font-size: 0.9rem;
  border-radius: 8px; padding: 12px 16px; }
.compte-form.success ~ .compte-message-succes { display: block;
  color: var(--gold); background: rgba(232,197,71,0.1);
  border: 1px solid rgba(232,197,71,0.35); }
.compte-form.error ~ .compte-message-erreur { display: block;
  color: #e07070; background: rgba(224,112,112,0.08);
  border: 1px solid rgba(224,112,112,0.3); }
.compte-form.success { display: none; }

.compte-btn { display: inline-block; margin-top: 24px; background: var(--gold);
  color: #0a0a0a; font-weight: 700; padding: 13px 28px; border-radius: 8px;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition); }
.compte-btn:hover { background: #f0d060; transform: translateY(-1px); }

.compte-alt { margin-top: 22px; font-size: 0.85rem; color: var(--muted);
  text-align: center; }
.compte-alt a { color: var(--gold); text-decoration: none; }
.compte-alt a:hover { text-decoration: underline; }

.compte-message-info { margin-top: 20px; color: var(--gold); font-weight: 600; }

.premium-carte { text-align: left; }
.premium-nom { color: var(--gold); font-weight: 800; font-size: 0.85rem;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; }
.premium-liste { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.premium-liste li { padding-left: 26px; position: relative; line-height: 1.55;
  color: var(--text); font-size: 0.95rem; }
.premium-liste li::before { content: "✓"; position: absolute; left: 0;
  color: var(--gold); font-weight: 700; }