:root{
  --paper:#f1eae1;
  --paper-2:#f8f5f1;
  --ink:#25272a;
  --muted:#77736e;
  --line:#e4ddd4;
  --accent:#d3c1aa;
  --accent-deep:#8a7762;
  --white:#fff;
}

*{box-sizing:border-box}

html{background:var(--paper)}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.95),transparent 42%),
    var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.shell{
  width:min(100%,620px);
  margin:auto;
  padding:env(safe-area-inset-top) 18px calc(38px + env(safe-area-inset-bottom));
}

.brand{
  text-align:center;
  padding:22px 0 22px;
}

.logo{
  width:min(64%,290px);
  height:auto;
  display:block;
  margin:0 auto 8px;
}

.member-label,
.eyebrow{
  letter-spacing:.15em;
  font-size:11px;
  font-weight:750;
  color:var(--accent-deep);
}

.brand h1{
  font-size:22px;
  font-weight:600;
  margin:7px 0 0;
}

.panel,
.membership-card,
.presence{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(220,207,190,.72);
  box-shadow:0 10px 28px rgba(63,52,42,.07);
}

.panel{
  border-radius:20px;
  padding:20px;
}

.loading{
  text-align:center;
  color:var(--muted);
}

.membership-card{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  padding:24px;
}

.membership-card::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-80px;
  top:-80px;
  border:28px solid rgba(220,207,190,.24);
  border-radius:50%;
  pointer-events:none;
}

.card-top{
  display:flex;
  gap:20px;
  align-items:flex-start;
  justify-content:space-between;
}

.membership-card h2{
  margin:7px 0 0;
  max-width:260px;
  font-size:24px;
  line-height:1.15;
}

.balance-block{
  min-width:112px;
  text-align:right;
}

.balance-block span{
  display:block;
  font-size:54px;
  line-height:.95;
  font-weight:760;
  letter-spacing:-.04em;
}

.balance-block small{
  display:block;
  max-width:105px;
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
}

.card-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:16px;
}

.card-meta div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.card-meta span{
  color:var(--muted);
  font-size:11px;
}

.card-meta strong{
  font-size:14px;
  font-weight:650;
}

.history{
  margin-top:28px;
}

.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  padding:0 4px 10px;
}

.section-heading h3{
  margin:4px 0 0;
  font-size:22px;
}

.count-badge{
  display:inline-grid;
  place-items:center;
  min-width:30px;
  height:30px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(220,207,190,.62);
  color:#594c3f;
  font-weight:700;
  font-size:13px;
}

.presence{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  border-radius:18px;
  padding:14px 15px;
  margin-bottom:10px;
}

.presence-date{
  width:70px;
  height:53px;
  border-radius:14px;
  background:var(--paper-2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--accent-deep);
  text-transform:uppercase;
  font-weight:700;
  line-height:1;
}

.presence-date .weekday{
  font-size:8px;
  letter-spacing:.04em;
  margin-bottom:1px;
}

.presence-date .day{
  font-size:20px;
  line-height:.95;
  color:var(--ink);
}

.presence-date .month{
  font-size:9px;
  margin-top:1px;
}

.presence-date .year{
  font-size:7.5px;
  opacity:.72;
  margin-top:1px;
}

