/* =====================================================================
   SAINT-CYPRIEN · coachs.css — trois cartes, rien de plus.
   Une carte par coach : son cliche, la discipline qu il enseigne, et le
   bouton qui ouvre le planning de cette discipline. La tuile silhouette
   (initiale chrome) reste le repli pour un coach sans photo prouvee —
   jamais de banque d images. Le faisceau passe d une carte a l autre.
   Reutilise base.css + home.css (.phero, .gong).
   ===================================================================== */


/* ======================== L’ÉQUIPE ============================== */
.roster-sec__title { margin-top: 1rem; font-size: clamp(1.7rem,1rem+2.4vw,2.9rem); }
.roster-sec__lead { margin-top: .9rem; max-width: 54ch; color: var(--ink-soft); }
.roster { display: grid; gap: .7rem; grid-template-columns: 1fr; margin-top: clamp(2rem,4vw,3rem); }
@media (min-width: 680px){ .roster { grid-template-columns: repeat(3,1fr); } }
.rostercard { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .3s; }
.rostercard:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(var(--ink-rgb),.3); }
/* the silhouette tile: a chrome initial, lit like an object under a spot */
.rostercard__media { position: relative; aspect-ratio: 4/4.2; display: grid; place-items: center; overflow: hidden; background:
  radial-gradient(120% 90% at 50% 0%, rgba(var(--spark-rgb),.08), transparent 58%),
  linear-gradient(160deg, var(--paper-3), var(--void)); }
.rostercard__initial { position: relative; z-index: 2; font-family: var(--f-display); font-weight: 700; font-size: clamp(3.4rem,8vw,5.4rem); line-height: 1; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .5; transition: opacity .6s var(--ease); }
.rostercard__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(60% 40% at 50% 122%, rgba(var(--void-rgb),.72), transparent 70%); }
/* THE BEAM — passes from one coach to the next (is-active) */
.rostercard__beam { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .7s var(--ease);
  background: radial-gradient(70% 55% at 50% -8%, rgba(var(--spark-rgb),.3), rgba(var(--spark-rgb),.06) 44%, transparent 70%); }
.rostercard.is-active .rostercard__beam { opacity: 1; }
.rostercard.is-active .rostercard__initial { opacity: 1; }
.rostercard__body { padding: 1.1rem 1.2rem 1.4rem; }
.rostercard__tag { font: 600 .6rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--spark); }
.rostercard__name { font-family: var(--f-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; color: var(--ink); margin-top: .45rem; }
.rostercard__role { font: 600 .78rem/1.3 var(--f-mono); letter-spacing: .02em; color: var(--spark-2); margin-top: .35rem; }
/* vraies phrases → --ink-soft (~11:1) ; --muted reste aux labels/meta */
.rostercard__note { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; margin-top: .7rem; }
.roster__note { margin-top: clamp(1.6rem,3vw,2.2rem); max-width: 60ch; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; padding-left: 1rem; border-left: 2px solid var(--line); }

/* ==================== MOBILE PASS ============================== */
@media (max-width: 820px){
  .roster-sec__title { font-size: clamp(1.5rem,6vw,2rem); }
}

/* =============== LE COMPTE DE CRÉNEAUX (dérivé) ================= */
.rostercard__count { display: inline-block; margin-top: .8rem; font: 600 .62rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--spark-2); border: 1px solid var(--line); border-radius: 100px; padding: .45em .8em; }

/* ============ LA SEMAINE, COACH PAR COACH (onglets) ============= */
.wtabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1.8rem,4vw,2.6rem); }
.wtab { display: inline-flex; align-items: center; gap: .8ch; min-height: 44px; padding: .58em 1.05em; border-radius: 100px; border: 1.5px solid var(--line); background: var(--paper-2); color: var(--ink-soft); transition: border-color .3s, color .3s, background .3s, transform .2s var(--ease-spring); }
.wtab:hover { border-color: var(--spark); color: var(--ink); transform: translateY(-1px); }
.wtab:active { transform: scale(.95); }
.wtab.is-on { background: var(--spark); border-color: var(--spark); color: var(--on-spark); }
.wtab:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
.wtab__name { font: 600 var(--step--1)/1 var(--f-ui); }
.wtab__n { font: 600 .62rem/1 var(--f-mono); opacity: .75; border-left: 1px solid currentColor; padding-left: .8ch; }

