/* ============================================================
   Club de yoga — identité visuelle
   Palette : brume / encre pin / jade / sable
   ============================================================ */
:root{
  --brume:#EDEEE8;        /* fond général, vert-gris pâle */
  --surface:#FBFAF6;      /* cartes */
  --encre:#2C332E;        /* texte principal, pin profond */
  --jade:#4E6E5D;         /* accent principal */
  --jade-clair:#6E8B7B;
  --sable:#B98A5E;        /* accent chaud, utilisé avec parcimonie */
  --muted:#8A9A8F;        /* texte secondaire */
  --ligne:#DDE0D8;
  --ok:#4E6E5D;
  --alerte:#A65A4E;
  --rayon:16px;
  --ombre:0 10px 30px rgba(44,51,46,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--brume);color:var(--encre);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces','Georgia',serif;font-weight:600;line-height:1.15;margin:.2em 0 .5em}
h1{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.01em}
h2{font-size:clamp(1.4rem,3vw,1.9rem)}
a{color:var(--jade);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ---------- Barre de navigation ---------- */
.nav{
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  padding:1rem clamp(1rem,4vw,2.4rem);background:var(--surface);
  border-bottom:1px solid var(--ligne);position:sticky;top:0;z-index:20;
}
.nav .marque{font-family:'Fraunces',serif;font-size:1.35rem;font-weight:600;color:var(--encre)}
.nav .marque span{color:var(--jade)}
.nav .liens{display:flex;gap:1.1rem;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav .liens a{color:var(--encre);font-size:.95rem;padding:.35rem 0;position:relative}
.nav .liens a:hover{text-decoration:none;color:var(--jade)}
.nav .liens a.actif::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--jade)}
.nav .badge{background:var(--jade);color:#fff;border-radius:999px;font-size:.72rem;padding:.1rem .5rem;margin-left:.25rem}

/* ---------- Conteneur ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:clamp(1.4rem,4vw,2.6rem) clamp(1rem,4vw,2rem)}
.entete{margin-bottom:1.6rem}
.entete p{color:var(--muted);margin:.2rem 0 0}

/* ---------- Cartes ---------- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem}
.carte{
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:1.3rem;box-shadow:var(--ombre);transition:transform .18s ease,box-shadow .18s ease;
}
.carte:hover{transform:translateY(-3px)}
.carte h3{margin-top:0}
.carte .meta{color:var(--muted);font-size:.9rem}

.stat{display:flex;flex-direction:column;gap:.2rem}
.stat .valeur{font-family:'Fraunces',serif;font-size:2rem;color:var(--jade)}
.stat .label{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}

/* ---------- Pastilles type de cours ---------- */
.pastille{display:inline-block;padding:.18rem .7rem;border-radius:999px;font-size:.78rem;font-weight:600}
.pastille.hatha{background:#E7EDE6;color:var(--jade)}
.pastille.yin{background:#F1E7DC;color:var(--sable)}
.pastille.complet{background:#F3E2E0;color:var(--alerte)}
.pastille.libre{background:#E7EDE6;color:var(--jade)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;border:none;cursor:pointer;font:inherit;font-weight:600;
  background:var(--jade);color:#fff;padding:.7rem 1.3rem;border-radius:999px;
  transition:background .15s ease,transform .1s ease;
}
.btn:hover{background:#415b4d;text-decoration:none;transform:translateY(-1px)}
.btn.sable{background:var(--sable)}.btn.sable:hover{background:#a5764c}
.btn.ghost{background:transparent;color:var(--jade);border:1.5px solid var(--jade)}
.btn.ghost:hover{background:var(--jade);color:#fff}
.btn.rouge{background:var(--alerte)}.btn.rouge:hover{background:#8f4b41}
/* Boutons d'inscription du planning membre : vert pâle si place, orange pâle si complet */
.btn.dispo{background:#E7EDE6;color:var(--jade)}
.btn.dispo:hover{background:#d7e4da;color:var(--jade)}
.btn.attente{background:#F4E7D8;color:var(--sable)}
.btn.attente:hover{background:#ecdbc6;color:var(--sable)}
.btn.petit{padding:.4rem .8rem;font-size:.85rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- Formulaires ---------- */
form.bloc{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:1.6rem;box-shadow:var(--ombre)}
label{display:block;font-size:.9rem;color:var(--muted);margin:.9rem 0 .3rem}
input,select,textarea{
  width:100%;padding:.7rem .85rem;border:1px solid var(--ligne);border-radius:10px;
  font:inherit;background:#fff;color:var(--encre)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--jade-clair);border-color:var(--jade)}
.ligne{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.ligne{grid-template-columns:1fr}}

/* ---------- Tableaux ---------- */
.tableau{width:100%;border-collapse:collapse;background:var(--surface);
  border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre)}
.tableau th,.tableau td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--ligne)}
.tableau th{background:#EDEEE8;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tableau tr:last-child td{border-bottom:none}
.tableau tr:hover td{background:#F4F5F0}
@media(max-width:640px){.tableau{display:block;overflow-x:auto;white-space:nowrap}}

/* ---------- Messages ---------- */
.flash{padding:.9rem 1.1rem;border-radius:12px;margin-bottom:1.2rem;font-weight:500}
.flash.ok{background:#E7EDE6;color:var(--jade);border:1px solid #cfe0d2}
.flash.ko{background:#F5E4E1;color:var(--alerte);border:1px solid #efcfc9}

/* ---------- Page de connexion ---------- */
.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:820px){.login-page{grid-template-columns:1fr}}
.login-visuel{
  background:linear-gradient(160deg,#3a4c41,#2c332e);color:#fff;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:3rem;text-align:center;position:relative;overflow:hidden
}
@media(max-width:820px){.login-visuel{min-height:38vh}}
.login-visuel h1{color:#fff;font-size:clamp(2rem,5vw,3rem)}
.login-visuel p{color:#c7d3c9;max-width:340px}
/* Signature : le point qui respire */
.souffle{width:120px;height:120px;border-radius:50%;margin-bottom:2rem;
  background:radial-gradient(circle,#6E8B7B,#4e6e5d);
  animation:respire 8s ease-in-out infinite;box-shadow:0 0 60px rgba(110,139,123,.5)}
@keyframes respire{0%,100%{transform:scale(.7);opacity:.75}50%{transform:scale(1.15);opacity:1}}
@media(prefers-reduced-motion:reduce){.souffle{animation:none}}
.login-form{display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,6vw,4rem)}
.login-form .bloc{max-width:380px;width:100%;margin:auto}

/* ---------- Divers ---------- */
.entre{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.mini{color:var(--muted);font-size:.85rem}
.barre{height:8px;background:var(--ligne);border-radius:999px;overflow:hidden;margin-top:.4rem}
.barre>span{display:block;height:100%;background:var(--jade)}
.vide{text-align:center;color:var(--muted);padding:2.5rem 1rem}
footer.pied{text-align:center;color:var(--muted);font-size:.85rem;padding:2.5rem 1rem}

/* ---------- Sélecteur de mois ---------- */
.mois-select select{
  font-family:'Fraunces',serif;font-size:1rem;font-weight:600;color:var(--encre);
  background:var(--surface);border:1px solid var(--ligne);border-radius:999px;
  padding:.5rem 1.1rem;cursor:pointer;width:auto;min-width:170px
}

.cal-tete{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.cal-tete h1{margin:0}
.mois-nav{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.mois-fleche{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:999px;background:var(--surface);border:1px solid var(--ligne);color:var(--encre);
  font-size:1.25rem;line-height:1;text-decoration:none}
.mois-fleche:hover{background:var(--jade);color:#fff;text-decoration:none}
.mois-fleche.off{opacity:.35;pointer-events:none}

/* ---------- Grille calendrier ---------- */
.cal-wrap{overflow-x:auto}
.cal{width:100%;border-collapse:separate;border-spacing:7px;table-layout:fixed;min-width:560px}
.cal th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:600;text-align:center;padding:.2rem 0 .4rem}
.cal td{vertical-align:top;padding:0}
.cal-vide{background:transparent}

.jour{
  background:var(--surface);border:1px solid var(--ligne);border-radius:11px;
  padding:.45rem .5rem;box-shadow:var(--ombre);cursor:pointer;position:relative;
  min-height:92px;display:flex;flex-direction:column;gap:.3rem;
  transition:transform .14s ease,box-shadow .14s ease
}
.jour:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(44,51,46,.12)}
.jour:focus-visible{outline:2px solid var(--jade)}
.jour-date{font-size:.68rem;font-weight:600;color:var(--muted)}
.jour-haut{display:flex;justify-content:space-between;align-items:center;gap:.2rem}
.jour-occ{font-family:'Fraunces',serif;font-size:1.15rem;color:var(--jade)}
.jour-pied{display:flex;justify-content:space-between;align-items:center;gap:.3rem;margin-top:auto}
/* Badge d'occupation "n/places" : vert si places libres, rouge si complet */
.occ{font-size:.72rem;font-weight:700;padding:.14rem .55rem;border-radius:999px;color:#fff}
.occ.libre{background:#E7EDE6;color:var(--jade)}
.occ.plein{background:#C0564A}
.occ.clic{cursor:pointer}
.occ.clic:hover{filter:brightness(1.08)}
.jour .pastille{font-size:.66rem;padding:.1rem .45rem}
.jour .btn.petit{padding:.28rem .55rem;font-size:.72rem;width:100%;text-align:center}
.jour .tag{display:inline-block;font-size:.7rem;font-weight:600;padding:.2rem .5rem;border-radius:999px}
.jour .tag.ok{background:#5B8060;color:#fff}
.jour .tag.att{background:#F1E7DC;color:var(--sable)}
.cal-suppr{color:var(--muted);font-size:1.05rem;line-height:1;text-decoration:none;padding:0 .1rem}
.cal-suppr:hover{color:var(--alerte);text-decoration:none}

/* Barre d'icônes d'action d'une carte-jour (planning admin) */
.cal-actions{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:auto}
.cal-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:8px;background:#E7EDE6;color:var(--jade);border:none;cursor:pointer;padding:0;text-decoration:none}
.cal-ic:hover{background:var(--jade);color:#fff;text-decoration:none}
.cal-ic svg{width:16px;height:16px}

/* ---------- Popup des inscrits ---------- */
.pop-overlay{position:fixed;inset:0;background:rgba(44,51,46,.45);z-index:60;
  display:none;align-items:center;justify-content:center;padding:1rem}
.pop-overlay.on{display:flex}
.pop-box{background:var(--surface);border-radius:18px;padding:1.6rem 1.7rem;max-width:360px;width:100%;
  box-shadow:0 24px 60px rgba(0,0,0,.28);max-height:80vh;overflow:auto;position:relative}
.pop-box h3{margin:.1rem 0}
.pop-close{position:absolute;top:.7rem;right:1rem;font-size:1.5rem;color:var(--muted);cursor:pointer;line-height:1}
.pop-close:hover{color:var(--encre)}
.pop-liste{margin:.7rem 0 0;padding-left:1.3rem}
.pop-liste li{padding:.18rem 0}

/* ---------- Icône-lien des cartes stat (page admin) ---------- */
.stat .carte-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;
  background:#E7EDE6;color:var(--jade);margin-bottom:.5rem;
  transition:background .15s ease,color .15s ease
}
.stat .carte-ic:hover{background:var(--jade);color:#fff;text-decoration:none}
.stat .carte-ic svg{width:22px;height:22px}

/* ---------- Popup de confirmation d'annulation (dashboard) ---------- */
.pop-box-annul{max-width:340px;text-align:center;padding:2rem 1.7rem}
.pop-lotus{
  width:74px;height:74px;border-radius:50%;margin:0 auto 1.1rem;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,#6E8B7B,#4e6e5d);
  box-shadow:0 0 34px rgba(110,139,123,.45)
}
.pop-lotus svg{width:40px;height:40px;color:#fff}
.pop-box-annul h3{margin:.2rem 0 .4rem}
.pop-actions{display:flex;gap:.6rem;justify-content:center;margin-top:1.4rem}
/* Apparition : voile en fondu, boîte qui monte en douceur */
@keyframes pop-fade{from{opacity:0}to{opacity:1}}
@keyframes pop-monte{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.pop-annul.on{animation:pop-fade .2s ease}
.pop-annul.on .pop-box{animation:pop-monte .3s cubic-bezier(.2,.8,.3,1.15)}
@media(prefers-reduced-motion:reduce){
  .pop-annul.on,.pop-annul.on .pop-box{animation:none}
}

/* ---------- Vue planning annuelle ---------- */
.ann-tete{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.ann-tete h1{margin:0}
.ann-nav{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.plan-annuel{border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:780px;width:100%}
.plan-annuel th{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);
  font-weight:600;padding:.35rem .2rem;text-align:center}
.plan-annuel th.col-num:first-child{position:sticky;left:0;z-index:4;background:var(--brume)}
.plan-annuel td{padding:0;text-align:center}
.plan-annuel td.col-num:first-child{position:sticky;left:0;z-index:3;background:var(--brume)}
.plan-annuel .j{margin:1.5px;height:24px;border-radius:7px;font-size:.72rem;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--ligne)}
/* Case d'un jour inexistant : aucune marge, transparente → pas d'espace vide */
.plan-annuel .j.hors{margin:0;background:transparent;border:none}
.plan-annuel .j.we{background:#E4E5E0}
.plan-annuel .j.seance{background:#DCEBDF;color:var(--jade);font-weight:700;cursor:default;position:relative}
.plan-annuel .j.seance:hover{filter:brightness(.96)}
.plan-annuel .num{margin:1.5px;height:24px;border-radius:7px;font-family:'Fraunces',serif;font-weight:600;
  color:var(--encre);background:var(--brume);
  display:flex;align-items:center;justify-content:center;font-size:.78rem}

/* Popup flottante (survol d'une séance) */
.ann-pop{position:fixed;z-index:80;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .12s ease,transform .12s ease;
  background:var(--surface);border:1px solid var(--ligne);border-radius:12px;
  box-shadow:0 16px 40px rgba(44,51,46,.2);padding:.8rem .9rem;max-width:240px}
.ann-pop.on{opacity:1;transform:none}
.ann-pop strong{font-family:'Fraunces',serif;color:var(--encre)}
.ann-pop ul{margin:.45rem 0 0;padding-left:1.1rem}
.ann-pop li{font-size:.85rem;padding:.05rem 0}