/* ————————————————————————————————————————————————
   Espace membre — même identité que le site, en plus dense

   Rien de nouveau côté couleurs ou typographie : on réutilise les
   variables de terre-ciel.css. Seules les structures propres au
   tableau de bord sont définies ici.
   ———————————————————————————————————————————————— */

.member-page { padding-top: clamp(110px, 16vh, 170px); }
.member-page .inner { max-width: 940px; margin: 0 auto; }
.member-narrow .inner { max-width: 520px; }

.member-page h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 10px; }
.member-h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 500;
  margin: 54px 0 20px; padding-top: 24px;
  border-top: 1px solid rgba(67, 62, 53, .12);
}
.member-intro { color: var(--encre-soft); max-width: 54ch; margin-bottom: 28px; }
.member-note  { color: var(--encre-soft); font-size: .92rem; margin-top: 16px; max-width: 62ch; }
.member-cta   { margin-top: 20px; }
.member-alt   { margin-top: 22px; font-size: .94rem; color: var(--encre-soft); }
.member-alt a { color: var(--terre-deep); }
.member-help  { font-size: .86rem; }
.member-out   { opacity: .75; }

/* ————— Messages ————— */
.flash {
  padding: 14px 18px; border-radius: 10px; font-size: .95rem;
  margin-bottom: 24px; line-height: 1.6;
}
.flash-ok    { background: rgba(95,107,85,.12);  border: 1px solid rgba(95,107,85,.3);  color: var(--sauge-deep); }
.flash-warn  { background: rgba(198,161,90,.16); border: 1px solid rgba(198,161,90,.4); color: #7E6220; }
.flash-error { background: rgba(162,72,47,.08);  border: 1px solid rgba(162,72,47,.28); color: #8C3D26; }

/* ————— Pause de réservation : le ton compte plus que le style ————— */
.member-pause {
  background: var(--creme-warm); border-radius: 16px;
  padding: 26px clamp(22px, 3vw, 34px); margin-bottom: 30px;
}
.member-pause h2 { font-size: 1.3rem; font-weight: 500; margin-bottom: 12px; }
.member-pause p { color: var(--encre-soft); font-size: .95rem; max-width: 64ch; }
.member-pause p + p { margin-top: 12px; }

/* ————— Vue d'ensemble ————— */
.stat-grid {
  display: grid; gap: 16px; margin: 30px 0 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stat {
  background: rgba(255,255,255,.6); border: 1px solid rgba(185,110,76,.14);
  border-radius: 16px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.stat-icon  { font-size: 1.7rem; line-height: 1; }
.stat-label { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sauge-deep); }
.stat-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.1; }
.stat-big   { font-size: 2.4rem; color: var(--terre-deep); }
.stat-note  { font-size: .82rem; color: var(--encre-soft); line-height: 1.5; }

.stat-hearts { font-family: var(--font-body); font-size: 1.5rem; letter-spacing: .12em; }
.heart-on  { color: var(--terre); }
.heart-off { color: rgba(67,62,53,.2); }

.stat-trust.stat-warn  { border-color: rgba(198,161,90,.45); }
.stat-trust.stat-pause { border-color: rgba(162,72,47,.35); background: rgba(162,72,47,.05); }

.level-bar {
  height: 6px; border-radius: 999px; background: rgba(67,62,53,.1);
  overflow: hidden; margin: 8px 0 4px;
}
.level-bar span { display: block; height: 100%; background: var(--terre); border-radius: 999px; }

/* ————— Prochains cours ————— */
.booking-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.booking-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px 20px; align-items: center;
  background: rgba(255,255,255,.6); border: 1px solid rgba(185,110,76,.14);
  border-radius: 14px; padding: 18px 22px;
}
.booking-item.is-waiting { background: rgba(255,255,255,.4); }
.booking-item.is-offered { border-color: var(--terre-deep); background: var(--creme-warm); }
.bi-when strong { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
.bi-when span   { font-size: .9rem; color: var(--encre-soft); }
.bi-state { display: flex; flex-direction: column; gap: 4px; }
.bi-note  { font-size: .8rem; color: var(--encre-soft); }
.bi-actions { display: flex; align-items: center; gap: 14px; }

.member-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .86rem; color: var(--terre-deep);
  text-decoration: underline; text-underline-offset: 3px;
}
.member-link:hover { color: var(--terre-darker); }

.btn-small { padding: .7em 1.4em; font-size: .7rem; }

.member-empty {
  background: rgba(255,255,255,.5); border: 1px dashed rgba(185,110,76,.3);
  border-radius: 14px; padding: 30px; text-align: center;
}
.member-empty p { color: var(--encre-soft); margin-bottom: 18px; }
.member-empty-text { color: var(--encre-soft); font-style: italic; }

/* ————— Récompenses ————— */
.reward-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.reward {
  background: rgba(255,255,255,.5); border: 1px solid rgba(185,110,76,.12);
  border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px;
  opacity: .72;
}
.reward.is-open { opacity: 1; border-color: rgba(185,110,76,.35); background: var(--creme-warm); }
.rw-cost {
  align-self: flex-start; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--terre-deep); border: 1px solid rgba(185,110,76,.4);
  border-radius: 999px; padding: .35em .9em;
}
.reward h3 { font-size: 1.15rem; font-weight: 500; }
.reward p  { font-size: .86rem; color: var(--encre-soft); flex: 1; }
.rw-state  { font-size: .8rem; color: var(--encre-soft); font-style: italic; }