.presence-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.presence-main strong{
  font-size:15.5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.presence-main span{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.status{
  justify-self:end;
  font-size:10.5px;
  font-weight:700;
  white-space:nowrap;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#faf9f7;
  color:#68635d;
}

.status.present{background:#eef5ef;border-color:#cfdfd1;color:#4d7251}
.status.absent{background:#f8eeee;border-color:#e6cece;color:#8a5555}
.status.excused{background:#f5f3ef;border-color:#e1dbd3;color:#756b60}
.status.reserved{background:#f4f1e7;border-color:#ded5bc;color:#75663b}
.status.waiting{background:#f1f1f3;border-color:#d9d9df;color:#65656e}

.muted{color:var(--muted)}

.empty-card{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:var(--muted);
}
.empty-card strong{color:var(--ink);font-size:18px}

.error{
  color:#7d4545;
  border-color:#e2c6c6;
  background:#fff8f8;
}

footer{
  text-align:center;
  margin-top:34px;
  color:#8d867f;
  font-size:11px;
}

@media (max-width:440px){
  .shell{padding-left:14px;padding-right:14px}
  .brand{padding-top:16px}
  .logo{width:min(72%,270px)}
  .membership-card{padding:20px}
  .membership-card h2{font-size:21px}
  .balance-block span{font-size:48px}
  .presence{
    grid-template-columns:70px minmax(0,1fr);
  }
  .status{
    grid-column:2;
    justify-self:start;
    margin-top:-2px;
  }
}


/* V4 — Programme semaine + historique au clic */
.membership-card[role="button"]{
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease;
}
.membership-card[role="button"]:active{
  transform:scale(.995);
}
.card-action{
  margin:14px -4px -6px;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--accent-deep);
  font-size:11.5px;
  font-weight:700;
  text-align:center;
  letter-spacing:.01em;
}
.card-action span{
  font-size:16px;
  vertical-align:-1px;
  margin-left:3px;
}
.week-program{
  margin-top:28px;
}
.week-range{
  margin-top:5px;
  color:var(--muted);
  font-size:11.5px;
}
.schedule-item{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(220,207,190,.72);
  box-shadow:0 10px 28px rgba(63,52,42,.07);
  border-radius:18px;
  padding:14px 15px;
  margin-bottom:10px;
}
.schedule-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.schedule-main strong{
  font-size:15.5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.schedule-main span{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.schedule-item.cancelled{
  opacity:.62;
}
.status.cancelled{
  background:#f6eeee;
  border-color:#e5cccc;
  color:#875555;
}
.history[hidden]{
  display:none !important;
}
@media (max-width:440px){
  .schedule-item{
    grid-template-columns:70px minmax(0,1fr);
  }
  .schedule-item > .status{
    grid-column:2;
    justify-self:start;
  }
}


/* V5 — Programme regroupé par jour */
.schedule-day{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:14px;
  align-items:stretch;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(220,207,190,.72);
  box-shadow:0 10px 28px rgba(63,52,42,.07);
  border-radius:18px;
  padding:14px 15px;
  margin-bottom:10px;
}

.schedule-day-date{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
}

.schedule-weekday{
  color:var(--accent-deep);
  font-size:10.5px;
  font-weight:700;
  text-transform:capitalize;
}

.schedule-day-courses{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.day-course{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:8px 0;
}

.day-course + .day-course{
  border-top:1px solid var(--line);
}

.day-course-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.day-course-main strong{
  font-size:15.5px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.day-course-main span{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

#program-view[hidden],
#history-view[hidden]{
  display:none !important;
}

@media (max-width:440px){
  .schedule-day{
    grid-template-columns:78px minmax(0,1fr);
    gap:11px;
  }
  .day-course{
    grid-template-columns:minmax(0,1fr);
  }
  .day-course > .status{
    justify-self:start;
  }
}


/* V6 — jour de semaine dans la boîte + anciennes cartes */
.program-date-box{
  width:78px;
  min-height:72px;
  border-radius:14px;
  background:#f8f2eb;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--accent-deep);
  text-transform:uppercase;
  font-weight:700;
  line-height:1;
  padding:7px 4px;
}
.program-date-box .program-weekday{
  font-size:12px;
  font-weight:800;
  letter-spacing:.025em;
  margin-bottom:4px;
}
.program-date-box .day{
  font-size:25px;
  line-height:.92;
  color:var(--ink);
}
.program-date-box .month{
  font-size:10px;
  margin-top:4px;
  letter-spacing:.03em;
}
.schedule-day-date{
  justify-content:center;
}
.old-cards-section{
  margin-top:18px;
}
.old-cards-toggle{
  width:100%;
  border:0;
  background:transparent;
  color:var(--accent-deep);
  font:inherit;
  font-size:12px;
  font-weight:750;
  padding:10px;
  cursor:pointer;
}
.old-cards-toggle span{
  font-size:17px;
  vertical-align:-1px;
}
.old-cards-list{
  margin-top:7px;
}
.old-cards-list[hidden]{display:none!important}
.old-card{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 18px;
  gap:12px;
  align-items:center;
  text-align:left;
  border:1px solid rgba(220,207,190,.72);
  background:rgba(255,255,255,.86);
  border-radius:16px;
  padding:13px 14px;
  margin-bottom:8px;
  color:var(--ink);
  cursor:pointer;
}
.old-card > div:first-child{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.old-card > div:first-child strong{
  font-size:14px;
}
.old-card > div:first-child span{
  font-size:10.5px;
  color:var(--muted);
}
.old-card-balance{
  text-align:right;
  display:flex;
  flex-direction:column;
}
.old-card-balance strong{
  font-size:18px;
}
.old-card-balance span{
  font-size:9px;
  color:var(--muted);
}
.old-card-arrow{
  color:var(--accent-deep);
  font-size:20px;
}


/* V7 — Sélecteur de carte au-dessus du grand pavé */
.card-selector-wrap{
  margin:0 0 12px;
  padding:0 4px;
}

.card-selector-wrap[hidden]{
  display:none!important;
}

.card-selector-label{
  display:block;
  margin:5px 0 6px;
  color:var(--muted);
  font-size:11px;
}

.card-selector{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(220,207,190,.9);
  border-radius:14px;
  background:
    linear-gradient(45deg,transparent 50%,var(--accent-deep) 50%) calc(100% - 17px) 50%/5px 5px no-repeat,
    linear-gradient(135deg,var(--accent-deep) 50%,transparent 50%) calc(100% - 12px) 50%/5px 5px no-repeat,
    rgba(255,255,255,.88);
  color:var(--ink);
  padding:12px 40px 12px 13px;
  font:inherit;
  font-size:13px;
  font-weight:650;
  box-shadow:0 6px 18px rgba(63,52,42,.05);
}

.membership-card.archived-card{
  background:rgba(250,247,243,.96);
}

.membership-card.archived-card::before{
  content:"ARCHIVÉE";
  position:absolute;
  right:18px;
  bottom:18px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  color:rgba(140,117,95,.42);
  pointer-events:none;
}


/* V8 — Places restantes + barre de remplissage */
.capacity-info{
  margin-top:7px;
}

.capacity-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.capacity-line strong{
  font-size:11.5px;
  font-weight:700;
  color:var(--accent-deep);
  white-space:normal;
}

.capacity-line span{
  flex:none;
  font-size:10.5px;
  font-weight:650;
  color:var(--muted);
}

.capacity-progress{
  width:100%;
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:#eee4d9;
  box-shadow:inset 0 1px 2px rgba(73,59,45,.08);
}

.capacity-progress-fill{
  height:100%;
  border-radius:inherit;
  background:#b9a188;
  transition:width .25s ease;
}

@media (max-width:440px){
  .capacity-info{
    margin-top:6px;
  }
  .capacity-line strong{
    font-size:11px;
  }
}


/* V10 — créneau passé : grisé 30 min après l'heure de début */
.day-course.course-past{
  opacity:.42;
  filter:grayscale(.9);
}
.day-course.course-past .capacity-progress-fill{
  background:#aaa39b;
}
.day-course.course-past .status{
  opacity:.75;
}


/* V11 — Réservation / annulation */
.my-bookings{
  margin-top:9px;
  font-size:11.5px;
  font-weight:750;
  color:#5f564d;
}

.booking-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:9px;
}

.booking-btn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:10px;
  padding:9px 13px;
  font:inherit;
  font-size:11.5px;
  font-weight:750;
  cursor:pointer;
  transition:opacity .15s ease, transform .12s ease;
}

.booking-btn:active:not(:disabled){
  transform:scale(.98);
}

.booking-reserve{
  background:#5d8d65;
  color:#fff;
}

.booking-cancel{
  background:#a85f5f;
  color:#fff;
}

.booking-btn:disabled{
  opacity:.33;
  cursor:not-allowed;
}

.booking-note{
  margin-top:6px;
  color:var(--muted);
  font-size:10px;
  line-height:1.3;
}

.course-past .booking-actions,
.course-past .booking-note,
.course-past .my-bookings{
  pointer-events:none;
}

@media (max-width:440px){
  .booking-actions{
    gap:7px;
  }

  .booking-btn{
    padding:9px 11px;
    font-size:11px;
  }
}


/* V12 — Sablier pendant réservation / annulation */
.update-loader[hidden]{
  display:none!important;
}

.update-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(247,241,234,.68);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.update-loader-card{
  min-width:160px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:19px 22px 17px;
  border:1px solid rgba(220,207,190,.82);
  border-radius:20px;
  background:rgba(255,255,255,.96);
  box-shadow:0 16px 45px rgba(63,52,42,.16);
  color:var(--ink);
}

.update-loader-card strong{
  font-size:12px;
  font-weight:700;
  color:var(--accent-deep);
}

.hourglass{
  font-size:32px;
  line-height:1;
  transform-origin:50% 50%;
  animation:hourglass-turn 1.15s ease-in-out infinite;
}

@keyframes hourglass-turn{
  0%{transform:rotate(0deg) scale(1)}
  45%{transform:rotate(180deg) scale(1.06)}
  55%{transform:rotate(180deg) scale(1.06)}
  100%{transform:rotate(360deg) scale(1)}
}

body.is-updating{
  overflow:hidden;
}


/* V13 — Liste des participants réservés */
.participants-toggle{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:8px 0 2px;
  margin-top:4px;
  color:var(--accent-deep);
  font:inherit;
  font-size:10.5px;
  font-weight:750;
  cursor:pointer;
  text-align:left;
}

.participants-toggle span{
  font-size:13px;
  vertical-align:-1px;
}

.participants-panel{
  margin-top:6px;
  padding:8px 10px;
  border-radius:12px;
  background:#faf6f1;
  border:1px solid var(--line);
}

.participants-panel[hidden]{
  display:none!important;
}

.participants-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.participant-row{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10.8px;
  color:#5e5852;
}

.participant-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#8fa891;
  flex:none;
}

.participant-row.anonymous{
  color:#82786f;
  font-style:italic;
}

.participant-row.anonymous .participant-dot{
  background:#b9aa9c;
}

.participants-loading,
.participants-empty,
.participants-error{
  font-size:10.5px;
  color:var(--muted);
}

.participants-error{
  color:#8b5959;
}


/* V15 — participants compacts en pastilles */
.participants-panel{
  padding:8px 9px;
}

.participants-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.participant-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:31px;
  height:25px;
  padding:0 8px;
  border-radius:999px;
  background:#efe7dd;
  border:1px solid #ddcfc0;
  color:#756554;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* Ancienne présentation verticale neutralisée */
.participants-list,
.participant-row,
.participant-dot{
  display:none!important;
}

/* V16 — noms complets dans les pastilles participants */
.participant-chip{
  min-width:0;
  height:27px;
  padding:0 10px;
  font-size:10px;
  letter-spacing:0;
}

/* V21 — liste d'attente */
.booking-waitlist{
  background:#b89a79;
  color:#fff;
}
.booking-leave-waitlist{
  background:#fff;
  color:#9a7658;
  border:1px solid #cdb79f;
}


/* V22 — réservation à régulariser */
.booking-note-regularize{
  color:#9a7658;
  font-weight:700;
}

/* V23 — tableau de situation dans la carte */
.membership-card{
  overflow:hidden;
}

.card-warning{
  margin:-20px -20px 18px;
  padding:11px 18px;
  background:#b65252;
  color:#fff;
  text-align:center;
  font-size:10.5px;
  line-height:1.35;
  font-weight:850;
  letter-spacing:.035em;
}

.card-warning[hidden],
.card-status-summary[hidden],
.card-summary-row[hidden],
.card-summary-reservations[hidden]{
  display:none!important;
}

.card-status-summary{
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid var(--line);
}

.card-summary-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:baseline;
}

.card-summary-row > span,
.card-summary-reservations-head > span{
  color:var(--muted);
  font-size:10.5px;
}

.card-summary-row > strong{
  min-width:0;
  text-align:right;
  font-size:11.5px;
  line-height:1.35;
  color:var(--ink);
}

.card-summary-reservations{
  margin-top:12px;
}

.card-summary-reservations-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}

.card-summary-reservations-head strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:25px;
  height:25px;
  padding:0 7px;
  border-radius:999px;
  background:#efe7dd;
  color:#756554;
  font-size:10.5px;
}

.current-reservations-list{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.current-reservation-item{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  gap:7px;
  align-items:center;
  padding:7px 9px;
  border-radius:10px;
  background:#faf6f1;
  color:#6f675f;
  font-size:10px;
}

.current-reservation-item strong{
  color:var(--ink);
  font-size:10.5px;
}

.current-reservation-item span:nth-child(3){
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.current-reservation-item em{
  color:#9a7658;
  font-size:9px;
  font-style:normal;
  font-weight:750;
}

@media (max-width:440px){
  .card-warning{
    margin:-20px -20px 16px;
    font-size:9.5px;
  }

  .current-reservation-item{
    grid-template-columns:auto auto minmax(0,1fr);
  }

  .current-reservation-item em{
    grid-column:3;
  }
}

.card-summary-error{
  color:#8b5959;
  font-size:10.5px;
  text-align:center;
  padding:3px 0;
}

/* V30 — état explicite pendant le chargement du résumé */
.current-reservations-loading{
  padding:7px 9px;
  border-radius:10px;
  background:#faf6f1;
  color:var(--muted);
  font-size:10px;
  font-style:italic;
}

.current-reservation-item.current-reservation-simple{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.current-reservation-course{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
  font-size:10.5px;
  font-weight:700;
}
.current-reservation-simple .status{flex:none;}


/* V33 — repérage visuel des créneaux du membre */
.day-course.course-member-reserved{
  background:#edf6ef;
  border-radius:14px;
  padding:12px 13px;
  margin:-2px 0;
}

.day-course.course-member-waiting{
  background:#fbf1e4;
  border-radius:14px;
  padding:12px 13px;
  margin:-2px 0;
}

/* Les cours passés restent neutres/grisés, même s'ils avaient été réservés. */
.day-course.course-past{
  background:transparent;
}


/* V36 — les 3 dates sur une seule ligne */
.card-meta.card-meta-three{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
  align-items:start;
}

.card-meta.card-meta-three > div{
  min-width:0;
}

.card-meta.card-meta-three > div:nth-child(2){
  text-align:center;
}

.card-meta.card-meta-three > div:nth-child(3){
  text-align:right;
}

.card-meta.card-meta-three span{
  display:block;
}

.card-meta.card-meta-three strong{
  display:block;
  margin-top:3px;
  white-space:nowrap;
}

/* Dernière présence n'est plus séparée par une ligne supplémentaire */
.card-status-summary{
  margin-top:14px;
}

@media (max-width:520px){
  .card-meta.card-meta-three{
    gap:10px;
  }

  .card-meta.card-meta-three span{
    font-size:9px;
  }

  .card-meta.card-meta-three strong{
    font-size:11px;
  }
}