/* ──────────────────────────────────────────────────────────
   COMPTE — login / signup / dashboard
   ────────────────────────────────────────────────────────── */
.page-compte{
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(91,223,234,.16), transparent 55%),
    radial-gradient(100% 70% at 20% 90%, rgba(230,57,70,.10), transparent 55%),
    var(--paper);
  min-height:calc(100vh - 200px);
}

.compte-wrap{
  max-width:520px;margin:48px auto 0;padding:0 28px 96px;
}
.compte-card{
  background:#fff;border-radius:22px;border:1px solid var(--rule);
  box-shadow:0 24px 60px rgba(13,20,24,.06);
  padding:44px 44px 36px;
}
@media (max-width:560px){.compte-card{padding:32px 26px 28px;border-radius:18px}}

.compte-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:700 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:14px;
}
.compte-eyebrow::before{content:"";width:18px;height:1.5px;background:var(--accent)}
.compte-title{
  font-family:var(--display);font-size:clamp(28px,3.4vw,40px);
  line-height:1;letter-spacing:-.01em;margin:0 0 8px;
}
.compte-title em{font-style:italic;font-family:var(--serif);font-weight:600;color:var(--accent-deep)}
.compte-sub{font-size:14px;line-height:1.55;color:rgba(13,20,24,.65);margin:0 0 28px}

/* Segmented control */
.compte-tabs{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:999px;padding:4px;margin-bottom:28px;
}
.compte-tab{
  padding:10px 14px;text-align:center;
  font:600 13px/1 var(--sans);letter-spacing:.01em;
  color:rgba(13,20,24,.6);cursor:pointer;
  border-radius:999px;
  background:transparent;border:none;
  transition:background .15s ease, color .15s ease;
}
.compte-tab.active{background:#fff;color:var(--ink);box-shadow:0 1px 0 rgba(13,20,24,.06)}

/* Form */
.compte-form{display:flex;flex-direction:column;gap:14px}
.compte-field{display:flex;flex-direction:column;gap:6px}
.compte-field label{
  font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(13,20,24,.6);
}
.compte-field input{
  font:500 15px/1.2 var(--sans);
  padding:14px 16px;border-radius:12px;
  border:1px solid var(--rule);background:#fff;color:var(--ink);
  outline:none;transition:border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none;appearance:none;
}
.compte-field input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(91,223,234,.18);
}
.compte-field .hint{font-size:11.5px;color:rgba(13,20,24,.5);margin-top:2px}

.compte-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.compte-row{grid-template-columns:1fr}}

.compte-check{
  display:flex;gap:10px;align-items:flex-start;
  font-size:13px;line-height:1.5;color:rgba(13,20,24,.7);
  cursor:pointer;
}
.compte-check input{
  margin-top:3px;flex-shrink:0;
  width:16px;height:16px;cursor:pointer;
  accent-color:var(--ink);
}
.compte-check a{color:var(--accent-deep);border-bottom:1px solid currentColor}

.compte-error{
  background:rgba(230,57,70,.08);
  color:#A02430;
  padding:12px 14px;border-radius:10px;
  font-size:13px;line-height:1.45;
  border:1px solid rgba(230,57,70,.18);
}

.compte-submit{
  margin-top:6px;
  background:var(--ink);color:#fff;
  border:none;border-radius:12px;
  padding:15px 18px;
  font:600 14px/1 var(--sans);letter-spacing:.01em;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:background .15s ease, transform .1s ease;
}
.compte-submit:hover{background:#000}
.compte-submit:active{transform:scale(.98)}
.compte-submit:disabled{opacity:.55;cursor:not-allowed}

.compte-foot{
  text-align:center;margin-top:18px;
  font-size:13px;color:rgba(13,20,24,.6);
}
.compte-foot a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--rule);cursor:pointer}

/* Divider */
.compte-divider{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  margin:22px 0 18px;color:rgba(13,20,24,.4);
  font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
}
.compte-divider::before, .compte-divider::after{
  content:"";height:1px;background:var(--rule);
}