.reward-pending { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.reward-pending li {
  background: var(--creme-warm); border-radius: 10px; padding: 12px 16px;
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
}
.reward-pending span { font-size: .86rem; color: var(--encre-soft); }

/* ————— Historique ————— */
.history-list { list-style: none; display: flex; flex-direction: column; }
.history-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid rgba(67,62,53,.08); font-size: .94rem;
}
.hi-date { color: var(--encre-soft); }

/* ————— Parrainage ————— */
.referral-code {
  font-family: var(--font-display); font-size: 2rem; letter-spacing: .3em;
  color: var(--terre-deep); background: var(--creme-warm);
  border-radius: 12px; padding: 16px 24px; display: inline-block; margin-top: 8px;
}

/* ————— Formulaires ————— */
.member-form { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.mf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.mf-field { display: flex; flex-direction: column; margin-bottom: 16px; }
.mf-field label {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-soft); margin-bottom: 7px;
}
.mf-opt { text-transform: none; letter-spacing: 0; opacity: .75; }
.mf-field input, .member-form textarea {
  font-family: var(--font-body); font-size: 1rem; font-weight: 300; color: var(--encre);
  background: rgba(255,255,255,.7); border: 1px solid rgba(67,62,53,.18);
  border-radius: 10px; padding: .8em 1em;
}
.mf-field input:focus, .member-form textarea:focus { outline: none; border-color: var(--terre-deep); background: #fff; }
.mf-field.has-error input { border-color: #A2482F; background: rgba(162,72,47,.05); }
.mf-hint { font-size: .8rem; color: var(--encre-soft); margin-top: 6px; }
.mf-err  { font-size: .84rem; color: #8C3D26; margin-top: 6px; }
.mf-consent {
  display: flex; gap: .7em; align-items: flex-start;
  font-size: .88rem; color: var(--encre-soft); line-height: 1.55; margin: 8px 0;
}
.mf-consent input { margin-top: .25em; accent-color: var(--terre-deep); flex: none; }
.mf-consent a { color: var(--terre-deep); }
.mf-submit { width: 100%; margin-top: 18px; }

/* ————— Calendrier : accès au compte ————— */
.bk-gate {
  margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(67,62,53,.12);
}
.bk-gate p { color: var(--encre-soft); font-size: .95rem; margin-bottom: 18px; }
.bk-gate-soft { background: var(--creme-warm); border-radius: 14px; padding: 22px 24px; border-top: 0; }
.bk-free, .bk-waiting-note { font-size: .9rem; color: var(--encre-soft); margin-bottom: 18px; }
.bk-waiting-note { background: rgba(198,161,90,.14); border-radius: 10px; padding: 12px 16px; }

@media (max-width: 620px) {
  .mf-row { grid-template-columns: 1fr; }
  .booking-item { grid-template-columns: 1fr; gap: 10px; }
  .bi-actions { justify-content: space-between; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 18px; }
  .stat-big { font-size: 2rem; }
  .referral-code { font-size: 1.5rem; letter-spacing: .2em; }
}