/* Studio 550 — Planning dynamique
   Palette du club : #2B484B bleu, #D7E7EB brume, #F68671 corail, #FFFDF9 crème. */

.s550-planning{
  --s550-panel:#2B484B; --s550-mist:#D7E7EB; --s550-coral:#F68671;
  --s550-cream:#FFFDF9; --s550-ink:#17282A; --s550-muted:#6B8285;
  font-family:inherit; color:var(--s550-ink);
}
.s550-title{
  font-size:clamp(22px,3.4vw,38px); text-transform:uppercase; margin:0 0 18px;
}
.s550-notice{
  background:var(--s550-mist); color:var(--s550-panel); border-radius:12px;
  padding:12px 16px; margin:0 0 18px; font-weight:600; font-size:15px;
}
.s550-empty{ color:var(--s550-muted); }

.s550-grid{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; align-items:start;
}
.s550-day{
  background:#fff; border:1px solid var(--s550-mist); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
}
.s550-day.is-today{ border-color:var(--s550-coral); box-shadow:0 0 0 2px rgba(246,134,113,.25); }
.s550-dayhead{ background:var(--s550-mist); padding:10px 12px; text-align:center; }
.s550-dayname{
  display:block; text-transform:uppercase; font-weight:800; letter-spacing:.04em;
  color:var(--s550-panel); font-size:14px;
}
.s550-daydate{ font-size:12px; color:var(--s550-panel); opacity:.72; }

.s550-slots{ padding:8px; display:flex; flex-direction:column; gap:7px; }
.s550-slot{
  border-left:3px solid var(--s550-panel); background:#FAFCFC;
  border-radius:0 9px 9px 0; padding:7px 10px;
}
.s550-time{ display:block; font-weight:800; font-size:13px; color:var(--s550-panel); font-variant-numeric:tabular-nums; }
.s550-name{ display:block; font-size:13px; line-height:1.3; margin:1px 0 3px; }
.s550-spots{ font-size:11px; color:var(--s550-muted); display:flex; align-items:center; gap:5px; }
.s550-spots::before{ content:""; width:6px; height:6px; border-radius:50%; background:#3FAE6A; flex:none; }
.s550-spots.s550-warn::before{ background:#E0A04B; }
.s550-spots.s550-full::before{ background:#D05252; }
.s550-none{ color:var(--s550-muted); font-size:12.5px; text-align:center; padding:16px 6px; margin:0; }

/* .s5 p impose une mesure de 64ch : sans la lever, le paragraphe ne fait
   que 668 px et le bouton se centre dans cette largeur, pas dans la section. */
.s550-cta{ text-align:center; margin:26px 0 0; max-width:none; width:100%; }
.s550-btn{
  display:inline-block; background:var(--s550-coral);
  color:var(--s550-ink);            /* texte foncé : blanc sur ce corail échoue au contraste */
  text-decoration:none; font-weight:800; font-size:16px;
  padding:15px 34px; border-radius:999px; transition:transform .18s,filter .18s;
}
.s550-btn:hover,.s550-btn:focus{ transform:translateY(-2px); filter:brightness(1.06); color:var(--s550-ink); }
.s550-btn:focus-visible{ outline:3px solid var(--s550-panel); outline-offset:3px; }

@media (max-width:1000px){ .s550-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){ .s550-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .s550-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .s550-btn{ transition:none; } }

/* ---------------------------------------------------------------
   Mobile — la semaine en onglets. Sept jours empilés font une page
   interminable ; on n'en montre qu'un, celui du jour par défaut.
   La bande d'onglets n'est créée que par le script : sans lui, les
   jours restent empilés et rien n'est perdu.
   --------------------------------------------------------------- */
.s550-tabs{display:none}

@media (max-width:720px){
  .s550-tabs{
    display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
    margin:0 0 12px;
    /* La pastille du nombre de cours déborde de 5 px au-dessus du bouton ;
       overflow-x:auto rogne aussi la verticale, d'où des chiffres coupés.
       La réserve du haut lui rend sa place. */
    padding:8px 0 4px;
    /* un jour à moitié coupé au bord est illisible : on ancre le défilement */
    scroll-snap-type:x proximity; scroll-padding-left:8px;
  }
  .s550-tab{scroll-snap-align:start}
  .s550-tabs::-webkit-scrollbar{display:none}
  .s550-tab{
    flex:1 0 auto; min-width:62px; position:relative;
    border:1px solid var(--s550-mist); background:#fff; border-radius:12px;
    padding:9px 10px 8px; cursor:pointer; font-family:inherit;
    display:flex; flex-direction:column; align-items:center; gap:1px;
    color:var(--s550-panel); transition:background .18s, border-color .18s;
  }
  .s550-tab span{font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.04em}
  .s550-tab small{font-size:11px; opacity:.6; font-variant-numeric:tabular-nums}
  .s550-tab i{
    position:absolute; top:-5px; right:-4px; font-style:normal;
    background:var(--s550-coral); color:var(--s550-ink);
    font-size:10px; font-weight:800; min-width:17px; height:17px;
    border-radius:999px; display:grid; place-items:center; padding:0 4px;
  }
  .s550-tab.is-on{background:var(--s550-panel); border-color:var(--s550-panel); color:#fff}
  .s550-tab.is-on small{opacity:.75}
  .s550-tab:focus-visible{outline:3px solid var(--s550-coral); outline-offset:2px}

  /* un seul jour visible à la fois */
  .s550-grid.s550-onglets{display:block}
  .s550-grid.s550-onglets .s550-day{display:none}
  .s550-grid.s550-onglets .s550-day.is-shown{display:flex}
  /* l'en-tête du jour fait doublon avec l'onglet actif */
  .s550-grid.s550-onglets .s550-dayhead{display:none}
  .s550-grid.s550-onglets .s550-slots{padding:0}
  .s550-grid.s550-onglets .s550-day{border:none; background:transparent}
  .s550-grid.s550-onglets .s550-slot{
    background:#fff; border:1px solid var(--s550-mist); border-left-width:3px;
    border-radius:0 12px 12px 0; padding:11px 14px;
  }
  .s550-grid.s550-onglets .s550-time{font-size:14px}
  .s550-grid.s550-onglets .s550-name{font-size:14px}
}