/* Social buttons (placeholder, not wired) */
.compte-social{display:flex;flex-direction:column;gap:10px}
.compte-social .btn-social{
  font:500 14px/1 var(--sans);
  background:#fff;border:1px solid var(--rule);border-radius:12px;
  padding:13px 16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  color:var(--ink);
  transition:background .15s ease;
}
.compte-social .btn-social:hover{background:var(--paper-2)}

/* ── Dashboard (logged-in) ─────────────────────────────── */
.dash-wrap{
  max-width:780px;margin:48px auto 0;padding:0 28px 96px;
}
.dash-head{
  display:flex;align-items:center;gap:24px;margin-bottom:32px;flex-wrap:wrap;
}
.dash-avatar{
  width:64px;height:64px;border-radius:50%;
  background:var(--ink);color:var(--accent);
  display:grid;place-items:center;
  font-family:var(--display);font-size:24px;letter-spacing:.02em;
  flex-shrink:0;
}
.dash-greet{
  font-family:var(--display);font-size:clamp(28px,3.4vw,40px);
  line-height:1;letter-spacing:-.01em;margin:0 0 6px;
}
.dash-greet em{font-style:italic;font-family:var(--serif);font-weight:600;color:var(--accent-deep)}
.dash-sub{font-size:14px;color:rgba(13,20,24,.62);margin:0}

.dash-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px;
}
@media (max-width:600px){.dash-grid{grid-template-columns:1fr}}
.dash-card{
  background:#fff;border:1px solid var(--rule);border-radius:16px;
  padding:24px 22px;display:flex;flex-direction:column;gap:8px;
}
.dash-card h3{font-family:var(--display);font-size:16px;margin:0;letter-spacing:.01em}
.dash-card p{font-size:13.5px;line-height:1.55;color:rgba(13,20,24,.65);margin:0}
.dash-card .val{
  font-family:var(--display);font-size:22px;color:var(--ink);
  margin-top:6px;
}

.dash-actions{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.dash-actions a, .dash-actions button{
  font:600 13px/1 var(--sans);
  background:#fff;border:1px solid var(--rule);
  padding:12px 18px;border-radius:999px;
  color:var(--ink);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .15s ease, border-color .15s ease;
}
.dash-actions a:hover, .dash-actions button:hover{background:var(--paper-2);border-color:rgba(13,20,24,.18)}
.dash-actions .logout{color:#A02430;border-color:rgba(160,36,48,.22)}
.dash-actions .logout:hover{background:rgba(230,57,70,.06)}

/* ──────────────────────────────────────────────────────────
   MOBILE — 768px (compte)
   ────────────────────────────────────────────────────────── */
@media (max-width:768px){
  .compte-wrap{margin-top:28px;padding:0 16px 64px}
  .compte-card{padding:28px 22px 24px;border-radius:16px}
  .compte-title{font-size:clamp(24px,7vw,34px)}
  .compte-sub{font-size:13.5px;margin-bottom:22px}
  .compte-tabs{margin-bottom:22px}
  .compte-tab{padding:9px 12px;font-size:12.5px}
  .compte-field input{font-size:16px;padding:12px 14px} /* 16px to prevent iOS zoom */
  .compte-field label{font-size:10px;letter-spacing:.14em}
  .compte-row{grid-template-columns:1fr}
  .compte-submit{padding:14px 16px;font-size:13.5px}
  .compte-divider{margin:18px 0 14px;font-size:10px;letter-spacing:.14em}

  .dash-wrap{margin-top:28px;padding:0 16px 64px}
  .dash-head{gap:16px;margin-bottom:24px}
  .dash-avatar{width:54px;height:54px;font-size:20px}
  .dash-greet{font-size:clamp(24px,7vw,32px)}
  .dash-sub{font-size:13px}
  .dash-grid{grid-template-columns:1fr;gap:12px}
  .dash-card{padding:20px 18px}
  .dash-card h3{font-size:15px}
  .dash-card p{font-size:13px}
  .dash-card .val{font-size:19px}
  .dash-actions{gap:8px;margin-top:18px}
  .dash-actions a,.dash-actions button{padding:11px 16px;font-size:12.5px}
}