.wsheet { margin-top: 1rem; border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); background:
  radial-gradient(110% 120% at 0% 0%, rgba(var(--spark-rgb),.055), transparent 55%), var(--paper-2);
  box-shadow: var(--shadow); padding: clamp(1.3rem,3vw,2.2rem); transition: opacity .18s var(--ease); }
.wsheet.is-swapping { opacity: 0; }
.wsheet__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem,1rem+2vw,2.4rem); letter-spacing: -.02em; color: var(--ink); }
.wsheet__role { font: 600 var(--step--1)/1.4 var(--f-mono); letter-spacing: .02em; color: var(--spark-2); margin-top: .4rem; }
.wsheet__count { display: inline-block; margin-top: .7rem; font: 600 .62rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--spark); }
.wsheet__days { display: grid; gap: .7rem; grid-template-columns: 1fr; margin-top: clamp(1.3rem,3vw,1.9rem); }
@media (min-width: 700px){ .wsheet__days { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1060px){ .wsheet__days { grid-template-columns: repeat(3,1fr); } }
.wday { border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(var(--void-rgb),.4); padding: .9rem 1rem 1rem; }
.wday__k { font: 600 .62rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--spark); }
.wday__list { margin-top: .7rem; display: flex; flex-direction: column; gap: .55rem; }
.wslot { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: baseline; }
.wslot__t { font: 600 var(--step--1)/1 var(--f-mono); color: var(--ink); letter-spacing: .02em; }
.wslot__b { display: flex; flex-direction: column; gap: .15rem; }
.wslot__b b { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.wslot__b i { font-style: normal; font-size: .72rem; color: var(--muted); }
.wsheet__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(1.3rem,3vw,1.8rem); }

/* ================= LE TAPIS SANS NOM — l'état assumé ============= */
.tbd-sec__title { margin-top: 1rem; font-size: clamp(1.6rem,1rem+2.2vw,2.6rem); }


@media (max-width: 820px){
}

/* ------------------------------------------------------------------ *
   LA TUILE À PHOTO — Tawee et Hicham ont désormais leur cliché. La
   silhouette-initiale reste le repli pour un coach sans photo prouvée :
   on ne remplit jamais le trou avec une banque d'images.
 * ------------------------------------------------------------------ */
.rostercard--photo .rostercard__media { background: var(--void); }
.rostercard--photo .rostercard__media img,
.rostercard--photo .rostercard__media picture {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  transition: transform .7s var(--ease);
}
.rostercard--photo:hover .rostercard__media img { transform: scale(1.045); }
/* le halo du bas garde le nom lisible par-dessus la photo */
.rostercard--photo .rostercard__media::after { z-index: 3; }

/* ------------------------------------------------------------------ *
   LA CARTE COACH — le visage, la discipline, le planning.
   Trois informations, dans cet ordre. Le pied de carte pose la
   discipline et le bouton COTE A COTE ; sous 420px il passe en colonne
   plutot que d'ecraser le libelle.
 * ------------------------------------------------------------------ */
.rostercard__body { display: flex; flex-direction: column; gap: .85rem; }
.rostercard__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-top: auto;
}
.rostercard__chips {
  display: flex; flex-wrap: wrap; gap: .3rem;
  list-style: none; margin: 0; padding: 0; min-width: 0;
}
.rostercard__chips li {
  font: 600 .62rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--line);
  border-radius: 100px; padding: .5em .75em;
}
.rostercard__btn { flex: 0 0 auto; padding-inline: 1em; font-size: .8rem; }
@media (max-width: 419px){
  .rostercard__foot { flex-direction: column; align-items: flex-start; }
  .rostercard__btn { width: 100%; justify-content: center; }
}
/* la grille tient les trois cartes a la meme hauteur, bouton aligne */
.roster { align-items: stretch; }
.rostercard { display: flex; flex-direction: column; }
.rostercard__media { flex: 0 0 auto; }
.rostercard__body { flex: 1 1 auto; }

/* Le coach est dans la moitie DROITE du cliche d'en-tete, le titre occupe
   la gauche : on decale le cadrage pour qu'aucun des deux ne soit rogne. */
body[data-page="coachs"] .phero__bg { object-position: 62% 38%; }