/* =========================================================
   PAGE COMPTE — FOND AVEC IMAGE SPA (FIABLE)
   ========================================================= */

/* IMPORTANT:
   On met le fond sur le BODY uniquement pour la page compte
   (via class account sur <main> ET on ajoute une class sur body)
*/

/* fond global sur la page */
body.account-bg{
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(217,185,170,.22), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(189,167,154,.18), transparent 55%),
    linear-gradient(rgba(251,247,242,0.65), rgba(251,247,242,0.75)),
    url("images/bgspa.jpg.jpg") center / cover no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

/* Mobile: évite les bugs iOS avec fixed */
@media (max-width: 768px){
  body.account-bg{
    background-attachment: scroll;
  }
}

/* =========================================================
   HERO + BARRE HAUTE (titre + onglets)
   ========================================================= */

.account .account-hero{
  max-width: 920px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
}

.account .account-top{
  padding: 18px 18px 14px;
  background: rgba(251,247,242,.60);
  border-bottom: 1px solid rgba(58,42,34,.10);
  backdrop-filter: blur(10px);
}

.account h1{
  text-align:center;
  margin: 0;
  font-size: clamp(24px, 3.4vw, 36px);
}

.account .account-sub{
  text-align:center;
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 13px;
}

/* =========================================================
   ONGLETS (PLUS PETITS + PLUS DISTINCTS)
   ========================================================= */

.account .tabs{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top: 14px;
}

/* Au lieu de flex:1 (qui les rend énormes), on met une largeur max */
.account .tabs button{
  width: min(220px, 42vw);
  border: 1px solid rgba(58,42,34,.22);
  background: rgba(251,247,242,.85);
  color: var(--ink-soft);
  padding: 10px 14px;
  border-radius: 999px;          /* style pill */
  font-weight: 900;
  cursor: pointer;
  transition: transform .06s ease, filter .12s ease, background .12s ease;
  box-shadow: 0 6px 16px rgba(58,42,34,.08);
}

.account .tabs button:hover{
  filter: brightness(0.98);
}

.account .tabs button:active{
  transform: translateY(1px);
}

.account .tabs button.active{
  background: var(--ink);
  color: var(--cream);
  border-color: rgba(58,42,34,.35);
  box-shadow: 0 10px 24px rgba(58,42,34,.12);
}

/* =========================================================
   CARTE CONTENU
   ========================================================= */

.account .account-card{
  max-width: 520px;
  margin: 14px auto 18px;
  background: rgba(255,255,255,.68);
  border: var(--border);
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(58,42,34,.10);
  backdrop-filter: blur(8px);
  padding: 18px;
}

/* =========================================================
   FORMULAIRES
   ========================================================= */

.account .lbl{
  display:block;
  margin-top:10px;
  font-weight: 800;
  color: var(--ink-soft);
  font-size: 14px;
}

.account input{
  width:100%;
  padding: 12px 12px;
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid rgba(58,42,34,.18);
  background: rgba(251,247,242,.90);
  outline: none;
}

.account input:focus{
  box-shadow: 0 0 0 3px rgba(217,185,170,.35);
}

/* =========================================================
   BOUTONS
   ========================================================= */

.account .btn-full{
  width:100%;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: none;
  font-weight: 900;
  background: var(--ink);
  color: var(--cream);
  cursor: pointer;
}

.account .btn-full:hover{
  filter: brightness(0.97);
}

.account .btn-full.outline{
  background: rgba(251,247,242,.85);
  color: var(--ink);
  border: 1px solid rgba(58,42,34,.35);
}

/* =========================================================
   DIVERS
   ========================================================= */

.account .msg{
  margin: 10px 0 0;
  font-weight: 800;
  font-size: 14px;
}

.account .hidden{ display:none; }

.account .hello{
  margin: 6px 0 10px;
}

/* =========================================================
   PROGRESSION
   ========================================================= */

.account .progress-wrap{
  margin: 10px 0 18px;
}

.account .progress{
  height: 10px;
  background: rgba(58,42,34,.12);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(58,42,34,.10);
}

.account .bar{
  height:100%;
  width:0%;
  background: var(--ink);
}

.account .progress-text{
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-weight: 800;
}

/* =========================================================
   TABLE + COUPONS
   ========================================================= */

.account .account-table{
  margin-top: 10px;
}

.account .coupon-list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--ink);
  font-weight: 800;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px){
  .account .account-top{ padding: 14px; }
  .account .account-card{ padding: 14px; }
  .account .tabs button{ width: 44vw; }
  .account .account-sub{ display:none; }
}