/* ============================================================
   SERVICES — Fan session (12/10/2026)
   Reprend les variables du site (style.css) : marges --page-pad,
   couleurs, polices Azurio / Barlow, angles coupes des cartes.
   Formats : PC (> 1300px), tablette (<= 1300px), mobile (<= 600px).
   ============================================================ */

body.services-page {
  background: #071d38;
  min-height: 100svh;
}

.fs {
  --fs-beige: #a78bfa;
  --fs-line: rgba(94, 170, 255, .16);
  --fs-surface: #06112b;
  --fs-surface-2: #081733;
  --fs-text: #e6f1ff;
  --fs-muted: rgba(206, 224, 255, .62);
  --fs-cut-tr: var(--cut-lg, 18px);
  --fs-cut-br: var(--cut-sm, 7px);
  --fs-clip: polygon(0 0, calc(100% - var(--fs-cut-tr)) 0, 100% var(--fs-cut-tr), 100% calc(100% - var(--fs-cut-br)), calc(100% - var(--fs-cut-br)) 100%, 0 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  /* Le hero est au-dessus : meme espacement que les sections Communaute. */
  padding: clamp(40px, 5vw, 80px) var(--page-pad) clamp(70px, 8vw, 120px);
  color: var(--fs-text);
  font-family: var(--font-body, 'Barlow', sans-serif);
  /* Continue le degrade du hero (#051a3e) sans cassure. */
  background-color: #051a3e;
  background-image: linear-gradient(180deg, #051a3e 0%, #071d38 45%, #061428 100%);
  overflow: hidden;
}

/* ---------- HERO : identique au hero de la page Communaute ----------
   (valeurs reprises de communaute.css : .sv-hero / .sv-tabs / .sv-tab) */
.sv-hero {
  position: relative;
  padding: clamp(50px, 8vw, 100px) 0 0;
  text-align: center;
  overflow: hidden;
  background: #030814;
}
.sv-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #030814 0%, #061838 55%, #051a3e 100%);
}
.sv-hero__content {
  position: relative;
  z-index: 1;
  padding: 0 var(--space-inner);
  margin-bottom: clamp(28px, 4vw, 50px);
}
.sv-hero__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: clamp(8px, 0.85vw, 11px);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent, #5eaaff);
}
.sv-hero__title,
.sv-hero__title em {
  font-family: 'Oblisk', var(--font-display) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-transform: uppercase !important;
}
.sv-hero__title {
  margin: 0;
  font-size: clamp(44px, 6.5vw, 82px) !important;
  line-height: 0.9;
  color: var(--text, #e6f1ff);
  text-align: center;
}
.sv-hero__title em { font-style: normal; color: var(--accent, #5eaaff); }
.sv-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 0 var(--space-inner);
  border-bottom: 1px solid var(--border, rgba(94, 170, 255, .1));
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sv-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sv-tab {
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: clamp(10px, 0.9vw, 12.5px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted, rgba(206, 224, 255, .55));
  padding: 14px clamp(14px, 2vw, 28px);
  border-bottom: 2px solid transparent;
  transition: color var(--tr, .2s ease), border-color var(--tr, .2s ease);
}
.sv-tab:hover,
.sv-tab.active {
  color: var(--text, #e6f1ff);
  border-bottom-color: var(--accent, #5eaaff);
}
.sv-tab:focus-visible { outline: none; color: var(--text, #e6f1ff); border-bottom-color: var(--accent, #5eaaff); }
/* v53 : aucun contour (blanc) au survol / focus / clic des onglets. */
.sv-tab, .sv-tab:hover, .sv-tab:focus, .sv-tab:active { outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; }
@media (max-width: 600px) {
  .sv-tabs { overflow-x: auto; gap: 0; padding-left: 6px; padding-right: 6px; -webkit-overflow-scrolling: touch; }
  .sv-tab { flex-shrink: 0; padding-left: clamp(8px, 2.6vw, 14px); padding-right: clamp(8px, 2.6vw, 14px); }
}

/* ---------- PANNEAUX ---------- */
.fs-panel {
  position: relative;
  background: var(--fs-surface);
  clip-path: var(--fs-clip);
  -webkit-clip-path: var(--fs-clip);
  padding: clamp(18px, 2.2vw, 32px);
  box-shadow: inset 0 1px 0 rgba(94, 170, 255, .1);
}
.fs-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.fs-panel__title {
  display: flex; align-items: center; gap: 14px;
  margin: 0;
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;   /* titres des conteneurs du site */
  font-weight: 400;
  font-size: clamp(26px, 2.2vw, 38px);
  letter-spacing: .03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fs-text);
}
.fs-step {
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: #040e1e;
  background: var(--fs-beige);
  padding: 5px 8px;
  clip-path: var(--clip-tag);
}
.fs-counter {
  margin: 0;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fs-muted);
}
.fs-counter b { color: var(--accent, #5eaaff); font-weight: 700; }
.fs-counter.is-complete b { color: var(--fs-beige); }

.fs-rules-inline {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 0 0 clamp(18px, 2vw, 26px); padding: 0; list-style: none;
  font-size: 13px; color: var(--fs-muted);
}
.fs-rules-inline li { display: inline-flex; align-items: center; gap: 6px; }
.fs-rules-inline b { color: var(--fs-text); font-weight: 600; }

/* Pastilles de classe */
.fs-cls {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: #040e1e;
  box-shadow: 0 0 0 2px var(--fs-surface);
}
.fs-cls--1 { background: linear-gradient(150deg, #e6ddff, #a78bfa 55%, #7457d9); }
.fs-cls--2 { background: linear-gradient(150deg, #ddd2ff, #9a80f2); }
.fs-cls--3 { background: linear-gradient(150deg, #9ed0ff, #5eaaff); }
.fs-cls--4 { background: linear-gradient(150deg, #7fe6dc, #38d4c8); }
.fs-cls--5 { background: linear-gradient(150deg, #b8c6dd, #7d8fae); }

/* ---------- GRILLE DES JOUEURS ---------- */
.fs-players__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
}
.fs-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px) clamp(10px, 1.6vw, 22px);
}
/* Section joueurs SANS conteneur : les ronds sont poses directement
   sur le fond de la page (pas de panneau, pas de trait entre classes). */
.fs-players { position: relative; padding: clamp(6px, 1vw, 12px) 0 0; }
.fs-players .fs-cls { box-shadow: 0 0 0 2px #071d38; }
.fs-players .fs-avatar .fs-cls { box-shadow: 0 0 0 3px #071d38; }

.fs-user {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 4px 0;
  background: none; border: 0; color: inherit; font: inherit;
  cursor: pointer;
  transition: opacity .25s ease, filter .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.fs-user:focus-visible { outline: 2px solid var(--accent-soft, #7ec4ff); outline-offset: 4px; }
.fs-avatar {
  position: relative;
  width: clamp(64px, 6.4vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 32% 26%, #173960 0%, #0b2146 52%, #051230 100%);
  box-shadow: inset 0 0 0 1.5px rgba(94, 170, 255, .45), 0 10px 22px rgba(1, 7, 25, .35);
  transition: box-shadow .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.fs-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.fs-avatar__initials {
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  font-size: clamp(18px, 1.8vw, 28px);
  letter-spacing: .04em;
  color: #cfe6ff;
}
.fs-avatar svg.fs-avatar__silhouette { width: 62%; height: 62%; color: rgba(142, 195, 255, .7); }
.fs-avatar .fs-cls {
  position: absolute; right: 2%; bottom: 2%;
  width: clamp(20px, 1.9vw, 28px); height: clamp(20px, 1.9vw, 28px);
  font-size: clamp(10px, .9vw, 13px);
  box-shadow: 0 0 0 3px var(--fs-surface);
}
.fs-check {
  position: absolute; left: 50%; top: 50%;
  width: 46%; height: 46%;
  translate: -50% -50%;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(167, 139, 250, .92);
  color: #040e1e;
  opacity: 0; scale: .6;
  transition: opacity .22s ease, scale .3s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.fs-check svg { width: 62%; height: 62%; }
.fs-user__name {
  max-width: 100%;
  font-size: clamp(12px, 1vw, 14px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fs-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fs-user__role { margin-top: -6px; font-size: 11px; color: var(--fs-muted); letter-spacing: .04em; }

@media (hover: hover) {
  .fs-user:hover .fs-avatar { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px rgba(142, 195, 255, .85), 0 14px 26px rgba(1, 7, 25, .45); }
}
.fs-user.is-selected .fs-avatar {
  box-shadow: inset 0 0 0 2px var(--fs-beige), 0 0 0 4px rgba(167, 139, 250, .16), 0 14px 26px rgba(1, 7, 25, .45);
}
.fs-user.is-selected .fs-check { opacity: 1; scale: 1; }
.fs-user.is-selected .fs-user__name { color: var(--fs-beige); }
.fs-user.is-dim { opacity: .42; filter: saturate(.6); }
.fs-user.is-locked { cursor: not-allowed; }

/* Index alphabetique */
.fs-alpha {
  position: sticky; top: calc(var(--navbar-h, 64px) + 30px);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px 8px 12px;
  border-left: 1px solid var(--fs-line);
}
.fs-alpha button {
  width: 24px; height: 20px;
  display: grid; place-items: center;
  padding: 0; border: 0; background: none;
  font: 700 11px/1 var(--font-body, 'Barlow', sans-serif); letter-spacing: .04em;
  color: var(--fs-muted);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.fs-alpha button:disabled { color: rgba(206, 224, 255, .2); cursor: default; }
.fs-alpha button:not(:disabled):hover { color: var(--fs-text); }
.fs-alpha button.is-active { color: #040e1e; background: var(--accent, #5eaaff); clip-path: var(--clip-tag); }
.fs-alpha .fs-alpha__all { width: auto; padding: 0 4px; margin-bottom: 4px; font-size: 10px; letter-spacing: .12em; }
.fs-empty { margin: 18px 0 0; font-size: 14px; color: var(--fs-muted); text-align: center; }

/* ---------- AGENDA ---------- */
/* Agenda pose directement sur le fond (pas de conteneur, pas de titre). */
.fs-agenda { position: relative; }
.fs-scroll-target { scroll-margin-top: calc(var(--navbar-h, 64px) + 24px); }

.fs-switch {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  max-width: 560px; margin: 0 auto clamp(16px, 1.8vw, 24px);
}
.fs-switch__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0; border: 0;
  color: var(--fs-text);
  background: rgba(94, 170, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .3);
  clip-path: var(--clip-btn);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.fs-switch__btn svg { width: 20px; height: 20px; }
.fs-switch__btn:not(:disabled):hover { background: rgba(94, 170, 255, .22); }
.fs-switch__btn:disabled { opacity: .3; cursor: default; }
.fs-switch__name {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 0;
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  letter-spacing: .04em;
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
}
.fs-switch__name .fs-switch__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-switch__name .fs-switch__pos { font-family: var(--font-body, 'Barlow', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--fs-muted); }
.fs-switch__name.is-empty { font-family: var(--font-body, 'Barlow', sans-serif); font-size: 15px; text-transform: none; color: var(--fs-muted); }

.fs-cal-wrap { position: relative; }
.fs-cal {
  --fs-cols: 24;
  display: grid;
  grid-template-columns: clamp(52px, 5vw, 86px) repeat(24, minmax(0, 1fr));
  grid-template-rows: auto repeat(7, clamp(30px, 2.6vw, 40px));
  gap: 3px;
  user-select: none;
}
.fs-cal__corner { grid-row: 1; grid-column: 1; }
.fs-cal__hour,
.fs-cal__day {
  display: flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fs-muted);
}
.fs-cal__hour { grid-row: 1; grid-column: calc(var(--h) + 2); justify-content: center; padding-bottom: 6px; font-size: 10px; letter-spacing: .02em; }
.fs-cal__day { grid-column: 1; grid-row: calc(var(--d) + 2); padding-right: 10px; font-size: 12px; }
.fs-cell {
  grid-row: calc(var(--d) + 2);
  grid-column: calc(var(--h) + 2);
  min-width: 0;
  padding: 0; border: 0;
  background: #0d2552;
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .18);
  cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.fs-cell:not(:disabled):hover { background: #16367a; box-shadow: inset 0 0 0 1px rgba(142, 195, 255, .6); }
.fs-cell:focus-visible { outline: 2px solid var(--accent-soft, #7ec4ff); outline-offset: 1px; position: relative; z-index: 1; }
.fs-cell:disabled {
  cursor: not-allowed;
  background: repeating-linear-gradient(135deg, #1a2234 0 3px, #262f43 3px 6px);
  box-shadow: none;
}
.fs-cell.is-picked,
.fs-cell.is-picked:not(:disabled):hover {
  background: var(--fs-beige);
  box-shadow: inset 0 0 0 1px #d9ccff, 0 0 0 2px rgba(167, 139, 250, .25);
}
.fs-cell.is-picked-other {
  box-shadow: inset 0 0 0 2px rgba(167, 139, 250, .55);
}
.fs-cal__lock {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(6, 20, 44, .6);
  backdrop-filter: blur(2px);
  text-align: center;
  transition: opacity .3s ease, visibility .3s ease;
}
.fs-cal__lock p { margin: 0; max-width: 360px; font-size: 15px; color: var(--fs-text); }
.fs-agenda.has-player .fs-cal__lock { opacity: 0; visibility: hidden; }

/* Recapitulatif sous l'agenda */
.fs-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(18px, 2vw, 26px);
}
.fs-summary:empty { display: none; }
.fs-chip {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
  padding: 10px 14px 10px 10px;
  background: var(--fs-surface-2);
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .14);
  clip-path: var(--clip-btn-r);
  border: 0; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
  transition: box-shadow .2s ease, background-color .2s ease;
}
.fs-chip:hover { background: #0b1f45; }
.fs-chip.is-current { box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .6); }
.fs-chip .fs-avatar { width: 46px; flex: 0 0 46px; box-shadow: inset 0 0 0 1.5px rgba(94, 170, 255, .45); }
.fs-chip .fs-avatar .fs-cls { width: 18px; height: 18px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--fs-surface-2); }
.fs-chip .fs-avatar__initials { font-size: 15px; }
.fs-chip__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fs-chip__name { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-chip__slot { font-size: 13px; color: var(--fs-beige); }
.fs-chip__slot.is-missing { color: var(--fs-muted); font-style: italic; }

/* ---------- REGLEMENT + VIDEO ---------- */
.fs-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}
.fs-rules .fs-panel__title { margin-bottom: 18px; }
.fs-rules__list { margin: 0; padding: 0; list-style: none; counter-reset: fsr; display: flex; flex-direction: column; gap: 12px; }
.fs-rules__list li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px; line-height: 1.55;
  color: rgba(214, 230, 255, .78);
  counter-increment: fsr;
}
.fs-rules__list li::before {
  content: counter(fsr, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent, #5eaaff);
}
.fs-video { padding: 0; min-height: 300px; }
.fs-video__frame { position: relative; width: 100%; height: 100%; min-height: inherit; aspect-ratio: 16 / 9; background: #040c1a; }
.fs-video__frame iframe, .fs-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.fs-video__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(65, 137, 235, .18), rgba(49, 117, 210, 0) 70%),
    repeating-linear-gradient(135deg, rgba(94, 170, 255, .05) 0 2px, transparent 2px 14px),
    #050f24;
}
.fs-video__play {
  width: clamp(62px, 6vw, 86px); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #040e1e;
  background: var(--accent, #5eaaff);
  box-shadow: 0 0 0 10px rgba(94, 170, 255, .14);
}
.fs-video__play svg { width: 40%; height: 40%; margin-left: 6%; }
.fs-video__label {
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  font-size: clamp(28px, 2.8vw, 46px);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--fs-text);
}
.fs-video__sub { margin-top: -8px; font-size: 13px; color: var(--fs-muted); }

/* ---------- ACTIONS : boutons simples (style navbar Assistance / Discord) ---------- */
.fs-actions {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 14px);
  margin-top: clamp(6px, 1vw, 14px);
}
.fs-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px;
  min-width: 160px;
  padding: 0 clamp(20px, 2vw, 30px);
  border: 1px solid transparent;
  border-radius: 0;
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  font-size: 17px; font-weight: 400; letter-spacing: .1em; line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.fs-btn svg { flex: 0 0 auto; }
.fs-btn:focus-visible { outline: 2px solid var(--accent-soft, #7ec4ff); outline-offset: 3px; }
.fs-btn--ghost {
  color: var(--fs-beige);
  background: rgba(167, 139, 250, .14);
  border-color: rgba(167, 139, 250, .45);
}
.fs-btn--ghost:hover { background: rgba(167, 139, 250, .22); border-color: rgba(167, 139, 250, .7); }
.fs-badge {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  font: 700 11px/1 'Barlow', sans-serif; letter-spacing: 0;
  color: #040e1e; background: var(--fs-beige);
}
.fs-badge[hidden] { display: none; }
.fs-btn--price { font-size: 19px; letter-spacing: .06em; }
.fs-btn--price:disabled {
  cursor: not-allowed;
  color: rgba(206, 224, 255, .38);
  background: rgba(94, 170, 255, .05);
  border-color: rgba(94, 170, 255, .16);
}
.fs-btn--price:not(:disabled) {
  color: #04101f;
  background: linear-gradient(135deg, var(--accent-soft, #8ec3ff) 0%, var(--accent2, #3d8bfd) 100%);
  animation: fsPriceReady 1s ease 1;
}
.fs-btn--price:not(:disabled):hover { opacity: .9; }
@keyframes fsPriceReady {
  0% { box-shadow: 0 0 0 0 rgba(94, 170, 255, .55); }
  100% { box-shadow: 0 0 0 14px rgba(94, 170, 255, 0); }
}
.fs-hint { margin: 0; min-height: 20px; text-align: center; font-size: 13px; color: var(--fs-muted); }
.fs-hint.is-ready { color: var(--fs-beige); }

/* ---------- TOAST ---------- */
.fs-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 2100;
  max-width: calc(100% - 40px);
  padding: 12px 18px;
  font: 600 14px/1.4 var(--font-body, 'Barlow', sans-serif);
  color: #040e1e; background: #a78bfa;
  clip-path: var(--clip-btn);
  translate: -50% 20px; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, translate .3s cubic-bezier(.22, 1, .36, 1);
}
.fs-toast.is-on { opacity: 1; translate: -50% 0; }

/* ============================================================
   TABLETTE (<= 1300px)
   ============================================================ */
@media (max-width: 1300px) {
  .fs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fs-cal { grid-template-columns: 52px repeat(24, minmax(0, 1fr)); gap: 2px; }
  .fs-cal__hour { font-size: 9px; }
  .fs-info { grid-template-columns: minmax(0, 1fr); }
  .fs-video { min-height: 0; }
}
@media (max-width: 1000px) {
  .fs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs-cal__hour--odd { visibility: hidden; }
  .fs-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   MOBILE (<= 600px) : agenda pivote (heures en lignes, jours en colonnes)
   ============================================================ */
@media (max-width: 600px) {
  .fs { gap: 16px; }
  .fs-panel { padding: 18px 14px; }
  .fs-panel__title { font-size: 26px; gap: 10px; }
  .fs-rules-inline { flex-direction: column; gap: 6px; }
  .fs-players__body { gap: 8px; }
  .fs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; }
  .fs-avatar { width: min(78px, 22vw); }
  .fs-alpha { padding: 4px 0 4px 6px; gap: 0; }
  .fs-alpha button { width: 20px; height: 17px; font-size: 10px; }
  .fs-switch { gap: 8px; }
  .fs-switch__btn { width: 40px; height: 40px; }
  .fs-switch__name { font-size: 26px; gap: 8px; }

  .fs-cal {
    grid-template-columns: 38px repeat(7, minmax(0, 1fr));
    grid-template-rows: auto repeat(24, 26px);
    gap: 2px;
  }
  .fs-cal__hour,
  .fs-cal__hour--odd {
    visibility: visible;
    grid-row: calc(var(--h) + 2); grid-column: 1;
    justify-content: flex-end; padding: 0 6px 0 0;
    font-size: 10px;
  }
  .fs-cal__day { grid-row: 1; grid-column: calc(var(--d) + 2); justify-content: center; padding: 0 0 6px; font-size: 10px; }
  .fs-cell { grid-row: calc(var(--h) + 2); grid-column: calc(var(--d) + 2); }

  .fs-summary { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fs-video { min-height: 0; }
  .fs-rules__list li { font-size: 14px; }

  .fs-actions { flex-direction: column; align-items: stretch; }
  .fs-btn { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fs *, .fs-toast { transition: none !important; animation: none !important; }
}

/* Le site force les angles droits (* { border-radius: 0 !important }) :
   les avatars et pastilles du croquis restent ronds. */
.fs .fs-avatar,
.fs .fs-avatar img,
.fs .fs-check,
.fs .fs-cls,
.fs .fs-video__play { border-radius: 50% !important; }


/* ============================================================
   TITRE DE SECTION « FAN SESSION »
   Meme style que les titres de section de la page Communaute
   (.sv-featured__title : Azurio Medium, 56px PC / 52px a 1300px /
   30px mobile, centre, majuscules).
   ============================================================ */
.fs-section-head {
  text-align: center;
  margin: 0 0 clamp(4px, 1vw, 12px);
}
.fs .fs-section-title {
  margin: 0;
  font-family: var(--font-medium, 'Azurio Medium'), 'Azurio Medium', sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text, #e6f1ff);
  text-align: center;
}
.fs .fs-section-sub {
  margin: 10px 0 0;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: 0.05em;
  color: var(--text-muted, rgba(170, 205, 255, .52));
}

/* ============================================================
   NAVBAR MASQUEE A L'ARRIVEE (comme la page Communaute)
   Elle glisse vers le bas des qu'on scrolle : la classe
   body.sv-nav-shown est ajoutee par services.js.
   ============================================================ */
html body .navbar,
html body #navbar,
html body .navbar.navbar--visible {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  transform: translateY(-115%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .5s cubic-bezier(.22,1,.36,1),
              opacity .3s ease,
              padding .35s cubic-bezier(.4,0,.2,1) !important;
}
html body.sv-nav-shown .navbar,
html body.sv-nav-shown #navbar,
html body.sv-nav-shown .navbar.navbar--visible,
html.va-push-open body .navbar,
html.velra-menu-open body .navbar {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
html body { margin-top: 0 !important; }

/* NAVBAR : le logo VELRA a la place de l'onglet « Accueil » est desormais
   gere pour TOUTES les pages dans components.js (bloc VELRA-NAV-LOGO). */


/* ============================================================
   13/10/2026 (v2) — PRESENTATION DES 5 CLASSES (sous « Fan session »)
   5 conteneurs verticaux : Classe 1 a gauche -> Classe 5 a droite.
   Bords entiers (pas d'angle coupe), couleur = couleur de la classe
   (images img/class/c1..c5.webp). Haut gauche : image de la classe |
   centre : 1 rond utilisateur par session | bas : offre, prix/heure,
   total d'heures. Clic = affiche la reservation de cette classe.
   PC : 5 colonnes. Tablette / mobile : defilement horizontal.
   ============================================================ */
.fs-packs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 18px);
  margin: clamp(4px, .8vw, 10px) 0 clamp(6px, 1vw, 14px);
  padding: 6px 2px;              /* place pour le survol / la bordure active */
}
.fs-pack {
  /* Couleurs de la classe (reprises des images de classe). */
  --pk: #8896da; --pk-hi: #afc3ff; --pk-lo: #6669bb; --pk-rgb: 136, 150, 218;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  min-width: 0;
  min-height: clamp(470px, 34vw, 560px);
  padding: clamp(16px, 1.4vw, 22px) clamp(12px, 1.2vw, 18px) clamp(18px, 1.6vw, 24px);
  border: 1px solid rgba(var(--pk-rgb), .38);
  color: var(--fs-text);
  font: inherit;
  text-align: center;
  background:
    radial-gradient(ellipse 95% 50% at 50% 40%, rgba(var(--pk-rgb), .22) 0%, rgba(var(--pk-rgb), 0) 72%),
    linear-gradient(180deg, rgba(var(--pk-rgb), .30) 0%, rgba(var(--pk-rgb), .08) 34%, rgba(6, 17, 43, 0) 62%),
    linear-gradient(180deg, #0a1a3a 0%, #06112b 100%);
  box-shadow: inset 0 3px 0 var(--pk), 0 14px 34px rgba(1, 7, 25, .35);
  cursor: pointer;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, border-color .25s ease, opacity .3s ease, filter .3s ease;
  -webkit-tap-highlight-color: transparent;
  animation: fsPackIn .6s cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes fsPackIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fs-pack--1, .fs-order--1 { --pk: #8896da; --pk-hi: #b3c4ff; --pk-lo: #6669bb; --pk-rgb: 136, 150, 218; }
.fs-pack--2, .fs-order--2 { --pk: #cf6595; --pk-hi: #ff8fb4; --pk-lo: #b0508a; --pk-rgb: 207, 101, 149; }
.fs-pack--3, .fs-order--3 { --pk: #d0b37a; --pk-hi: #ffe2a6; --pk-lo: #a6885a; --pk-rgb: 208, 179, 122; }
.fs-pack--4, .fs-order--4 { --pk: #d1986a; --pk-hi: #ffc18f; --pk-lo: #a07048; --pk-rgb: 209, 152, 106; }
.fs-pack--5, .fs-order--5 { --pk: #5fc195; --pk-hi: #8af2bf; --pk-lo: #4f957a; --pk-rgb: 95, 193, 149; }
.fs-pack:focus-visible { outline: 2px solid var(--pk-hi); outline-offset: 3px; }
@media (hover: hover) {
  .fs-pack:hover { transform: translateY(-5px); border-color: rgba(var(--pk-rgb), .7); }
}
/* Conteneur selectionne : bordure pleine + halo ; les autres s'estompent. */
.fs-pack.is-active {
  border-color: var(--pk-hi);
  box-shadow: inset 0 3px 0 var(--pk-hi), 0 0 0 1px var(--pk-hi), 0 18px 44px rgba(var(--pk-rgb), .22);
}


/* Haut : image de classe (gauche) + nombre de joueurs (droite) */
.fs-pack__top {
  align-self: stretch;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  position: relative; z-index: 1;
}
.fs-pack__cls { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.fs-pack__icon {
  width: clamp(38px, 3vw, 50px); height: auto; aspect-ratio: 1;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(var(--pk-rgb), .35));
}
.fs-pack__label {
  font-size: clamp(10px, .78vw, 11.5px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pk-hi);
  white-space: nowrap;
}
.fs-pack__count {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fs-muted);
  white-space: nowrap;
}

/* Centre : ronds utilisateur (1 par session) */
.fs-pack__mid {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  display: grid; place-items: center;
  padding: clamp(18px, 2vw, 30px) 0 clamp(26px, 2.6vw, 40px);
}
.fs-pack__avatars {
  --av: clamp(80px, 6.6vw, 114px);
  position: relative;
  width: var(--av); height: var(--av);
}
.fs-pack__avatar {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(var(--pk-rgb), .38) 0%, #0d2149 55%, #061230 100%);
  box-shadow: 0 0 0 4px rgba(4, 14, 30, .7), 0 14px 30px rgba(1, 7, 25, .45);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.fs-pack__avatar::before {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 210deg, var(--pk-hi), var(--pk), var(--pk-lo), var(--pk-hi));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.fs-pack__avatar svg { width: 54%; height: 54%; color: var(--pk-hi); opacity: .92; }
/* Positions des ronds (gerees par la rotation dans services.js) :
   centre = premier plan ; droite / gauche = en dessous, decales,
   legerement visibles. Aucun effet d'agrandissement au survol. */
.fs-pack__avatar {
  transition: translate .9s cubic-bezier(.65, 0, .35, 1), scale .9s cubic-bezier(.65, 0, .35, 1),
              opacity .9s ease, transform .42s cubic-bezier(.65, 0, .35, 1) !important;
}
.fs-pack__avatar[data-pos="center"] { z-index: 3; opacity: 1; scale: 1; translate: 0 0; }
.fs-pack__avatar[data-pos="right"]  { z-index: 1; opacity: .38; scale: .8; translate: 52% 30%; }
.fs-pack__avatar[data-pos="left"]   { z-index: 1; opacity: .38; scale: .8; translate: -52% 30%; }
/* Classes 1 et 2 (1 seul rond) : rotation sur lui-meme. */
.fs-pack__avatar.is-flip { transform: rotateY(90deg); }
.fs-pack__avatar > img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 50% !important; }
.fs-pack__ini {
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  font-size: calc(var(--av) * .36); letter-spacing: .04em; line-height: 1;
  color: var(--pk-hi);
}

/* Bas : offre */
.fs-pack__bottom { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fs-pack__sessions {
  margin: 0;
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 2.2vw, 36px);
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fs-text);
}
.fs-pack__sessions span { color: var(--pk-hi); }
.fs-pack__text { margin: 0; font-size: clamp(11.5px, .9vw, 13.5px); line-height: 1.4; color: var(--fs-muted); }
.fs-pack__price {
  margin: 2px 0 0;
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  font-size: clamp(28px, 2.4vw, 40px);
  letter-spacing: .03em;
  line-height: 1;
  color: var(--pk-hi);
  white-space: nowrap;
}
.fs-pack__stats {
  width: 100%;
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 12px 0 0; padding: 12px 0 0;
  border-top: 1px solid rgba(var(--pk-rgb), .25);
}
.fs-pack__stats > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 4px; }
.fs-pack__stats > div + div { border-left: 1px solid rgba(var(--pk-rgb), .25); }
.fs-pack__stats dt { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fs-muted); }
.fs-pack__stats dd { margin: 0; font-size: clamp(13px, 1.05vw, 17px); font-weight: 700; color: var(--fs-text); white-space: nowrap; }
.fs-pack__note { margin: 8px 0 0; font-size: 11px; letter-spacing: .06em; color: rgba(206, 224, 255, .45); }

/* ---------- RESERVATION : visible apres selection d'un conteneur ---------- */
.fs-booking { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
.fs-booking[hidden] { display: none !important; }
.fs-booking.is-in { animation: fsBookingIn .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes fsBookingIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Joueurs : la bande alphabetique est retiree, grille centree. */
.fs-players__body { display: block; }
.fs-grid {
  grid-template-columns: repeat(auto-fit, minmax(110px, 150px));
  justify-content: center;
}
.fs-players__top { display: flex; justify-content: center; margin: 0 0 clamp(12px, 1.4vw, 20px); }
.fs-players__top .fs-counter:empty { display: none; }
.fs-user__price { font-size: 12.5px; font-weight: 700; color: var(--fs-beige); letter-spacing: .02em; }

/* Image de classe a la place des pastilles numerotees. */
.fs .fs-clsimg { display: block; object-fit: contain; border-radius: 0 !important; background: none; box-shadow: none; }
.fs-avatar .fs-avatar__cls {
  position: absolute; right: -2%; bottom: -2%;
  width: clamp(24px, 2.3vw, 34px); height: auto; aspect-ratio: 1;
  filter: drop-shadow(0 3px 6px rgba(1, 7, 25, .6));
}
.fs-chip .fs-avatar .fs-avatar__cls { width: 20px; right: -4px; bottom: -4px; }

/* Bouton Reglement DANS le conteneur Reglement (en bas du panneau). */
.fs-rules { display: flex; flex-direction: column; }
.fs-rules__foot { margin-top: auto; padding-top: clamp(18px, 2vw, 26px); }
.fs-rules__foot .fs-rules__btn { min-width: 0; width: 100%; }
.fs-rules .fs-rules__list { margin-bottom: 0; }

.fs .fs-pack__avatar,
.fs .fs-pack__avatar::before { border-radius: 50% !important; }

/* Retour visuel : les joueurs pulsent a l'ouverture */
.fs-user.is-flash .fs-avatar { animation: fsFlash 1.1s ease 2; }
@keyframes fsFlash {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(94, 170, 255, .45), 0 10px 22px rgba(1, 7, 25, .35); }
  45% { box-shadow: inset 0 0 0 2px var(--fs-beige), 0 0 0 7px rgba(167, 139, 250, .22), 0 14px 26px rgba(1, 7, 25, .45); }
}

@media (max-width: 1300px) {
  .fs-pack { min-height: 440px; }
  .fs-pack__label { letter-spacing: .1em; }
  .fs-pack__count { display: none; }
}
@media (max-width: 1000px) {
  .fs-packs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 31%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 2px;
    padding-bottom: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .fs-packs::-webkit-scrollbar { display: none; }
  .fs-pack { scroll-snap-align: start; }
  .fs-pack__count { display: inline; }
}
@media (max-width: 600px) {
  .fs-packs { grid-auto-columns: 76%; gap: 10px; }
  .fs-pack { min-height: 460px; }
  .fs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-pack, .fs-booking.is-in, .fs-user.is-flash .fs-avatar { animation: none !important; }
}


/* ============================================================
   13/10/2026 (v3) — PLUSIEURS PACKS + « MES CHOIX »
   ============================================================ */
/* Petit rond en haut a droite : nombre de fois ou le pack est choisi. */
.fs-pack__badge {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  min-width: 28px; height: 28px; padding: 0 7px;
  display: grid; place-items: center;
  border-radius: 999px !important;
  background: linear-gradient(150deg, var(--pk-hi), var(--pk));
  color: #04101f;
  font-size: 13px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 3px rgba(4, 14, 30, .75), 0 6px 16px rgba(var(--pk-rgb), .45);
}
.fs-pack__badge[hidden] { display: none !important; }
.fs-pack__badge.is-pop { animation: fsBadgePop .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes fsBadgePop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
.fs-pack.is-chosen { border-color: rgba(var(--pk-rgb), .62); }
.fs-pack:active { transform: translateY(-2px) scale(.99); }

/* Mes choix : un rectangle par pack choisi */
.fs-orders { display: flex; flex-direction: column; gap: 10px; margin: 0 0 clamp(6px, 1vw, 12px); }
.fs-orders[hidden] { display: none !important; }
.fs-order {
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, auto) 1fr auto 40px;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  padding: 12px 12px 12px clamp(14px, 1.4vw, 20px);
  border: 1px solid rgba(var(--pk-rgb), .32);
  background:
    linear-gradient(90deg, rgba(var(--pk-rgb), .16) 0%, rgba(var(--pk-rgb), .04) 40%, rgba(6, 17, 43, 0) 100%),
    #081634;
  box-shadow: inset 3px 0 0 rgba(var(--pk-rgb), .55);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  animation: fsOrderIn .4s cubic-bezier(.22, 1, .36, 1) backwards;
  -webkit-tap-highlight-color: transparent;
}
@keyframes fsOrderIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fs-order:hover { border-color: rgba(var(--pk-rgb), .6); }
.fs-order:focus-visible { outline: 2px solid var(--pk-hi); outline-offset: 2px; }
.fs-order.is-active {
  border-color: var(--pk-hi);
  box-shadow: inset 4px 0 0 var(--pk-hi), 0 10px 26px rgba(var(--pk-rgb), .16);
}
.fs-order__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fs .fs-order__img { width: 38px; height: 38px; flex: 0 0 38px; }
.fs-order__title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fs-order__title b {
  font-family: 'Bebas Neue', var(--font-medium), sans-serif; font-weight: 400;
  font-size: 22px; letter-spacing: .05em; line-height: 1; color: var(--pk-hi);
}
.fs-order__title span { font-size: 11.5px; color: var(--fs-muted); letter-spacing: .03em; white-space: nowrap; }
.fs-order__players { display: flex; flex-wrap: wrap; gap: 10px 18px; min-width: 0; }
.fs-order__player { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.fs-order .fs-avatar { width: 40px; flex: 0 0 40px; box-shadow: inset 0 0 0 1.5px rgba(var(--pk-rgb), .55); }
.fs-order .fs-avatar__initials { font-size: 14px; }
.fs-order .fs-avatar .fs-check { display: none; }
.fs-order .fs-avatar .fs-avatar__cls { display: none; }
.fs-order__ghost {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  border-radius: 50% !important;
  border: 1px dashed rgba(var(--pk-rgb), .5);
  color: rgba(var(--pk-rgb), .7);
}
.fs-order__ghost svg { width: 55%; height: 55%; }
.fs-order__ptext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs-order__pname { font-size: 13.5px; font-weight: 700; color: var(--fs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.fs-order__player.is-empty .fs-order__pname { color: var(--fs-muted); font-weight: 600; }
.fs-order__pslot { font-size: 11.5px; color: var(--fs-beige); white-space: nowrap; }
.fs-order__pslot.is-missing { color: rgba(206, 224, 255, .45); }
.fs-order__end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fs-order__price {
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  font-size: 26px; letter-spacing: .03em; line-height: 1; color: var(--fs-text); white-space: nowrap;
}
.fs-order__status { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(206, 224, 255, .5); white-space: nowrap; }
.fs-order.is-active .fs-order__status { color: var(--pk-hi); }
.fs-order.is-complete .fs-order__status { color: #5fd29c; }
.fs-order__remove {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid rgba(206, 224, 255, .16);
  background: rgba(4, 14, 30, .5);
  color: rgba(230, 241, 255, .7);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.fs-order__remove svg { width: 15px; height: 15px; }
.fs-order__remove:hover { background: rgba(255, 99, 99, .14); border-color: rgba(255, 120, 120, .5); color: #ffb3b3; }
.fs-order__remove:focus-visible { outline: 2px solid #8ec3ff; outline-offset: 2px; }

/* Textes sous les joueurs (Pro, Semi pro, Createur de contenu, ...) */
.fs-user__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: -4px; max-width: 100%; }
.fs-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(206, 224, 255, .78);
  padding: 3px 6px;
  border: 1px solid rgba(94, 170, 255, .25);
  background: rgba(10, 30, 62, .55);
  white-space: nowrap;
}

/* Agenda / reglement / video / boutons : apparition apres le 1er joueur */
.fs-after { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
.fs-after[hidden] { display: none !important; }
.fs-after.is-in { animation: fsBookingIn .5s cubic-bezier(.22, 1, .36, 1) both; }

@media (max-width: 900px) {
  .fs-order {
    grid-template-columns: 1fr auto 36px;
    grid-template-areas: "head end remove" "players players players";
    row-gap: 12px;
  }
  .fs-order__head { grid-area: head; }
  .fs-order__end { grid-area: end; }
  .fs-order__remove { grid-area: remove; }
  .fs-order__players { grid-area: players; }
}
@media (max-width: 600px) {
  .fs-order__title span { white-space: normal; }
  .fs-order__players { flex-direction: column; gap: 8px; }
  .fs-order__price { font-size: 22px; }
  .fs-tag { font-size: 9px; padding: 2px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-order, .fs-after.is-in, .fs-pack__badge.is-pop { animation: none !important; }
}


/* ============================================================
   13/10/2026 (v4) — CONTENEURS : titre, logo plus petit, offre remontee
   ============================================================ */
/* Logo de classe : plus petit, toujours en haut a gauche. */
.fs-pack > .fs-pack__icon {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  width: clamp(28px, 2.1vw, 34px);
}
.fs-pack__badge { top: 12px; right: 12px; }
/* Titre en haut du conteneur, « Classe N » en dessous. */
.fs-pack__head {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: clamp(30px, 2.6vw, 40px) 30px 0;
  width: 100%;
}
.fs-pack__title {
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  font-size: clamp(22px, 1.75vw, 30px);
  letter-spacing: .05em; line-height: 1;
  text-transform: uppercase;
  color: var(--pk-hi);
  white-space: nowrap;
}
.fs-pack__head .fs-pack__label { color: var(--fs-muted); font-size: clamp(9.5px, .72vw, 11px); }
/* Ronds : un peu moins de place verticale pour remonter l'offre. */
.fs-pack__mid { flex: 0 0 auto; padding: clamp(22px, 2.2vw, 34px) 0 clamp(30px, 2.8vw, 44px); }
/* Offre (sessions + prix + petit texte) remontee sous les ronds. */
.fs-pack__offer { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fs-pack__pnote { font-size: clamp(11px, .82vw, 12.5px); color: var(--fs-muted); letter-spacing: .03em; }
/* Prix / heure + temps tout en bas. */
.fs-pack > .fs-pack__stats { margin-top: auto; }

/* Indication apres clic sur le rectangle grise */
.fs-packs.is-hint .fs-pack { animation: fsPackHint .7s ease; }
@keyframes fsPackHint { 0%, 100% { translate: 0 0; } 40% { translate: 0 -6px; } }

/* ---------- MES CHOIX : ronds utilisateur a droite du rectangle ---------- */
.fs-order { grid-template-columns: minmax(170px, 1fr) auto auto 40px; }
.fs-order__players { justify-content: flex-end; }
/* Rectangle grise toujours affiche en dessous (prochain pack). */
.fs-order--placeholder {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  min-height: 66px;
  border: 1px dashed rgba(206, 224, 255, .2);
  background: rgba(8, 22, 52, .45);
  box-shadow: none;
  color: var(--fs-muted);
  font: inherit; text-align: left;
  filter: grayscale(1);
  opacity: .75;
  animation: none;
}
.fs-order--placeholder:hover { opacity: 1; border-color: rgba(206, 224, 255, .38); }
.fs-order__plus {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  border: 1px dashed rgba(206, 224, 255, .35);
  border-radius: 50% !important;
  color: rgba(206, 224, 255, .65);
}
.fs-order__plus svg { width: 18px; height: 18px; }

/* ---------- POUR BIENTOT ---------- */
.fs-soon { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px); padding-top: clamp(20px, 3vw, 44px); }
.fs-soon__card {
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px);
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2.2vw, 32px);
  border: 1px solid rgba(94, 170, 255, .2);
  background:
    linear-gradient(110deg, rgba(94, 170, 255, .1) 0%, rgba(94, 170, 255, 0) 55%),
    #081634;
}
.fs-soon__icon {
  width: 52px; height: 52px; flex: 0 0 52px;
  display: grid; place-items: center;
  border-radius: 50% !important;
  border: 1px solid rgba(94, 170, 255, .4);
  color: #8ec3ff;
}
.fs-soon__icon svg { width: 26px; height: 26px; }
.fs-soon__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fs-soon__tag {
  align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #04101f; background: #8ec3ff;
  padding: 4px 9px;
}
.fs-soon__desc { margin: 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55; color: rgba(230, 241, 255, .82); }

@media (max-width: 1300px) {
  .fs-pack__title { font-size: 20px; }
}
@media (max-width: 900px) {
  .fs-order { grid-template-columns: 1fr auto 36px; }
  .fs-order__players { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .fs-soon__card { align-items: flex-start; }
  .fs-soon__icon { width: 42px; height: 42px; flex-basis: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-pack__avatar { transition: none !important; }
  .fs-packs.is-hint .fs-pack { animation: none !important; }
}


/* ============================================================
   13/10/2026 (v5)
   - conteneurs : 3 packs en haut (C1, C2, C3), les 2 packs
     decouverte en bas (C4, C5), meme largeur, centres ;
   - ronds utilisateur : fond opaque (on ne voit plus le rond de
     derriere a travers le rond central) ; bonhomme au trait aussi fin
     que le contour du rond ;
   - rectangles « mes choix » : ronds joueurs a gauche, sous le reglement ;
   - plus de video ni de rectangle recapitulatif sous l'agenda ;
   - fleches de l'agenda masquees quand le pack n'a qu'un joueur.
   ============================================================ */

/* (disposition des conteneurs : voir v7 en fin de fichier) */

/* ---------- RONDS UTILISATEUR DES CONTENEURS ---------- */
.fs-pack__avatars { --pk-ring: 3px; }
/* Fond OPAQUE : le rond de derriere ne transparait plus a travers le
   rond central (le degrade de couleur est pose sur un fond plein). */
.fs-pack__avatar {
  background:
    radial-gradient(circle at 32% 26%, rgba(var(--pk-rgb), .38) 0%, rgba(var(--pk-rgb), 0) 60%),
    radial-gradient(circle at 50% 50%, #0d2149 0%, #0d2149 55%, #061230 100%),
    #061230;
  isolation: isolate;
}
.fs-pack__avatar::before { inset: calc(var(--pk-ring) * -1); padding: var(--pk-ring); }
/* Plus de contour noir autour des ronds (seulement le contour de couleur). */
.fs-pack__avatar { box-shadow: 0 10px 22px rgba(1, 7, 25, .28); }
/* Ronds de derriere : on garde l'effet estompe sans transparence (le
   rond central les masque completement la ou ils se chevauchent). */
.fs-pack__avatar[data-pos="right"],
.fs-pack__avatar[data-pos="left"] { opacity: 1; filter: brightness(.42) saturate(.7); }
.fs-pack__avatar[data-pos="center"] { filter: none; }
.fs-pack__avatar {
  transition: translate .9s cubic-bezier(.65, 0, .35, 1), scale .9s cubic-bezier(.65, 0, .35, 1),
              filter .9s ease, opacity .9s ease, transform .42s cubic-bezier(.65, 0, .35, 1) !important;
}
/* Bonhomme : trait identique au contour du rond (3px, quelle que soit
   la taille du rond). */
.fs-pack__avatar svg { opacity: 1; overflow: visible; }
.fs-pack__avatar svg * { vector-effect: non-scaling-stroke; stroke-width: var(--pk-ring); }

/* ---------- MES CHOIX : ronds joueurs a GAUCHE (apres « Classe / Pack ») ---------- */
.fs-order { grid-template-columns: minmax(170px, auto) minmax(0, 1fr) auto 40px; }
.fs-order__players { justify-content: flex-start; }
.fs-order__pslot { white-space: normal; max-width: 280px; }
.fs-order__hours { font-style: normal; font-weight: 600; color: var(--pk-hi); }
.fs-order__pname { max-width: 200px; }
@media (max-width: 900px) {
  .fs-order { grid-template-columns: 1fr auto 36px; }
}

/* ---------- PLUS DE VIDEO : reglement seul sur toute la largeur ---------- */
.fs-info { grid-template-columns: minmax(0, 1fr); }
.fs-video, .fs-summary { display: none !important; }

/* ---------- PANIER + PRIX (sous les rectangles commande) ---------- */
.fs-checkout { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); }
.fs-checkout[hidden] { display: none !important; }

/* ---------- AGENDA : fleches seulement avec 2 joueurs ou plus ---------- */
.fs-switch__btn[hidden] { display: grid; visibility: hidden; pointer-events: none; }

/* Pastille « 2h / 3h » sur un joueur qui a plusieurs sessions dans le pack */
.fs-user__count {
  position: absolute; left: -2%; top: -2%; z-index: 2;
  min-width: 30px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 999px !important;
  font: 800 11.5px/1 var(--font-body, 'Barlow', sans-serif); letter-spacing: .02em;
  color: #040e1e; background: var(--fs-beige);
  box-shadow: 0 0 0 3px #071d38;
}
.fs-switch__name .fs-switch__pos + .fs-switch__pos { color: var(--fs-beige); }

@media (prefers-reduced-motion: reduce) {
  .fs-pack__avatar { transition: none !important; }
}


/* ============================================================
   13/10/2026 (v6)
   - en haut : rectangles « mes choix » a GAUCHE, ronds joueurs a droite ;
   - en dessous : agenda a gauche, reglement a DROITE, meme hauteur
     (haut et bas alignes) ;
   - plus de section « Pour bientot » ;
   - titre « Fan session » : meme graisse que les titres Communaute.
   ============================================================ */
.fs .fs-section-title { font-weight: 700; }

/* Ligne 1 : commandes | joueurs */
.fs-top {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(0, 1.55fr);
  gap: clamp(18px, 2.4vw, 40px);
  align-items: start;
}
.fs-top > .fs-orders { margin: 0; }
.fs-top > .fs-orders[hidden] + .fs-players { grid-column: 1 / -1; }
/* Colonne etroite : le rectangle passe sur 2 lignes
   (classe / prix / croix, puis les ronds joueurs a gauche). */
.fs-top .fs-order {
  grid-template-columns: minmax(0, 1fr) auto 36px;
  grid-template-areas: "head end remove" "players players players";
  row-gap: 12px;
}
.fs-top .fs-order__head { grid-area: head; }
.fs-top .fs-order__end { grid-area: end; }
.fs-top .fs-order__remove { grid-area: remove; }
.fs-top .fs-order__players { grid-area: players; justify-content: flex-start; }
.fs-top .fs-order--placeholder { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: none; }

/* Ligne 2 : agenda | reglement, memes bords haut et bas */
.fs-after {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  align-items: stretch;
}
.fs-after > .fs-agenda { min-width: 0; }
.fs-after > .fs-info { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.fs-after > .fs-info > .fs-rules { flex: 1 1 auto; display: flex; flex-direction: column; }
.fs-after > .fs-info .fs-rules__foot { margin-top: auto; padding-top: 18px; }
.fs-after > .fs-agenda .fs-switch { margin-left: 0; margin-right: auto; max-width: none; }

@media (max-width: 1100px) {
  .fs-top, .fs-after { grid-template-columns: minmax(0, 1fr); }
  .fs-after > .fs-agenda .fs-switch { max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* Plus de section « Pour bientot » */
.fs-soon { display: none !important; }


/* ============================================================
   13/10/2026 (v7)
   - PC (> 1300px) : les 5 conteneurs alignes sur une ligne ;
     tablette (<= 1300px) ET mobile (<= 600px) : 3 en haut, 2 en bas
     (centres, meme largeur) ;
   - conteneurs moins hauts : plus de grand vide entre le texte sous le
     prix et le trait des stats ;
   - fond de la section Fan session : bandes de lumiere diagonales bleues.
   ============================================================ */

/* ---------- CONTENEURS : hauteur au contenu ---------- */
.fs-pack { min-height: 0 !important; }
.fs-pack > .fs-pack__stats { margin-top: clamp(14px, 1.3vw, 20px); }
.fs-pack__mid { padding: clamp(18px, 1.8vw, 28px) 0 clamp(22px, 2.2vw, 34px); }

/* ---------- DISPOSITION ---------- */
/* PC : 5 sur une ligne (regle d'origine : repeat(5, 1fr)). */
@media (max-width: 1300px) {
  .fs-packs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 6px;
    column-gap: clamp(8px, 1.6vw, 18px);
    row-gap: clamp(10px, 1.8vw, 20px);
  }
  .fs-packs > .fs-pack { grid-column: span 2; scroll-snap-align: none; }
  .fs-packs > .fs-pack--4 { grid-column: 2 / span 2; }
  .fs-packs > .fs-pack--5 { grid-column: 4 / span 2; }
  .fs-pack__count { display: none; }
}
/* Mobile : meme 3 + 2, contenu compact pour tenir dans 1/3 d'ecran. */
@media (max-width: 600px) {
  .fs-packs { gap: 8px; column-gap: 8px; row-gap: 10px; padding: 4px 0; }
  .fs-pack { padding: 10px 6px 12px; }
  .fs-pack > .fs-pack__icon { top: 7px; left: 7px; width: 20px; }
  .fs-pack__badge { top: 6px; right: 6px; }
  .fs-pack__head { padding: 26px 2px 0; gap: 3px; }
  .fs-pack__title { font-size: 14px; letter-spacing: .03em; white-space: normal; }
  .fs-pack__head .fs-pack__label { font-size: 8.5px; letter-spacing: .08em; }
  .fs-pack__mid { padding: 14px 0 16px; }
  .fs-pack__avatars { --av: 48px; --pk-ring: 2px; }
  .fs-pack__avatar[data-pos="right"] { translate: 44% 26%; }
  .fs-pack__avatar[data-pos="left"] { translate: -44% 26%; }
  .fs-pack__offer { gap: 4px; }
  .fs-pack__sessions { font-size: 18px; }
  .fs-pack__price { font-size: 20px; }
  .fs-pack__pnote { font-size: 9.5px; line-height: 1.3; }
  .fs-pack > .fs-pack__stats { margin-top: 10px; padding-top: 8px; grid-template-columns: 1fr; row-gap: 6px; }
  .fs-pack__stats > div { padding: 0; gap: 2px; }
  .fs-pack__stats > div + div { border-left: 0; }
  .fs-pack__stats dt { font-size: 8px; letter-spacing: .08em; }
  .fs-pack__stats dd { font-size: 12px; }
}

/* ---------- FOND : bandes de lumiere diagonales (bleu VELRA) ----------
   Un « cadre » de la taille de l'ecran reste colle pendant le defilement
   de la section ; fondu en haut (raccord avec le hero) et en bas. */
.fs { overflow: hidden; overflow: clip; }
.fs > .fs-section-head,
.fs > .fs-packs,
.fs > .fs-booking { position: relative; z-index: 1; }
.fs-bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden; overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 clamp(90px, 12vw, 220px), #000 calc(100% - clamp(90px, 10vw, 180px)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 clamp(90px, 12vw, 220px), #000 calc(100% - clamp(90px, 10vw, 180px)), transparent 100%);
}
.fs-bg__canvas {
  position: sticky; top: 0;
  width: 100%; height: 100vh; height: 100lvh;
  overflow: hidden;
  background: linear-gradient(90deg, #12357c 0%, #0c2865 16%, #09204f 38%, #081c48 52%, #0b2458 66%, #133676 82%, #183f86 100%);
  isolation: isolate;
}
.fs-bg__canvas > i {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w); height: var(--l);
  transform: translate(-50%, -50%) rotate(var(--r, 45deg));
  background: var(--bg);
  filter: blur(var(--b, 12px));
}
/* 1) Lueur verticale a gauche (coeur clair, bords bleu moyen) */
.fs-bg__glow {
  --x: 15%; --y: 50%; --w: 40%; --l: 130%; --r: 0deg; --b: 30px;
  --bg: linear-gradient(90deg,
      rgba(40, 96, 214, .9) 0%, #2a68d8 18%, #3a8cf6 36%, #5cb4ff 50%, #4ea4ff 60%, #2f74e2 74%,
      rgba(36, 92, 210, .45) 88%, rgba(36, 92, 210, 0) 100%);
}
.fs-bg__core {
  --x: 17%; --y: 52%; --w: 9%; --l: 70%; --r: 4deg; --b: 40px;
  --bg: linear-gradient(180deg, rgba(120, 200, 255, 0) 0%, rgba(120, 200, 255, .55) 30%, rgba(140, 210, 255, .6) 70%, rgba(120, 200, 255, 0) 100%);
}
/* 2) Bande sombre qui coupe la lueur en bas (bord net en « / ») */
.fs-bg__d1 {
  --x: 40%; --y: 100%; --w: 15vmax; --l: 130vmax; --b: 10px;
  --bg: linear-gradient(180deg, rgba(7, 24, 64, 0) 0%, rgba(7, 24, 64, 0) 22%, rgba(7, 24, 64, .9) 50%, rgba(8, 28, 72, .9) 100%);
}
/* Bande sombre haute (milieu) */
.fs-bg__d2 {
  --x: 40%; --y: 20%; --w: 13vmax; --l: 220vmax; --b: 22px;
  --bg: rgba(6, 20, 54, .55);
}
/* 3) Point chaud en bas a gauche */
.fs-bg__hot {
  --x: 13%; --y: 100%; --w: 10vmax; --l: 40vmax; --b: 16px;
  --bg: linear-gradient(180deg, rgba(110, 200, 255, 0) 0%, rgba(120, 205, 255, .6) 35%, #9fe6ff 60%, #eafaff 82%, #ffffff 100%);
}
/* 4) Trait fin lumineux en haut a gauche */
.fs-bg__s1 {
  --x: 4.5%; --y: 6%; --w: 2.4vmax; --l: 36vmax; --b: 3px;
  --bg: linear-gradient(180deg, #f2fcff 0%, #a6e8ff 30%, #5cbcff 58%, rgba(60, 140, 255, 0) 100%);
}
/* 5) Traits lumineux en haut a droite + leur trainee */
.fs-bg__s2 {
  --x: 57%; --y: 4%; --w: 2vmax; --l: 22vmax; --b: 5px;
  --bg: linear-gradient(180deg, #bff0ff 0%, #6cc8ff 30%, #2f74e6 70%, rgba(47, 116, 230, 0) 100%);
}
.fs-bg__s3 {
  --x: 68.5%; --y: 3%; --w: 3vmax; --l: 26vmax; --b: 5px;
  --bg: linear-gradient(180deg, #e6faff 0%, #8edcff 24%, #3d8cff 60%, rgba(61, 140, 255, 0) 100%);
}
.fs-bg__t2 {
  --x: 49%; --y: 26%; --w: 6vmax; --l: 50vmax; --b: 16px;
  --bg: linear-gradient(180deg, rgba(60, 130, 235, 0) 0%, rgba(60, 130, 235, .4) 28%, rgba(60, 130, 235, 0) 100%);
}
.fs-bg__t3 {
  --x: 61%; --y: 28%; --w: 9vmax; --l: 60vmax; --b: 20px;
  --bg: linear-gradient(180deg, rgba(70, 140, 245, 0) 0%, rgba(70, 140, 245, .36) 26%, rgba(70, 140, 245, 0) 100%);
}
/* 6) Grande zone claire en « \ » a droite + ombre douce en bas */
.fs-bg__r1 {
  --x: 84%; --y: 46%; --w: 22vmax; --l: 220vmax; --r: -45deg; --b: 34px;
  --bg: rgba(42, 104, 214, .3);
}
.fs-bg__r2 {
  --x: 74%; --y: 96%; --w: 7vmax; --l: 90vmax; --b: 20px;
  --bg: linear-gradient(180deg, rgba(5, 18, 50, 0) 0%, rgba(5, 18, 50, .4) 45%, rgba(5, 18, 50, .4) 100%);
}
/* 7) Bande claire en bas au centre */
.fs-bg__c1 {
  --x: 47%; --y: 100%; --w: 5vmax; --l: 36vmax; --b: 14px;
  --bg: linear-gradient(180deg, rgba(60, 130, 235, 0) 0%, rgba(60, 130, 235, .45) 55%, rgba(60, 130, 235, .2) 100%);
}
/* Mobile (ecran en hauteur) : lueur plus etroite pour garder le contraste. */
@media (max-width: 600px) {
  .fs-bg__glow { --w: 60%; --x: 12%; }
  .fs-bg__core { --w: 14%; --x: 12%; }
}
/* Agenda pose sur le meme panneau que le Reglement (lisible sur le fond
   lumineux, memes bords haut et bas). */
.fs-after > .fs-agenda {
  background: var(--fs-surface);
  clip-path: var(--fs-clip);
  -webkit-clip-path: var(--fs-clip);
  padding: clamp(16px, 2vw, 28px);
  box-shadow: inset 0 1px 0 rgba(94, 170, 255, .1);
}
/* Rectangle « Ajouter un autre pack » : fond plein sur le nouveau fond. */
.fs-order--placeholder { background: rgba(6, 17, 43, .92); opacity: .9; }


/* ============================================================
   13/10/2026 (v8)
   - agenda + reglement : UN SEUL conteneur (plus de « 02 ») ;
   - agenda : case choisie BLEUE ;
   - conteneurs de classe : trait en haut ET en bas ; selection sans
     trait noir fin (is-chosen n'ecrase plus la bordure active) ; petit
     rond du nombre de packs sans contour noir ni lueur ;
   - fond : version propre (bleu profond, bandes diagonales, fins traits
     lumineux) raccordee au hero.
   ============================================================ */

/* ---------- AGENDA + REGLEMENT : un seul panneau ---------- */
.fs-after {
  background: var(--fs-surface);
  clip-path: var(--fs-clip);
  -webkit-clip-path: var(--fs-clip);
  padding: clamp(16px, 2vw, 28px);
  box-shadow: inset 0 1px 0 rgba(94, 170, 255, .1);
  gap: 0;
  align-items: stretch;
}
.fs-after > .fs-agenda {
  background: none;
  clip-path: none;
  -webkit-clip-path: none;
  padding: 0 clamp(18px, 2.4vw, 36px) 0 0;
  box-shadow: none;
}
.fs-after > .fs-info {
  height: auto;
  padding-left: clamp(18px, 2.4vw, 36px);
  border-left: 1px solid var(--fs-line);
}
.fs-after > .fs-info > .fs-rules {
  background: none;
  clip-path: none;
  -webkit-clip-path: none;
  padding: 0;
  box-shadow: none;
}
.fs-rules .fs-step { display: none !important; }
.fs-rules .fs-panel__title { gap: 0; }
@media (max-width: 1100px) {
  .fs-after > .fs-agenda { padding: 0 0 clamp(18px, 2.4vw, 28px); }
  .fs-after > .fs-info {
    padding: clamp(18px, 2.4vw, 28px) 0 0;
    border-left: 0;
    border-top: 1px solid var(--fs-line);
  }
}

/* ---------- AGENDA : case choisie en bleu ---------- */
.fs-cell.is-picked,
.fs-cell.is-picked:not(:disabled):hover {
  background: var(--accent2, #3d8bfd);
  box-shadow: inset 0 0 0 1px var(--accent-soft, #8ec3ff), 0 0 0 2px rgba(94, 170, 255, .28);
}
.fs-cell.is-picked-other { box-shadow: inset 0 0 0 2px rgba(94, 170, 255, .6); }
.fs-counter.is-complete b { color: var(--accent-soft, #8ec3ff); }
.fs-user.is-selected .fs-avatar {
  box-shadow: inset 0 0 0 2px var(--accent-soft, #8ec3ff), 0 0 0 4px rgba(94, 170, 255, .16), 0 14px 26px rgba(1, 7, 25, .45);
}
.fs-user.is-selected .fs-user__name { color: var(--accent-soft, #8ec3ff); }
.fs-check { background: rgba(61, 139, 253, .95); color: #fff; }
.fs-user__count { color: #04101f; background: var(--accent-soft, #8ec3ff); }
.fs-order__pslot { color: var(--accent-soft, #8ec3ff); }
.fs-switch__name .fs-switch__pos + .fs-switch__pos { color: var(--accent-soft, #8ec3ff); }
.fs-hint.is-ready { color: var(--accent-soft, #8ec3ff); }

/* ---------- CONTENEURS : trait haut + trait bas ---------- */
.fs-pack,
.fs-pack.is-chosen {
  box-shadow: inset 0 3px 0 var(--pk), inset 0 -3px 0 var(--pk), 0 14px 34px rgba(1, 7, 25, .35);
}
/* Selection : bordure pleine (prioritaire sur is-chosen -> plus de trait
   noir fin entre la bordure et le trait du haut), pas d'anneau exterieur. */
.fs-pack.is-active,
.fs-pack.is-chosen.is-active {
  border-color: var(--pk-hi);
  box-shadow: inset 0 3px 0 var(--pk-hi), inset 0 -3px 0 var(--pk-hi), 0 18px 44px rgba(var(--pk-rgb), .22);
}
/* Petit rond du nombre de packs : ni contour noir, ni lueur. */
.fs-pack__badge,
.fs-pack.is-active .fs-pack__badge { box-shadow: none !important; }

/* ---------- FOND : propre, bleu profond + bandes diagonales + traits fins ---------- */
.fs {
  background-color: #08205c;
  background-image: linear-gradient(180deg, #08205c 0%, #061a4e 42%, #04112f 100%);
}
/* Le hero se termine exactement sur la couleur du haut de la section
   (meme principe que la page Communaute). */
.sv-hero { background: #030814; }
.sv-hero__bg { background: linear-gradient(180deg, #030814 0%, #061a46 55%, #08205c 100%); }
.sv-tabs { border-bottom-color: rgba(120, 170, 255, .16); }

.fs-bg {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 clamp(70px, 9vw, 160px), #000 calc(100% - clamp(90px, 10vw, 180px)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 clamp(70px, 9vw, 160px), #000 calc(100% - clamp(90px, 10vw, 180px)), transparent 100%);
}
.fs-bg__canvas {
  background:
    /* bandes diagonales (sombres / bleu moyen), bords nets */
    linear-gradient(-14deg,
      rgba(2, 7, 26, 0) 0%,
      rgba(2, 7, 30, .72) 12%, rgba(2, 7, 30, .72) 20%, rgba(2, 7, 26, 0) 20.4%,
      rgba(40, 110, 255, .32) 20.4%, rgba(40, 110, 255, .08) 32%, rgba(2, 7, 26, 0) 36%,
      rgba(2, 7, 30, .82) 36.4%, rgba(2, 7, 30, .82) 48%, rgba(2, 7, 26, 0) 48.4%,
      rgba(45, 115, 255, .34) 48.4%, rgba(45, 115, 255, .08) 60%, rgba(2, 7, 26, 0) 64%,
      rgba(2, 7, 30, .76) 64.4%, rgba(2, 7, 30, .76) 74%, rgba(2, 7, 26, 0) 74.4%,
      rgba(50, 120, 255, .3) 74.4%, rgba(50, 120, 255, .06) 86%, rgba(2, 7, 26, 0) 100%),
    /* lumiere bleue vive en haut a droite, bleu profond en bas a gauche */
    radial-gradient(ellipse 60% 70% at 100% 0%, #2468ff 0%, rgba(36, 104, 255, .6) 30%, rgba(36, 104, 255, 0) 68%),
    radial-gradient(ellipse 50% 60% at 0% 100%, #0b2f98 0%, rgba(11, 47, 152, 0) 60%),
    linear-gradient(180deg, #08205c 0%, #0a2c86 45%, #0b3297 100%);
}
/* Traits fins lumineux le long des bords de bandes (4 traits) + 3 eclats. */
.fs-bg__canvas > i { display: none; }
.fs-bg__canvas > .fs-bg__s1,
.fs-bg__canvas > .fs-bg__s2,
.fs-bg__canvas > .fs-bg__s3,
.fs-bg__canvas > .fs-bg__c1 {
  display: block;
  position: absolute;
  left: 50%; top: var(--y);
  width: 160vmax; height: 2px;
  transform: translate(-50%, -50%) rotate(-14deg);
  filter: none;
  background: linear-gradient(90deg,
    rgba(120, 200, 255, 0) 0%, rgba(120, 200, 255, .55) 22%, #bfe9ff 48%, rgba(120, 200, 255, .55) 74%, rgba(120, 200, 255, 0) 100%);
  box-shadow: 0 0 10px rgba(110, 190, 255, .55), 0 0 26px rgba(60, 140, 255, .35);
  opacity: .9;
}
.fs-bg__canvas > .fs-bg__s1 { --y: 20%; }
.fs-bg__canvas > .fs-bg__s2 { --y: 36%; height: 1px; opacity: .55; }
.fs-bg__canvas > .fs-bg__s3 { --y: 64%; }
.fs-bg__canvas > .fs-bg__c1 { --y: 86%; height: 1px; opacity: .6; }
.fs-bg__canvas > .fs-bg__hot,
.fs-bg__canvas > .fs-bg__core,
.fs-bg__canvas > .fs-bg__glow {
  display: block;
  position: absolute;
  left: var(--x); top: var(--y);
  width: 120px; height: 120px;
  transform: translate(-50%, -50%);
  filter: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(160, 220, 255, .55) 6%, rgba(90, 170, 255, 0) 22%),
    linear-gradient(90deg, rgba(190, 230, 255, 0) 0%, rgba(190, 230, 255, .9) 50%, rgba(190, 230, 255, 0) 100%) 50% 50% / 100% 1.5px no-repeat,
    linear-gradient(0deg, rgba(190, 230, 255, 0) 0%, rgba(190, 230, 255, .9) 50%, rgba(190, 230, 255, 0) 100%) 50% 50% / 1.5px 100% no-repeat;
  opacity: .95;
}
.fs-bg__canvas > .fs-bg__hot  { --x: 66%; --y: 8%; }
.fs-bg__canvas > .fs-bg__core { --x: 6%;  --y: 50%; width: 90px; height: 90px; }
.fs-bg__canvas > .fs-bg__glow { --x: 80%; --y: 92%; width: 80px; height: 80px; }
@media (max-width: 600px) {
  .fs-bg__canvas > .fs-bg__s1, .fs-bg__canvas > .fs-bg__s2, .fs-bg__canvas > .fs-bg__s3, .fs-bg__canvas > .fs-bg__c1 { transform: translate(-50%, -50%) rotate(-22deg); }
  .fs-bg__canvas { background-image:
    linear-gradient(-22deg,
      rgba(2, 7, 26, 0) 0%, rgba(2, 7, 30, .72) 12%, rgba(2, 7, 30, .72) 20%, rgba(2, 7, 26, 0) 20.4%,
      rgba(40, 110, 255, .32) 20.4%, rgba(40, 110, 255, .08) 32%, rgba(2, 7, 26, 0) 36%,
      rgba(2, 7, 30, .82) 36.4%, rgba(2, 7, 30, .82) 48%, rgba(2, 7, 26, 0) 48.4%,
      rgba(45, 115, 255, .34) 48.4%, rgba(45, 115, 255, .08) 60%, rgba(2, 7, 26, 0) 64%,
      rgba(2, 7, 30, .76) 64.4%, rgba(2, 7, 30, .76) 74%, rgba(2, 7, 26, 0) 74.4%,
      rgba(50, 120, 255, .3) 74.4%, rgba(50, 120, 255, .06) 86%, rgba(2, 7, 26, 0) 100%),
    radial-gradient(ellipse 70% 50% at 100% 0%, #2468ff 0%, rgba(36, 104, 255, .6) 30%, rgba(36, 104, 255, 0) 68%),
    radial-gradient(ellipse 70% 50% at 0% 100%, #0b2f98 0%, rgba(11, 47, 152, 0) 60%),
    linear-gradient(180deg, #08205c 0%, #0a2c86 45%, #0b3297 100%); }
}
/* Les surfaces posees sur ce fond restent lisibles. */
.fs-order--placeholder { background: rgba(6, 17, 43, .92); }



/* ============================================================
   14/10/2026 (v9)
   - conteneurs : trait du haut a droite (du bord droit jusqu'au milieu,
     termine en pente, meme epaisseur) + meme trait en bas a droite ;
     fondu du bas = couleur de la classe assombrie ; plus de lueur sous
     l'image de classe ; contour + survol BLEUS a la selection ; bande
     du bas (Prix / heure | Session) pleine largeur, couleurs de la classe ;
   - ronds utilisateur : contour + bonhomme plus fins, plus de lueur ;
   - reservation : ronds joueurs a GAUCHE, rectangles commande a DROITE ;
   - agenda : nom du joueur a gauche + « Semaine du 13-19 » a droite,
     au centre ; numero du jour sous chaque jour ;
   - mini rectangles sous la description ; conteneurs plus bas ;
   - fond : plus net, plus fonce, bandes proches du fond, bandes qui
     MONTENT en continu, etoiles (4 branches) posees sur les bandes.
   ============================================================ */

/* ---------- COULEURS SOMBRES DES CLASSES (fondu du bas) ---------- */
.fs-pack--1, .fs-order--1 { --pk-dk2: #1a2150; --pk-dk: #0b0f2c; }
.fs-pack--2, .fs-order--2 { --pk-dk2: #3d1733; --pk-dk: #1b0915; }
.fs-pack--3, .fs-order--3 { --pk-dk2: #3a2f19; --pk-dk: #19130a; }
.fs-pack--4, .fs-order--4 { --pk-dk2: #3c2515; --pk-dk: #1a0f08; }
.fs-pack--5, .fs-order--5 { --pk-dk2: #133c2f; --pk-dk: #071a13; }

/* ---------- CONTENEURS DE CLASSE ---------- */
.fs-pack {
  --pk-pt: clamp(16px, 1.4vw, 22px);
  --pk-px: clamp(12px, 1.2vw, 18px);
  --pk-pb: clamp(18px, 1.6vw, 24px);
  --pk-line: var(--pk);
  padding: var(--pk-pt) var(--pk-px) var(--pk-pb);
  background:
    radial-gradient(ellipse 95% 50% at 50% 40%, rgba(var(--pk-rgb), .14) 0%, rgba(var(--pk-rgb), 0) 72%),
    linear-gradient(180deg, rgba(var(--pk-rgb), .26) 0%, rgba(var(--pk-rgb), .08) 36%, rgba(var(--pk-rgb), 0) 62%),
    linear-gradient(180deg, var(--pk-dk2) 0%, var(--pk-dk) 100%);
}
/* Plus de traits pleine largeur (box-shadow inset) : remplaces par les
   traits a droite ci-dessous. On garde l'ombre portee. */
.fs-pack,
.fs-pack.is-chosen { box-shadow: 0 14px 34px rgba(1, 7, 25, .35); }

/* Traits a droite : du bord droit jusqu'au MILIEU, termines en pente
   (45deg, meme epaisseur 3px que le trait du haut). Haut + bas. */
.fs-pack::before,
.fs-pack::after {
  content: "";
  position: absolute; left: 50%; right: 0; z-index: 2;
  height: 15px;
  background: var(--pk-line);
  pointer-events: none;
  transition: background-color .25s ease;
}
.fs-pack::before {
  top: 0;
  -webkit-clip-path: polygon(100% 0, 10px 0, 0 10px, 0 14.25px, 11.25px 3px, 100% 3px);
  clip-path: polygon(100% 0, 10px 0, 0 10px, 0 14.25px, 11.25px 3px, 100% 3px);
}
.fs-pack::after {
  bottom: 0;
  -webkit-clip-path: polygon(100% 100%, 10px 100%, 0 calc(100% - 10px), 0 calc(100% - 14.25px), 11.25px calc(100% - 3px), 100% calc(100% - 3px));
  clip-path: polygon(100% 100%, 10px 100%, 0 calc(100% - 10px), 0 calc(100% - 14.25px), 11.25px calc(100% - 3px), 100% calc(100% - 3px));
}

/* Image de classe (haut gauche) : plus de lueur. */
.fs .fs-pack__icon,
.fs .fs-pack > .fs-pack__icon { filter: none !important; }

/* Survol : contour BLEU. */
@media (hover: hover) {
  .fs-pack:hover,
  .fs-pack.is-chosen:hover { border-color: var(--accent, #5eaaff); }
}
/* Selection : contour BLEU (survol identique), traits en couleur vive. */
.fs-pack.is-active,
.fs-pack.is-chosen.is-active,
.fs-pack.is-active:hover {
  --pk-line: var(--pk-hi);
  border-color: var(--accent, #5eaaff);
  box-shadow: 0 18px 44px rgba(61, 139, 253, .2);
}
.fs-pack.is-active:focus-visible { outline-color: var(--accent-soft, #8ec3ff); }

/* Bande du bas (Prix / heure | Session) : toujours pleine largeur (pas de
   saut de mise en page a la selection) ; trait fin au repos, bande
   coloree a la selection. */
.fs-pack > .fs-pack__stats {
  position: relative; z-index: 1;
  width: auto;
  align-self: stretch;
  margin: clamp(14px, 1.3vw, 20px) calc(var(--pk-px) * -1) calc(var(--pk-pb) * -1);
  padding: 12px var(--pk-px) var(--pk-pb);
  border-top: 0;
  background:
    linear-gradient(rgba(var(--pk-rgb), .25), rgba(var(--pk-rgb), .25)) var(--pk-px) 0 / calc(100% - var(--pk-px) * 2) 1px no-repeat;
  transition: background-color .25s ease;
}
.fs-pack.is-active > .fs-pack__stats {
  background:
    linear-gradient(var(--pk-hi), var(--pk-hi)) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(var(--pk-rgb), .2) 0 50%, rgba(var(--pk-rgb), .36) 50% 100%);
}
.fs-pack.is-active .fs-pack__stats > div + div { border-left-color: rgba(var(--pk-rgb), .45); }
.fs-pack.is-active .fs-pack__stats dt { color: rgba(240, 246, 255, .78); }

/* ---------- RONDS UTILISATEUR (conteneurs) : plus fins, sans lueur ---------- */
.fs-pack__avatars { --pk-ring: 1.5px; }
.fs-pack__avatar {
  background: var(--pk-dk2, #0d2149);
}
/* Ronds joueurs (reservation) : contour plus fin, fond uni. */
.fs-avatar {
  background: #0b2146;
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .45), 0 10px 22px rgba(1, 7, 25, .35);
}
@media (hover: hover) {
  .fs-user:hover .fs-avatar { box-shadow: inset 0 0 0 1px rgba(142, 195, 255, .85), 0 14px 26px rgba(1, 7, 25, .45); }
}
.fs-user.is-selected .fs-avatar {
  box-shadow: inset 0 0 0 1.5px var(--accent-soft, #8ec3ff), 0 0 0 4px rgba(94, 170, 255, .16), 0 14px 26px rgba(1, 7, 25, .45);
}
.fs-order .fs-avatar { box-shadow: inset 0 0 0 1px rgba(var(--pk-rgb), .55); }

/* ---------- TITRE + DESCRIPTION + MINI RECTANGLES ---------- */
.fs > .fs-section-head { margin-bottom: clamp(18px, 3vw, 44px); }
.fs-highlights {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  margin: clamp(16px, 1.8vw, 24px) auto 0;
  padding: 0;
  list-style: none;
}
.fs-highlights li {
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 11px; font-weight: 700; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(214, 232, 255, .86);
  padding: 8px 12px;
  border: 1px solid rgba(94, 170, 255, .3);
  background: #0a1b40;
  white-space: nowrap;
}

/* ---------- RESERVATION : ronds joueurs a GAUCHE, commandes a DROITE ---------- */
.fs-top { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); }
.fs-top > .fs-players { grid-column: 1; grid-row: 1; }
.fs-top > .fs-orders { grid-column: 2; grid-row: 1; }
.fs-top:has(> .fs-orders[hidden]) > .fs-players { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .fs-top { grid-template-columns: minmax(0, 1fr); }
  .fs-top > .fs-players,
  .fs-top > .fs-orders { grid-column: 1; grid-row: auto; }
}

/* ---------- AGENDA : nom a gauche + semaine a droite, au centre ---------- */
.fs-switch,
.fs-after > .fs-agenda .fs-switch {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  max-width: none; margin: 0 0 clamp(16px, 1.8vw, 24px);
}
.fs-switch__mid {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px clamp(12px, 1.6vw, 22px);
  min-width: 0;
}
.fs-switch__mid > .fs-switch__name { flex: 0 1 auto; justify-content: flex-start; text-align: left; }
.fs-switch__sep { flex: 0 0 1px; width: 1px; height: 26px; background: rgba(94, 170, 255, .3); }
.fs-switch__week {
  margin: 0;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 12px; font-weight: 700; line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fs-muted);
  white-space: nowrap;
}
.fs-switch__week b { font-weight: 700; color: var(--accent-soft, #8ec3ff); letter-spacing: .08em; }
@media (max-width: 1100px) {
  .fs-after > .fs-agenda .fs-switch { max-width: none; margin-left: 0; margin-right: 0; }
}
/* Jours + numero du jour */
.fs-cal__day { gap: 6px; }
.fs-cal__dnum { font-size: 11px; letter-spacing: .04em; color: var(--accent-soft, #8ec3ff); }
@media (max-width: 1300px) {
  .fs-cal__day { gap: 4px; font-size: 11px; }
  .fs-cal__dnum { font-size: 10px; }
}

/* ---------- FOND : net, fonce, bandes proches du fond, bandes MONTANTES ---------- */
body.services-page { background: #061430; }
.fs { background-color: #061430; background-image: none; }
.sv-hero__bg { background: linear-gradient(180deg, #030814 0%, #05112a 55%, #061430 100%); }
.fs-bg__canvas { background: #061430; }
.fs-bg__canvas > i { display: none !important; }
.fs-bg__rot {
  position: absolute; left: 50%; top: 50%;
  width: 120vmax; height: 120vmax;
  transform: translate(-50%, -50%) rotate(-14deg);
}
/* Une periode = 720px : bandes nettes (bords francs, aucun flou), traits
   fins sur les bords, etoiles posees sur ces traits (elles montent avec
   les bandes : meme calque). */
.fs-bg__bands {
  position: absolute; left: 0; top: 0;
  width: 100%; height: calc(100% + 720px);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='720' viewBox='0 0 1400 720'%3E%3Cg fill='%23e8f6ff'%3E%3Cg transform='translate(180 230) rotate(14) scale(0.46) translate(-50 -50)' opacity='1'%3E%3Cpath d='M53.39 53.39 Q60.88 40.34 96.67 3.33 Q59.66 39.12 46.61 46.61ZM46.61 46.61 Q39.12 59.66 3.33 96.67 Q40.34 60.88 53.39 53.39ZM53.11 46.89 Q45.27 44.15 25.96 25.96 Q44.15 45.27 46.89 53.11ZM46.89 53.11 Q54.73 55.85 74.04 74.04 Q55.85 54.73 53.11 46.89Z'/%3E%3Ccircle cx='50' cy='50' r='6.2'/%3E%3C/g%3E%3Cg transform='translate(760 230) rotate(14) scale(0.22) translate(-50 -50)' opacity='0.9'%3E%3Cpath d='M53.39 53.39 Q60.88 40.34 96.67 3.33 Q59.66 39.12 46.61 46.61ZM46.61 46.61 Q39.12 59.66 3.33 96.67 Q40.34 60.88 53.39 53.39ZM53.11 46.89 Q45.27 44.15 25.96 25.96 Q44.15 45.27 46.89 53.11ZM46.89 53.11 Q54.73 55.85 74.04 74.04 Q55.85 54.73 53.11 46.89Z'/%3E%3Ccircle cx='50' cy='50' r='6.2'/%3E%3C/g%3E%3Cg transform='translate(1130 520) rotate(14) scale(0.32) translate(-50 -50)' opacity='0.95'%3E%3Cpath d='M53.39 53.39 Q60.88 40.34 96.67 3.33 Q59.66 39.12 46.61 46.61ZM46.61 46.61 Q39.12 59.66 3.33 96.67 Q40.34 60.88 53.39 53.39ZM53.11 46.89 Q45.27 44.15 25.96 25.96 Q44.15 45.27 46.89 53.11ZM46.89 53.11 Q54.73 55.85 74.04 74.04 Q55.85 54.73 53.11 46.89Z'/%3E%3Ccircle cx='50' cy='50' r='6.2'/%3E%3C/g%3E%3Cg transform='translate(430 520) rotate(14) scale(0.18) translate(-50 -50)' opacity='0.8'%3E%3Cpath d='M53.39 53.39 Q60.88 40.34 96.67 3.33 Q59.66 39.12 46.61 46.61ZM46.61 46.61 Q39.12 59.66 3.33 96.67 Q40.34 60.88 53.39 53.39ZM53.11 46.89 Q45.27 44.15 25.96 25.96 Q44.15 45.27 46.89 53.11ZM46.89 53.11 Q54.73 55.85 74.04 74.04 Q55.85 54.73 53.11 46.89Z'/%3E%3Ccircle cx='50' cy='50' r='6.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2300' height='720' viewBox='0 0 2300 720'%3E%3Cg fill='%23e8f6ff'%3E%3Cg transform='translate(1620 230) rotate(14) scale(0.32) translate(-50 -50)' opacity='0.95'%3E%3Cpath d='M53.39 53.39 Q60.88 40.34 96.67 3.33 Q59.66 39.12 46.61 46.61ZM46.61 46.61 Q39.12 59.66 3.33 96.67 Q40.34 60.88 53.39 53.39ZM53.11 46.89 Q45.27 44.15 25.96 25.96 Q44.15 45.27 46.89 53.11ZM46.89 53.11 Q54.73 55.85 74.04 74.04 Q55.85 54.73 53.11 46.89Z'/%3E%3Ccircle cx='50' cy='50' r='6.2'/%3E%3C/g%3E%3Cg transform='translate(300 520) rotate(14) scale(0.26) translate(-50 -50)' opacity='0.9'%3E%3Cpath d='M53.39 53.39 Q60.88 40.34 96.67 3.33 Q59.66 39.12 46.61 46.61ZM46.61 46.61 Q39.12 59.66 3.33 96.67 Q40.34 60.88 53.39 53.39ZM53.11 46.89 Q45.27 44.15 25.96 25.96 Q44.15 45.27 46.89 53.11ZM46.89 53.11 Q54.73 55.85 74.04 74.04 Q55.85 54.73 53.11 46.89Z'/%3E%3Ccircle cx='50' cy='50' r='6.2'/%3E%3C/g%3E%3Cg transform='translate(1980 520) rotate(14) scale(0.16) translate(-50 -50)' opacity='0.75'%3E%3Cpath d='M53.39 53.39 Q60.88 40.34 96.67 3.33 Q59.66 39.12 46.61 46.61ZM46.61 46.61 Q39.12 59.66 3.33 96.67 Q40.34 60.88 53.39 53.39ZM53.11 46.89 Q45.27 44.15 25.96 25.96 Q44.15 45.27 46.89 53.11ZM46.89 53.11 Q54.73 55.85 74.04 74.04 Q55.85 54.73 53.11 46.89Z'/%3E%3Ccircle cx='50' cy='50' r='6.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(180deg,
      #061430 0 230px,
      #4a74a8 230px 231px,
      #091a3e 231px 380px,
      #061430 380px 520px,
      #29466e 520px 521px,
      #040f29 521px 640px,
      #061430 640px 720px);
  background-size: 1400px 720px, 2300px 720px, 100% 720px;
  background-repeat: repeat;
  backface-visibility: hidden;
  will-change: transform;
  animation: fsBandsRise 46s linear infinite;
}
@keyframes fsBandsRise {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -720px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fs-bg__bands { animation: none !important; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {
  .fs-pack { --pk-pt: 10px; --pk-px: 6px; --pk-pb: 12px; }
  .fs-pack::before, .fs-pack::after { height: 11px; }
  .fs-pack::before {
    -webkit-clip-path: polygon(100% 0, 7px 0, 0 7px, 0 9.8px, 8.2px 2px, 100% 2px);
    clip-path: polygon(100% 0, 7px 0, 0 7px, 0 9.8px, 8.2px 2px, 100% 2px);
  }
  .fs-pack::after {
    -webkit-clip-path: polygon(100% 100%, 7px 100%, 0 calc(100% - 7px), 0 calc(100% - 9.8px), 8.2px calc(100% - 2px), 100% calc(100% - 2px));
    clip-path: polygon(100% 100%, 7px 100%, 0 calc(100% - 7px), 0 calc(100% - 9.8px), 8.2px calc(100% - 2px), 100% calc(100% - 2px));
  }
  .fs-pack__avatars { --pk-ring: 1px; }
  .fs-pack > .fs-pack__stats { margin-top: 10px; padding-top: 12px; padding-bottom: 12px; }
  .fs-pack.is-active > .fs-pack__stats {
    background:
      linear-gradient(var(--pk-hi), var(--pk-hi)) 0 0 / 100% 1px no-repeat,
      linear-gradient(180deg, rgba(var(--pk-rgb), .2) 0 50%, rgba(var(--pk-rgb), .36) 50% 100%);
  }
  .fs-highlights { gap: 6px; }
  .fs-highlights li { font-size: 9.5px; padding: 6px 9px; letter-spacing: .1em; }
  .fs-switch__sep { height: 20px; }
  .fs-switch__week { font-size: 10.5px; letter-spacing: .1em; }
  .fs-cal__day { flex-direction: column; gap: 2px; }
  .fs-cal__dnum { font-size: 9.5px; }
}


/* ============================================================
   14/10/2026 (v10)
   - conteneurs : trait du haut ET du bas sur toute la largeur + 2 traits
     de moitie (haut gauche, bas droite) qui s'arretent au milieu en
     pente ; bande du bas d'une seule couleur, trait du haut de la bande
     = couleur + epaisseur du contour ; plus d'ombre ni de lueur ;
   - pseudo du joueur en petit sous les ronds (« Nom » en presentation) ;
   - fond commun : Premium (C1 + C2) | Meilleure offre (C3 + C4 + C5) ;
   - reglement juste sous les conteneurs (« Choisissez d'abord une
     session ») ; agenda seul dans son panneau ;
   - rectangles commande : animation d'apparition seulement a l'ajout ;
   - boutons pleins (plus transparents) ; sous-total au-dessus ;
   - joueurs : « − » pour retirer une session, pastille « ×2 » ;
   - fond : fixe a l'ecran (plus de saut quand la page s'allonge).
   ============================================================ */

/* ---------- GROUPES DE CONTENEURS ---------- */
.fs > .fs-packs {
  --pg-gap: clamp(10px, 1.1vw, 18px);
  --pg-pad: clamp(10px, 1vw, 16px);
  display: flex; flex-direction: row; align-items: stretch;
  gap: clamp(14px, 1.6vw, 26px);
  overflow: visible;
  padding: 0;
}
.fs-pgroup {
  position: relative;
  flex: 2 1 0;
  min-width: 0;
  display: flex; flex-direction: column;
  padding: 0 var(--pg-pad) var(--pg-pad);
  background: #081a3d;
  border: 1px solid rgba(167, 139, 250, .26);
}
.fs-pgroup--best {
  flex-grow: 3;
  background: #0b2a66;
  border-color: rgba(94, 170, 255, .6);
}
.fs-pgroup__tag {
  align-self: center;
  margin: 12px 0;
  padding: 7px 14px;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 11.5px; font-weight: 700; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--fs-beige, #a78bfa);
  background: #1b2333;
  border: 1px solid rgba(167, 139, 250, .5);
}
.fs-pgroup--best .fs-pgroup__tag {
  color: #04101f;
  background: var(--accent-soft, #8ec3ff);
  border-color: var(--accent-soft, #8ec3ff);
}
.fs-pgroup__cards {
  flex: 1 1 auto;
  display: grid; align-items: stretch;
  gap: var(--pg-gap);
}
.fs-pgroup__cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-pgroup__cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-pgroup .fs-pack { grid-column: auto !important; }
@media (max-width: 1300px) {
  .fs > .fs-packs { flex-direction: column; }
  .fs-pgroup { flex: 0 0 auto; }
  /* Premium centre, conteneurs de meme largeur que ceux du dessous. */
  .fs-pgroup--premium {
    align-self: center;
    width: calc((100% - 2 * var(--pg-pad) - 2 * var(--pg-gap)) / 3 * 2 + var(--pg-gap) + 2 * var(--pg-pad));
  }
}
@media (max-width: 600px) {
  .fs > .fs-packs { --pg-gap: 8px; --pg-pad: 6px; gap: 12px; }
  .fs-pgroup__tag { margin: 8px 0; padding: 5px 10px; font-size: 9.5px; letter-spacing: .12em; }
}

/* ---------- CONTENEURS : contour, traits, bande ---------- */
.fs .fs-packs .fs-pack {
  --pk-bd: rgba(var(--pk-rgb), .38);
  border-color: var(--pk-bd);
  border-top-color: var(--pk-line);
  border-bottom-color: var(--pk-line);
  box-shadow: none;
}
.fs .fs-packs .fs-pack.is-chosen { --pk-bd: rgba(var(--pk-rgb), .62); }
@media (hover: hover) {
  .fs .fs-packs .fs-pack:hover { --pk-bd: var(--accent, #5eaaff); box-shadow: none; }
}
.fs .fs-packs .fs-pack.is-active,
.fs .fs-packs .fs-pack.is-active:hover {
  --pk-bd: var(--accent, #5eaaff);
  --pk-line: var(--pk-hi);
  box-shadow: none;
}
/* Trait du haut pleine largeur (2px + 1px de bordure = 3px) + trait de
   moitie a GAUCHE, juste en dessous, qui s'arrete au milieu en pente
   (45deg) et rejoint le trait du haut. Meme chose en bas, a DROITE. */
.fs .fs-packs .fs-pack::before,
.fs .fs-packs .fs-pack::after {
  left: 0; right: 0;
  height: 8px;
}
.fs .fs-packs .fs-pack::before {
  top: 0; bottom: auto;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 2px, calc(50% + 4.24px) 2px, calc(50% - 1.76px) 8px, 0 8px, 0 5px, calc(50% - 3px) 5px, 50% 2px, 0 2px);
  clip-path: polygon(0 0, 100% 0, 100% 2px, calc(50% + 4.24px) 2px, calc(50% - 1.76px) 8px, 0 8px, 0 5px, calc(50% - 3px) 5px, 50% 2px, 0 2px);
}
.fs .fs-packs .fs-pack::after {
  top: auto; bottom: 0;
  -webkit-clip-path: polygon(100% 100%, 0 100%, 0 calc(100% - 2px), calc(50% - 4.24px) calc(100% - 2px), calc(50% + 1.76px) 0, 100% 0, 100% 3px, calc(50% + 3px) 3px, 50% calc(100% - 2px), 100% calc(100% - 2px));
  clip-path: polygon(100% 100%, 0 100%, 0 calc(100% - 2px), calc(50% - 4.24px) calc(100% - 2px), calc(50% + 1.76px) 0, 100% 0, 100% 3px, calc(50% + 3px) 3px, 50% calc(100% - 2px), 100% calc(100% - 2px));
}
/* Bande du bas : trait du haut = couleur et epaisseur (1px) du contour ;
   au survol / a la selection, UNE seule couleur (gauche = droite). */
.fs .fs-packs .fs-pack > .fs-pack__stats {
  background: linear-gradient(var(--pk-bd), var(--pk-bd)) 0 0 / 100% 1px no-repeat;
}
.fs .fs-packs .fs-pack.is-active > .fs-pack__stats {
  background:
    linear-gradient(var(--pk-bd), var(--pk-bd)) 0 0 / 100% 1px no-repeat,
    rgba(var(--pk-rgb), .2);
}
@media (hover: hover) {
  .fs .fs-packs .fs-pack:hover > .fs-pack__stats {
    background:
      linear-gradient(var(--pk-bd), var(--pk-bd)) 0 0 / 100% 1px no-repeat,
      rgba(var(--pk-rgb), .2);
  }
}
/* Plus de lueur ni d'ombre (conteneurs, ronds, image de classe). */
.fs .fs-packs .fs-pack__avatar { box-shadow: none; }
.fs .fs-packs .fs-pack__icon { filter: none !important; }

/* ---------- PSEUDO DU JOUEUR SOUS LES RONDS ---------- */
.fs .fs-packs .fs-pack__mid {
  --pk-av: clamp(80px, 6.6vw, 114px);
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: clamp(14px, 1.4vw, 22px);
}
.fs .fs-packs .fs-pack__avatars { --av: var(--pk-av); flex: 0 0 auto; }
.fs-pack__pseudo {
  display: block;
  max-width: 90%;
  min-height: 1.25em;
  margin-top: 12px;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 11px; font-weight: 600; line-height: 1.25;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pk-hi);
  opacity: .82;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .2s ease;
}
.fs-pack__pseudo.is-swap { opacity: 0; }
/* 2 ou 3 ronds : les ronds de derriere descendent un peu plus bas. */
.fs-pack__avatars--2 + .fs-pack__pseudo,
.fs-pack__avatars--3 + .fs-pack__pseudo { margin-top: calc(var(--pk-av) * .22 + 10px); }
@media (max-width: 600px) {
  .fs .fs-packs .fs-pack__mid { --pk-av: 48px; padding-bottom: 12px; }
  .fs-pack__pseudo { margin-top: 6px; font-size: 8.5px; letter-spacing: .06em; }
  /* Titres sur 1 ou 2 lignes : meme hauteur pour aligner les conteneurs. */
  .fs .fs-packs .fs-pack__title { min-height: 2em; display: flex; align-items: flex-end; justify-content: center; }
  .fs-pack__avatars--2 + .fs-pack__pseudo,
  .fs-pack__avatars--3 + .fs-pack__pseudo { margin-top: calc(var(--pk-av) * .22 + 6px); }
}

/* ---------- REGLEMENT : sous les conteneurs ---------- */
.fs > .fs-info {
  position: relative; z-index: 1;
  margin: clamp(18px, 2.4vw, 34px) 0 clamp(22px, 2.6vw, 38px);
}
.fs > .fs-info .fs-rules__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(20px, 3vw, 48px);
}
.fs > .fs-info .fs-rules__foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: clamp(16px, 1.8vw, 24px);
  padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid var(--fs-line, rgba(94, 170, 255, .16));
}
.fs > .fs-info .fs-rules__foot .fs-rules__btn { width: auto; min-width: 180px; margin-left: auto; }
.fs-rules__choose {
  margin: 0;
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  font-size: clamp(20px, 1.7vw, 26px); font-weight: 400; line-height: 1;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-soft, #8ec3ff);
}
.fs-rules__choose[hidden] { display: none !important; }
@media (max-width: 900px) {
  .fs > .fs-info .fs-rules__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .fs > .fs-info .fs-rules__foot { flex-direction: column; align-items: stretch; }
  .fs > .fs-info .fs-rules__foot .fs-rules__btn { width: 100%; margin-left: 0; }
  .fs-rules__choose { text-align: center; }
}
/* L'agenda est maintenant seul dans son panneau. */
.fs-after { grid-template-columns: minmax(0, 1fr); }
.fs-after > .fs-agenda { padding: 0; }

/* ---------- RECTANGLES COMMANDE ---------- */
/* Animation d'apparition seulement pour un rectangle NOUVEAU (ajout
   d'un joueur / retrait : le rectangle reste en place). */
.fs-order { animation: none; }
.fs-order.is-new { animation: fsOrderIn .4s cubic-bezier(.22, 1, .36, 1) backwards; }
.fs-order__player.is-new { animation: fsPlayerIn .3s ease backwards; }
@keyframes fsPlayerIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Plus d'ombre ni de lueur ; fonds pleins. */
.fs .fs-order { box-shadow: inset 3px 0 0 rgba(var(--pk-rgb), .55); }
.fs .fs-order.is-active { box-shadow: inset 4px 0 0 var(--pk-hi); }
.fs .fs-order--placeholder,
.fs .fs-order--placeholder:hover {
  background: #0a1631;
  box-shadow: none;
  opacity: 1;
  filter: none;
}
.fs .fs-order--placeholder:hover { background: #0e1d3f; }
.fs .fs-order__remove { background: #050f22; }
.fs .fs-order__remove:hover { background: #2a1420; }

/* ---------- BOUTONS PLEINS + SOUS-TOTAL ---------- */
.fs .fs-btn--ghost {
  color: var(--fs-beige, #a78bfa);
  background: #262d3c;
  border-color: #7a7262;
}
.fs .fs-btn--ghost:hover { background: #343a48; border-color: #a59a83; }
.fs .fs-btn--ghost:active { background: #1d2331; }
.fs .fs-btn--price:disabled {
  color: #6f7f9c;
  background: #0a1a3a;
  border-color: #1b3566;
}
.fs .fs-btn--price:not(:disabled) {
  color: #04101f;
  background: var(--accent-soft, #8ec3ff);
  border-color: var(--accent-soft, #8ec3ff);
  animation: none;
}
.fs .fs-btn--price:not(:disabled):hover { opacity: 1; background: #a8d1ff; }
.fs .fs-btn--price:not(:disabled):active { background: #7ab6f7; }
.fs-subtotal {
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  margin: 0;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fs-muted);
}
.fs-subtotal b {
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  font-size: clamp(26px, 2.2vw, 34px); font-weight: 400; letter-spacing: .03em; line-height: 1;
  color: var(--fs-text);
}
.fs-checkout.is-notice .fs-subtotal,
.fs-checkout.is-notice .fs-actions { display: none !important; }
.fs-actions { margin-top: 0; }

/* ---------- JOUEURS : plusieurs sessions avec la meme personne ---------- */
.fs-user-cell {
  --avs: clamp(64px, 6.4vw, 104px);
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  min-width: 0;
}
.fs-user-cell > .fs-user { width: 100%; }
@media (max-width: 600px) {
  .fs-user-cell { --avs: min(78px, 22vw); }
}
/* Petit rappel quand une action est impossible (pack complet...). */
.is-nudge { animation: fsNudge .4s ease; }
@keyframes fsNudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---------- FOND : plus aucun saut quand la page s'allonge ----------
   Le cadre du fond (100vh, colle en haut de l'ecran) s'arretait en bas
   de la section : quand l'agenda / les rectangles apparaissaient, il se
   recollait d'un coup en haut de l'ecran (saut des bandes et du fondu).
   Le calque du fond depasse maintenant la section d'un ecran (masque par
   .fs, overflow: clip) : le cadre reste toujours colle en haut de
   l'ecran, comme un fond fixe. (Un vrai position: fixed est impossible :
   main.fs porte un « translate » pour le footer.)
   Le fondu du bas est pose sur le bas de la section (.fs::after). */
.fs-bg {
  bottom: -100vh; bottom: -100lvh;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 clamp(70px, 9vw, 160px), #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 clamp(70px, 9vw, 160px), #000 100%);
}
.fs::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: clamp(90px, 10vw, 180px);
  background: linear-gradient(180deg, rgba(6, 20, 48, 0) 0%, #061430 100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .fs-order.is-new, .fs-order__player.is-new, .is-nudge { animation: none !important; }
  .fs-pack__pseudo { transition: none !important; }
}


/* ============================================================
   14/10/2026 (v11)
   - UN conteneur (.fs-stage) avec un switch : « Joueurs & commande »
     <-> « Agenda & règlement » (reglement en bas de l'agenda) ;
   - cards : trait du haut + trait VERTICAL sur le cote gauche (du haut
     jusqu'au milieu), trait du bas + trait VERTICAL sur le cote droit
     (du bas jusqu'au milieu) ; tous ces traits ont la couleur du
     contour (bleus quand le contour devient bleu) ;
   - « À compléter » : pack concerne en bleu, cliquable (clignote 2 fois).
   ============================================================ */

/* ---------- CARDS : traits = couleur du contour ---------- */
.fs .fs-packs .fs-pack {
  border-color: var(--pk-bd);
  border-top-color: var(--pk-bd);
  border-bottom-color: var(--pk-bd);
}
/* Bordure 1px + trait interieur 2px = 3px. */
.fs .fs-packs .fs-pack::before,
.fs .fs-packs .fs-pack::after {
  width: 100%; height: 50%;
  background: var(--pk-bd);
  transition: background-color .25s ease;
}
/* Haut : toute la largeur + cote GAUCHE du haut jusqu'au milieu. */
.fs .fs-packs .fs-pack::before {
  top: 0; left: 0; right: auto; bottom: auto;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 2px, 2px 2px, 2px 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 2px, 2px 2px, 2px 100%, 0 100%);
}
/* Bas : toute la largeur + cote DROIT du bas jusqu'au milieu. */
.fs .fs-packs .fs-pack::after {
  top: auto; bottom: 0; left: auto; right: 0;
  -webkit-clip-path: polygon(100% 100%, 0 100%, 0 calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 0, 100% 0);
  clip-path: polygon(100% 100%, 0 100%, 0 calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 0, 100% 0);
}

/* ---------- CONTENEUR UNIQUE + SWITCH ---------- */
.fs-stage {
  position: relative;
  background: var(--fs-surface);
  border: 1px solid var(--fs-line, rgba(94, 170, 255, .16));
  padding: 0 clamp(14px, 2vw, 28px) clamp(16px, 2vw, 28px);
}
.fs-views {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 calc(-1 * clamp(14px, 2vw, 28px)) clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--fs-line, rgba(94, 170, 255, .16));
}
.fs-views__btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 10px 14px;
  border: 0; border-radius: 0;
  background: #071634;
  color: var(--fs-muted);
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  font-size: clamp(17px, 1.4vw, 21px); letter-spacing: .06em; line-height: 1.05;
  text-transform: uppercase; text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.fs-views__btn + .fs-views__btn { border-left: 1px solid var(--fs-line, rgba(94, 170, 255, .16)); }
.fs-views__btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--accent, #5eaaff);
  transform: scaleX(0); transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.fs-views__btn:hover { background: #0b1f45; color: var(--fs-text); }
.fs-views__btn:active { background: #0e2552; }
.fs-views__btn:focus-visible { outline: none; background: #0b1f45; color: var(--fs-text); }
.fs-views__btn, .fs-views__btn:hover, .fs-views__btn:focus, .fs-views__btn:active { outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; }
.fs-views__btn.is-on { background: var(--fs-surface); color: var(--fs-text); }
.fs-views__btn.is-on::after { transform: scaleX(1); }
.fs-views__num {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50% !important;
  border: 1px solid currentColor;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: 0;
}
.fs-views__btn.is-on .fs-views__num { background: var(--accent, #5eaaff); border-color: var(--accent, #5eaaff); color: #04101f; }
.fs-view[hidden] { display: none !important; }
.fs-view.is-in { animation: fsViewIn .28s ease both; }
@keyframes fsViewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* L'agenda et le reglement ne sont plus un panneau a part. */
.fs-stage .fs-after {
  display: flex; flex-direction: column; gap: 0;
  background: none; border: 0; box-shadow: none;
  -webkit-clip-path: none; clip-path: none;
  padding: 0;
}
.fs-stage .fs-after > .fs-agenda { padding: 0; }
.fs-stage .fs-after > .fs-agenda .fs-switch { max-width: 560px; margin-left: auto; margin-right: auto; }
/* Reglement : en bas de l'agenda. */
.fs-stage .fs-after > .fs-info {
  height: auto;
  margin-top: clamp(18px, 2.2vw, 30px);
  padding: clamp(16px, 2vw, 26px) 0 0;
  border-left: 0;
  border-top: 1px solid var(--fs-line, rgba(94, 170, 255, .16));
}
.fs-stage .fs-after > .fs-info .fs-rules__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(20px, 3vw, 48px);
}
.fs-stage .fs-after > .fs-info .fs-rules__foot {
  display: flex; justify-content: flex-end;
  margin-top: clamp(14px, 1.6vw, 20px); padding-top: 0;
}
.fs-stage .fs-after > .fs-info .fs-rules__btn { width: auto; min-width: 180px; }
@media (max-width: 900px) {
  .fs-stage .fs-after > .fs-info .fs-rules__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .fs-stage { padding: 0 10px 14px; }
  .fs-views { margin: 0 -10px 14px; }
  .fs-views__btn { min-height: 50px; padding: 8px 6px; gap: 6px; font-size: 15px; letter-spacing: .03em; }
  .fs-views__num { width: 20px; height: 20px; flex-basis: 20px; font-size: 10.5px; }
  .fs-stage .fs-after > .fs-info .fs-rules__btn { width: 100%; }
}

/* ---------- CLIGNOTEMENT (2 fois) ---------- */
.is-blink { animation: fsBlink .6s ease-in-out 2 !important; }
@keyframes fsBlink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.fs-views__btn.is-blink { animation: fsBlinkTab .6s ease-in-out 2 !important; }
@keyframes fsBlinkTab { 0%, 100% { background-color: #071634; } 50% { background-color: #1a4a99; color: #fff; } }

/* ---------- « À COMPLÉTER » : pack en bleu cliquable ---------- */
.fs-hint__pack {
  display: inline; padding: 0; margin: 0;
  border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--accent-soft, #8ec3ff);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.fs-hint__pack:hover { color: #b9dcff; }
.fs-hint__pack:active { color: var(--accent, #5eaaff); }
.fs-hint__pack:focus-visible { outline: 2px solid var(--accent-soft, #8ec3ff); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .fs-view.is-in, .is-blink, .fs-views__btn.is-blink { animation: none !important; }
}


/* ============================================================
   14/10/2026 (v12)
   - cards : survol + selection d'une couleur PROCHE DE LA CARD (plus de
     bleu) ; trait du cote gauche (haut) et du cote droit (bas) termines
     EN PENTE au milieu du cote ;
   - bande du bas (Prix / heure | Session) identique sur toutes les cards
     (meme hauteur, collee en bas) ; trait de separation recentre ;
   - vignette « Premium » pleine comme « Meilleure offre » ;
   - switch : numeros dans un LOSANGE ;
   - boutons « Ajouter au panier » / « Passer la commande » : sans contour,
     fonds pleins et nets ;
   - joueurs : plus de montee au survol ; anneau autour du rond qui
     apparait en scale (survol = apercu, clic = anneau plein).
   ============================================================ */

/* ---------- CARDS : survol / selection = couleur de la card ---------- */
@media (hover: hover) {
  .fs .fs-packs .fs-pack:hover,
  .fs .fs-packs .fs-pack.is-chosen:hover { --pk-bd: rgba(var(--pk-rgb), .85); }
}
.fs .fs-packs .fs-pack.is-active,
.fs .fs-packs .fs-pack.is-chosen.is-active,
.fs .fs-packs .fs-pack.is-active:hover { --pk-bd: var(--pk-hi); }
.fs .fs-packs .fs-pack:focus-visible,
.fs .fs-packs .fs-pack.is-active:focus-visible { outline: 2px solid var(--pk-hi); outline-color: var(--pk-hi); outline-offset: 3px; }

/* ---------- CARDS : traits des cotes termines en pente ----------
   Haut : trait pleine largeur + cote GAUCHE jusqu'au milieu ; le trait du
   cote s'affine en pente (de 3px a 1px, la bordure) au lieu d'etre coupe
   net. Meme chose en bas, cote DROIT (pente vers le haut). */
.fs .fs-packs .fs-pack {
  --pk-tw: 2px;   /* epaisseur du trait interieur (+ 1px de bordure) */
  --pk-sl: 22px;  /* longueur de la pente */
}
.fs .fs-packs .fs-pack::before {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% var(--pk-tw), var(--pk-tw) var(--pk-tw), var(--pk-tw) calc(100% - var(--pk-sl)), 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% var(--pk-tw), var(--pk-tw) var(--pk-tw), var(--pk-tw) calc(100% - var(--pk-sl)), 0 100%);
}
.fs .fs-packs .fs-pack::after {
  -webkit-clip-path: polygon(100% 100%, 0 100%, 0 calc(100% - var(--pk-tw)), calc(100% - var(--pk-tw)) calc(100% - var(--pk-tw)), calc(100% - var(--pk-tw)) var(--pk-sl), 100% 0);
  clip-path: polygon(100% 100%, 0 100%, 0 calc(100% - var(--pk-tw)), calc(100% - var(--pk-tw)) calc(100% - var(--pk-tw)), calc(100% - var(--pk-tw)) var(--pk-sl), 100% 0);
}
@media (max-width: 600px) {
  .fs .fs-packs .fs-pack { --pk-sl: 14px; }
}

/* ---------- CARDS : bande du bas identique partout ----------
   Collee en bas de la card (margin-top: auto) : plus de vide sous la
   bande quand la card est etiree (C1 / C2). Hauteur fixe, contenu centre,
   trait de separation au centre exact (horizontal ET vertical). */
.fs .fs-packs .fs-pack > .fs-pack__offer { margin-bottom: clamp(14px, 1.3vw, 20px); }
.fs .fs-packs .fs-pack > .fs-pack__stats {
  --pk-band: clamp(68px, 5.2vw, 80px);
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  width: auto;
  height: var(--pk-band); min-height: var(--pk-band);
  margin: auto calc(var(--pk-px) * -1) calc(var(--pk-pb) * -1) !important;
  padding: 0 var(--pk-px) !important;
  border-top: 0;
}
.fs .fs-packs .fs-pack > .fs-pack__stats > div {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  min-width: 0; padding: 0 6px;
  border-left: 0 !important;
}
.fs .fs-packs .fs-pack > .fs-pack__stats dt,
.fs .fs-packs .fs-pack > .fs-pack__stats dd { line-height: 1; }
.fs .fs-packs .fs-pack > .fs-pack__stats::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 1px; height: 52%;
  translate: -50% -50%;
  background: rgba(var(--pk-rgb), .35);
  pointer-events: none;
}
.fs .fs-packs .fs-pack.is-active > .fs-pack__stats::after { background: rgba(var(--pk-rgb), .55); }
@media (max-width: 600px) {
  /* Mobile : les 2 infos l'une sous l'autre, trait horizontal au centre. */
  .fs .fs-packs .fs-pack > .fs-pack__stats {
    --pk-band: 84px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    row-gap: 0;
    padding: 0 var(--pk-px) !important;
  }
  .fs .fs-packs .fs-pack > .fs-pack__stats > div { gap: 3px; padding: 0; }
  .fs .fs-packs .fs-pack > .fs-pack__stats::after { width: 56%; height: 1px; }
}

/* ---------- VIGNETTE PREMIUM : pleine, comme « Meilleure offre » ---------- */
.fs-pgroup--premium .fs-pgroup__tag {
  color: #04101f;
  background: var(--fs-beige, #a78bfa);
  border-color: var(--fs-beige, #a78bfa);
}

/* ---------- SWITCH : numero dans un LOSANGE ---------- */
.fs .fs-views__num {
  position: relative;
  isolation: isolate;
  width: 26px; height: 26px; flex: 0 0 26px;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  line-height: 1;
}
.fs .fs-views__num::before {
  content: "";
  position: absolute; inset: 4px;
  z-index: -1;
  border: 1px solid currentColor;
  rotate: 45deg;
  transition: background-color .2s ease, border-color .2s ease;
}
.fs .fs-views__btn.is-on .fs-views__num { color: #04101f; }
.fs .fs-views__btn.is-on .fs-views__num::before {
  background: var(--accent, #5eaaff);
  border-color: var(--accent, #5eaaff);
}
@media (max-width: 600px) {
  .fs .fs-views__num { width: 22px; height: 22px; flex-basis: 22px; }
  .fs .fs-views__num::before { inset: 3px; }
}

/* ---------- BOUTONS « AJOUTER AU PANIER » / « PASSER LA COMMANDE » ----------
   Aucun contour ; fonds pleins, nets et bien visibles. */
.fs .fs-actions .fs-btn {
  height: 50px;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 18px; letter-spacing: .08em;
}
.fs .fs-actions .fs-btn--cart {
  color: #04101f;
  background: var(--fs-beige, #a78bfa);
}
.fs .fs-actions .fs-btn--cart:hover { background: #bba5fc; }
.fs .fs-actions .fs-btn--cart:active { background: #9272f0; }
.fs .fs-actions .fs-btn--price:not(:disabled) {
  color: #04101f;
  background: var(--accent-soft, #8ec3ff);
}
.fs .fs-actions .fs-btn--price:not(:disabled):hover { background: #aad3ff; }
.fs .fs-actions .fs-btn--price:not(:disabled):active { background: #76b3f6; }
.fs .fs-actions .fs-btn--price:disabled {
  color: rgba(214, 230, 255, .55);
  background: #142c58;
}
.fs .fs-actions .fs-btn:focus-visible { outline: 2px solid var(--accent-soft, #8ec3ff); outline-offset: 3px; }

/* ---------- JOUEURS : survol sans montee, anneau en scale ---------- */
.fs-user .fs-avatar,
.fs-user:hover .fs-avatar,
.fs-user.is-selected .fs-avatar { transform: none !important; translate: none; }
.fs-user .fs-avatar::after {
  content: "";
  position: absolute; inset: -7px;
  border-radius: 50% !important;
  border: 2px solid var(--accent-soft, #8ec3ff);
  opacity: 0; scale: .82;
  transition: opacity .22s ease, scale .32s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
@media (hover: hover) {
  .fs-user:not(.is-locked):hover .fs-avatar::after { opacity: .45; scale: 1; }
}
.fs-user.is-selected .fs-avatar::after,
.fs-user.is-selected:hover .fs-avatar::after { opacity: 1; scale: 1; }
/* L'anneau remplace l'ancien halo : seul le contour fin du rond reste. */
.fs-user.is-selected .fs-avatar {
  box-shadow: inset 0 0 0 1.5px var(--accent-soft, #8ec3ff), 0 10px 22px rgba(1, 7, 25, .35);
}
@media (max-width: 600px) {
  .fs-user .fs-avatar::after { inset: -5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-user .fs-avatar::after, .fs .fs-views__num::before { transition: none !important; }
}


/* ============================================================
   14/10/2026 (v13)
   - onglet JEU au-dessus des cards (comme « Concept des évènements ») ;
   - un pack choisi => toutes les cards deviennent des RECTANGLES compacts
     (sans ronds, pseudo, note ni bande du bas) ; retour a la normale quand
     il n'y a plus de pack ;
   - contours et gros traits des cards ASSOCIES (couleurs pleines, traits
     poses sur la bordure : plus d'ecart ni de superposition visible) ;
   - bande du bas = couleur du haut de la card ;
   - plus de montee des cards au survol ;
   - vignette « Premium » violette ;
   - contour des ronds user COUPE a un endroit (en haut a gauche).
   ============================================================ */

/* ---------- ONGLET JEU ---------- */
.fs-games {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: clamp(18px, 3vw, 44px);
  margin: 0 auto clamp(18px, 2.2vw, 30px);
}
.fs-games:empty { display: none; }
.fs-game {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 0 clamp(12px, 1.2vw, 18px) 12px;
  background: none; border: 0; border-radius: 0;
  cursor: pointer;
  opacity: .5;
  transition: opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.fs-game:hover, .fs-game.is-on { opacity: 1; }
.fs-game__logo { display: block; width: clamp(84px, 6.6vw, 120px); height: auto; }
.fs-game__name {
  font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--fs-text, #e6f1ff);
}
.fs-game::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, #5eaaff), var(--accent-teal, #38e6c9));
  scale: 0 1;
  transition: scale .3s cubic-bezier(.22, 1, .36, 1);
}
.fs-game.is-on::after { scale: 1 1; }
.fs-game:focus-visible { outline: none; opacity: 1; }
.fs-game, .fs-game:hover, .fs-game:focus, .fs-game:active { outline: none !important; box-shadow: none !important; }
@media (max-width: 600px) {
  .fs-game__logo { width: 76px; }
  .fs-game { padding-bottom: 9px; }
}

/* ---------- CARDS : contours + traits associes ----------
   Couleurs PLEINES (melange avec le fond du haut de la card) : la ou un
   trait passe sur la bordure, aucune surbrillance. Les traits sont poses
   SUR la bordure (debordent de 1px) : ils la recouvrent exactement. */
.fs .fs-packs .fs-pack { --pk-bd: color-mix(in srgb, rgb(var(--pk-rgb)) 38%, var(--pk-dk2)); --pk-tw: 3px; }
.fs .fs-packs .fs-pack.is-chosen { --pk-bd: color-mix(in srgb, rgb(var(--pk-rgb)) 62%, var(--pk-dk2)); }
@media (hover: hover) {
  .fs .fs-packs .fs-pack:hover,
  .fs .fs-packs .fs-pack.is-chosen:hover { --pk-bd: color-mix(in srgb, rgb(var(--pk-rgb)) 85%, var(--pk-dk2)); }
}
.fs .fs-packs .fs-pack.is-active,
.fs .fs-packs .fs-pack.is-chosen.is-active,
.fs .fs-packs .fs-pack.is-active:hover { --pk-bd: var(--pk-hi); }
.fs .fs-packs .fs-pack::before {
  top: -1px; left: -1px; right: auto; bottom: auto;
  width: calc(100% + 2px); height: calc(50% + 1px);
}
.fs .fs-packs .fs-pack::after {
  top: auto; left: auto; bottom: -1px; right: -1px;
  width: calc(100% + 2px); height: calc(50% + 1px);
}

/* ---------- CARDS : bande du bas = couleur du haut de la card ---------- */
.fs .fs-packs .fs-pack > .fs-pack__stats,
.fs .fs-packs .fs-pack.is-active > .fs-pack__stats,
.fs .fs-packs .fs-pack:hover > .fs-pack__stats {
  background:
    linear-gradient(var(--pk-bd), var(--pk-bd)) 0 0 / 100% 1px no-repeat,
    color-mix(in srgb, rgb(var(--pk-rgb)) 26%, var(--pk-dk2)) !important;
}

/* ---------- CARDS : plus de montee au survol ---------- */
.fs .fs-packs .fs-pack:hover,
.fs .fs-packs .fs-pack.is-active:hover,
.fs .fs-packs .fs-pack.is-chosen:hover { transform: none; translate: none; }

/* ---------- VIGNETTE PREMIUM : violette ---------- */
.fs-pgroup--premium .fs-pgroup__tag {
  color: #ffffff;
  background: #7c5cf0;
  border-color: #7c5cf0;
}

/* ---------- CARDS COMPACTES (un pack est choisi) ----------
   Titre + classe + nombre de sessions (+ prix) : rectangles bas, faciles
   a selectionner. Retour a la normale quand plus aucun pack. */
.fs .fs-packs.is-compact .fs-pack {
  min-height: 0 !important;
  padding-top: clamp(10px, 1vw, 14px);
  padding-bottom: clamp(12px, 1.1vw, 16px);
  --pk-sl: 12px;
}
.fs .fs-packs.is-compact .fs-pack__mid,
.fs .fs-packs.is-compact .fs-pack__pseudo,
.fs .fs-packs.is-compact .fs-pack__pnote,
.fs .fs-packs.is-compact .fs-pack > .fs-pack__stats { display: none !important; }
.fs .fs-packs.is-compact .fs-pack__head { padding-top: clamp(22px, 1.8vw, 28px); gap: 4px; }
.fs .fs-packs.is-compact .fs-pack__title { font-size: clamp(18px, 1.35vw, 24px); min-height: 0; }
.fs .fs-packs.is-compact .fs-pack > .fs-pack__offer {
  flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center;
  column-gap: 12px; row-gap: 2px;
  margin: clamp(8px, .8vw, 12px) 0 0;
}
.fs .fs-packs.is-compact .fs-pack__sessions { font-size: clamp(20px, 1.6vw, 28px); }
.fs .fs-packs.is-compact .fs-pack__price { margin: 0; font-size: clamp(20px, 1.6vw, 28px); }
.fs .fs-packs.is-compact .fs-pack__icon { width: clamp(22px, 1.8vw, 30px); }
@media (max-width: 600px) {
  .fs .fs-packs.is-compact .fs-pack__head { padding-top: 22px; }
  .fs .fs-packs.is-compact .fs-pack__title { font-size: 14px; min-height: 0; display: block; }
  .fs .fs-packs.is-compact .fs-pack > .fs-pack__offer { flex-direction: column; align-items: center; margin-top: 6px; }
  .fs .fs-packs.is-compact .fs-pack__sessions { font-size: 16px; }
  .fs .fs-packs.is-compact .fs-pack__price { font-size: 16px; }
}

/* ---------- RONDS USER : contour coupe a un endroit ----------
   Anneau dessine par un masque (anneau radial x secteur conique) : une
   petite ouverture en haut a gauche (le « − » et la pastille de classe
   restent a droite). */
.fs-pack__avatars { --ring-gap-from: 300deg; --ring-gap: 34deg; }
.fs .fs-pack__avatar::before {
  padding: 0 !important;
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - var(--pk-ring) - .5px), #000 calc(100% - var(--pk-ring))),
    conic-gradient(from var(--ring-gap-from, 300deg), transparent 0 var(--ring-gap, 34deg), #000 var(--ring-gap, 34deg) 360deg);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(farthest-side, transparent calc(100% - var(--pk-ring) - .5px), #000 calc(100% - var(--pk-ring))),
    conic-gradient(from var(--ring-gap-from, 300deg), transparent 0 var(--ring-gap, 34deg), #000 var(--ring-gap, 34deg) 360deg);
  mask-composite: intersect;
}
/* Ronds joueurs (reservation, mes choix) : meme anneau coupe. */
.fs .fs-avatar,
.fs .fs-user:hover .fs-avatar,
.fs .fs-user.is-selected .fs-avatar,
.fs .fs-order .fs-avatar,
.fs .fs-chip .fs-avatar { box-shadow: 0 10px 22px rgba(1, 7, 25, .35); }
.fs .fs-order .fs-avatar,
.fs .fs-chip .fs-avatar { box-shadow: none; }
.fs .fs-avatar { --av-ring: rgba(94, 170, 255, .45); --av-rw: 1px; }
.fs .fs-avatar::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  border-radius: 50% !important;
  background: var(--av-ring);
  pointer-events: none;
  transition: background-color .2s ease;
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - var(--av-rw) - .5px), #000 calc(100% - var(--av-rw))),
    conic-gradient(from 300deg, transparent 0 34deg, #000 34deg 360deg);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(farthest-side, transparent calc(100% - var(--av-rw) - .5px), #000 calc(100% - var(--av-rw))),
    conic-gradient(from 300deg, transparent 0 34deg, #000 34deg 360deg);
  mask-composite: intersect;
}
@media (hover: hover) {
  .fs .fs-user:hover .fs-avatar { --av-ring: rgba(142, 195, 255, .85); }
}
.fs .fs-user.is-selected .fs-avatar { --av-ring: var(--accent-soft, #8ec3ff); --av-rw: 1.5px; }
.fs .fs-order .fs-avatar { --av-ring: rgba(var(--pk-rgb), .55); }
.fs .fs-chip .fs-avatar { --av-ring: rgba(94, 170, 255, .45); --av-rw: 1.5px; }
/* Anneau de selection (scale) : coupe au meme endroit. */
.fs-user .fs-avatar::after {
  -webkit-mask: conic-gradient(from 300deg, transparent 0 34deg, #000 34deg 360deg);
  mask: conic-gradient(from 300deg, transparent 0 34deg, #000 34deg 360deg);
}

/* ---------- MESSAGE AU-DESSUS DES BOUTONS ---------- */
.fs-checkout > .fs-hint { margin: 0; }


/* ============================================================
   14/10/2026 (v14)
   - onglet jeu : logo de la meme taille que « Concept des évènements »,
     meme ecart avec les cards que les onglets avec les cases ;
   - cards compactes : logo de classe retire aussi (le passage se fait en
     hauteur, en JS : plus d'animation de « reapparition ») ;
   - pastille numero des cards : sur l'angle en haut a droite ;
   - ronds user : contour coupe EN BAS A DROITE, sous le logo de classe,
     qui passe par-dessus les contours.
   ============================================================ */

/* ---------- ONGLET JEU = onglets de « Concept des évènements » ---------- */
/* .fs est un flex avec gap clamp(18px, 2vw, 28px) : on retire ce gap
   pour garder exactement 14px (16px sur tablette / mobile) avant les cards. */
.fs-games { margin: 0 auto calc(14px - clamp(18px, 2vw, 28px)); gap: 18px; }
.fs-game { padding: 8px 14px; opacity: .55; }
.fs-game__logo { width: auto; height: 52px; max-width: 160px; object-fit: contain; }
.fs-game::after { left: 0; right: 0; bottom: -5px; height: 2px; background: linear-gradient(90deg, #5eaaff, #38d4c8); }
.fs > .fs-packs, .fs-packs { margin-top: 0 !important; padding-top: 0 !important; }
@media (max-width: 1300px) {
  .fs-games { margin-bottom: calc(16px - clamp(18px, 2vw, 28px)); }
  .fs-game { padding: 0; }
  .fs-game__logo { height: 36px; width: auto; }
}
@media (max-width: 600px) {
  .fs-games { margin-bottom: 0; }   /* gap de .fs = 16px */
  .fs-game { padding: 0; }
  .fs-game__logo { height: 36px; width: auto; }
}

/* ---------- CARDS COMPACTES : logo de classe retire ---------- */
.fs .fs-packs.is-compact .fs-pack__icon { display: none !important; }
.fs .fs-packs.is-compact .fs-pack__head { padding-top: clamp(4px, .6vw, 8px); }
@media (max-width: 600px) {
  .fs .fs-packs.is-compact .fs-pack__head { padding-top: 4px; }
}

/* ---------- PASTILLE NUMERO : sur l'angle en haut a droite ----------
   La card ne coupe plus ce qui depasse (la pastille deborde de l'angle). */
.fs .fs-packs .fs-pack { overflow: visible; }
.fs .fs-packs .fs-pack .fs-pack__badge,
.fs .fs-packs .fs-pack.is-active .fs-pack__badge {
  top: 0 !important; right: 0 !important; left: auto !important; bottom: auto !important;
  translate: 45% -45%;
  z-index: 6;
  /* 25/10/2026 (v38) : aucun contour autour du rond numero */
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}
.fs-pgroup__cards { overflow: visible; }

/* ---------- RONDS USER : coupure en bas a droite ----------
   L'ouverture est centree a 135deg (bas droite), la ou est le logo de
   classe, qui passe AU-DESSUS des contours. */
.fs-pack__avatars { --ring-gap-from: 112deg; --ring-gap: 46deg; }
.fs .fs-avatar::before {
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - var(--av-rw) - .5px), #000 calc(100% - var(--av-rw))),
    conic-gradient(from 112deg, transparent 0 46deg, #000 46deg 360deg);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(farthest-side, transparent calc(100% - var(--av-rw) - .5px), #000 calc(100% - var(--av-rw))),
    conic-gradient(from 112deg, transparent 0 46deg, #000 46deg 360deg);
  mask-composite: intersect;
}
.fs-user .fs-avatar::after {
  -webkit-mask: conic-gradient(from 112deg, transparent 0 46deg, #000 46deg 360deg);
  mask: conic-gradient(from 112deg, transparent 0 46deg, #000 46deg 360deg);
}
.fs .fs-avatar .fs-avatar__cls { z-index: 5; }
.fs .fs-avatar .fs-user__count { z-index: 5; }


/* ============================================================
   15/10/2026 (v18)
   - ronds user : le contour s'AFFINE en approchant de la coupure (bas
     droite) au lieu d'etre coupe net ;
   - tablette (<= 1300px) et mobile (<= 600px) : cards des classes EN
     LIGNE (logo de classe | titre + sessions | rond user | prix | prix /
     heure + temps) au lieu d'etre verticales ;
   - reglement retire de la fan session (fenetre « Finaliser ma commande »).
   ============================================================ */

/* ---------- RONDS USER : contour effile vers la coupure ----------
   Anneau = disque exterieur moins (disque interieur U disque interieur
   DECALE vers la coupure). L'epaisseur passe progressivement de
   l'epaisseur normale a ~0 en approchant de l'ouverture (centree a
   135deg = bas droite) : les extremites coupees deviennent fines.
   --rt  : epaisseur du contour ;
   --tdp : decalage du disque, en % de la taille du rond (~2,4 x
           l'epaisseur => effilement sur ~55deg de chaque cote). Les
           navigateurs n'acceptent pas px + % dans la taille d'un
           degrade radial : d'ou une valeur en % par taille de rond. */
.fs .fs-pack__avatars { --ring-gap-from: 115deg; --ring-gap: 40deg; --tdp: 3.6%; }
.fs .fs-avatar { --tdp: 3.2%; }
.fs .fs-user.is-selected .fs-avatar { --tdp: 4%; }
.fs .fs-order .fs-avatar { --tdp: 6%; }
.fs .fs-chip .fs-avatar { --tdp: 7.5%; }
.fs .fs-pack__avatar::before,
.fs .fs-avatar::before,
.fs .fs-user .fs-avatar::after {
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - var(--rt) - .5px), #000 calc(100% - var(--rt))),
    radial-gradient(calc(50% - var(--tdp)) calc(50% - var(--tdp)) at calc(50% + var(--tdp) * .7071) calc(50% + var(--tdp) * .7071), transparent calc(100% - .6px), #000 100%),
    conic-gradient(from var(--ring-gap-from, 115deg), transparent 0 var(--ring-gap, 40deg), #000 var(--ring-gap, 40deg) 360deg) !important;
  -webkit-mask-composite: source-in, source-in !important;
  mask:
    radial-gradient(farthest-side, transparent calc(100% - var(--rt) - .5px), #000 calc(100% - var(--rt))),
    radial-gradient(calc(50% - var(--tdp)) calc(50% - var(--tdp)) at calc(50% + var(--tdp) * .7071) calc(50% + var(--tdp) * .7071), transparent calc(100% - .6px), #000 100%),
    conic-gradient(from var(--ring-gap-from, 115deg), transparent 0 var(--ring-gap, 40deg), #000 var(--ring-gap, 40deg) 360deg) !important;
  mask-composite: intersect !important;
}
.fs .fs-pack__avatar::before { --rt: var(--pk-ring, 1.5px); }
.fs .fs-avatar::before { --rt: var(--av-rw, 1px); }
/* Ronds des joueurs (grille) : contour un peu plus epais pour que
   l'effilement vers la coupure soit bien visible. */
.fs .fs-user .fs-avatar { --tdp: 4.4%; }
.fs .fs-user .fs-avatar::before { --rt: 2px; }
/* Anneau de selection (exterieur, 2px) : dessine par masque lui aussi,
   pour s'effiler de la meme facon. */
.fs .fs-user .fs-avatar::after {
  --rt: 2px; --tdp: 4.6%;
  border: 0 !important;
  background: var(--accent-soft, #8ec3ff);
}
@media (max-width: 1300px) {
  .fs .fs-packs .fs-pack__avatars { --tdp: 5.5%; }
}
@media (max-width: 600px) {
  .fs .fs-packs .fs-pack__avatars { --tdp: 5.7%; }
  .fs .fs-avatar { --tdp: 3.8%; }
  .fs .fs-user .fs-avatar::after { --tdp: 5.4%; }
}

/* ---------- REGLEMENT : retire de la fan session ---------- */
.fs .fs-info { display: none !important; }

/* ---------- TABLETTE + MOBILE : CARDS EN LIGNE ----------
   [logo] [titre / classe / sessions] [rond(s) user] [prix] [prix/h | temps]
   La bande « Prix / heure | Session » devient une colonne a droite, sur
   toute la hauteur de la card. */
@media (max-width: 1300px) {
  html body .fs > .fs-packs { flex-direction: column; align-items: stretch; gap: 16px; }
  html body .fs .fs-packs .fs-pgroup,
  html body .fs .fs-packs .fs-pgroup--premium,
  html body .fs .fs-packs .fs-pgroup--best {
    flex: 0 0 auto;
    align-self: center;
    width: 100%; max-width: 920px;
  }
  html body .fs .fs-packs .fs-pgroup__cards,
  html body .fs .fs-packs .fs-pgroup__cards--2,
  html body .fs .fs-packs .fs-pgroup__cards--3 {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pg-gap, 10px);
  }

  html body .fs .fs-packs .fs-pack {
    --r-pt: 14px; --r-pb: 14px; --r-pl: 18px;
    --r-icon: 38px; --r-stats: 150px; --pk-av: 62px;
    --pk-sl: 16px;
    display: grid !important;
    grid-template-columns: var(--r-icon) minmax(0, 1fr) auto minmax(96px, auto) var(--r-stats);
    grid-template-rows: auto auto auto;
    column-gap: 22px; row-gap: 3px;
    align-items: center; align-content: center;
    min-height: 112px !important; height: auto;
    padding: var(--r-pt) 0 var(--r-pb) var(--r-pl) !important;
    text-align: left;
  }
  /* Le titre, la classe, les sessions, le prix et la note deviennent des
     cases de la grille (leurs conteneurs s'effacent). */
  html body .fs .fs-packs .fs-pack > .fs-pack__head,
  html body .fs .fs-packs .fs-pack > .fs-pack__offer { display: contents !important; }

  /* 1) logo de classe */
  html body .fs .fs-packs .fs-pack > .fs-pack__icon {
    position: static !important; inset: auto !important;
    grid-column: 1; grid-row: 1 / 4; align-self: center; justify-self: center;
    width: var(--r-icon) !important; height: auto; margin: 0 !important;
  }
  /* 2) titre + classe + nombre de sessions */
  html body .fs .fs-packs .fs-pack__title {
    grid-column: 2; grid-row: 1; align-self: end;
    display: block !important; min-height: 0 !important;
    margin: 0; text-align: left;
    font-size: 26px; line-height: 1;
    white-space: normal; overflow-wrap: normal;
  }
  html body .fs .fs-packs .fs-pack__head .fs-pack__label {
    grid-column: 2; grid-row: 2; align-self: center;
    margin: 0; text-align: left; font-size: 11px;
  }
  html body .fs .fs-packs .fs-pack__sessions {
    grid-column: 2; grid-row: 3; align-self: start; justify-self: start;
    margin: 0; font-size: 19px; line-height: 1.05; text-align: left;
  }
  /* 3) rond(s) user (+ pseudo) */
  html body .fs .fs-packs .fs-pack > .fs-pack__mid {
    grid-column: 3; grid-row: 1 / 4; align-self: center; justify-self: center;
    display: flex; flex-direction: column; align-items: center;
    padding: 0 !important; margin: 0;
  }
  html body .fs .fs-packs .fs-pack__avatars--2 { margin-right: calc(var(--pk-av) * .44); }
  html body .fs .fs-packs .fs-pack__avatars--3 { margin-inline: calc(var(--pk-av) * .44); }
  html body .fs .fs-packs .fs-pack__pseudo { margin-top: 8px; max-width: calc(var(--pk-av) * 1.9); font-size: 9.5px; letter-spacing: .08em; text-align: center; }
  html body .fs .fs-packs .fs-pack__avatars--2 + .fs-pack__pseudo,
  html body .fs .fs-packs .fs-pack__avatars--3 + .fs-pack__pseudo { margin-top: calc(var(--pk-av) * .22 + 6px); }
  /* 4) prix (+ petite note) */
  html body .fs .fs-packs .fs-pack__price {
    grid-column: 4; grid-row: 1 / 3; align-self: end; justify-self: end;
    margin: 0 !important; font-size: 28px; line-height: 1; text-align: right;
  }
  html body .fs .fs-packs .fs-pack__pnote {
    grid-column: 4; grid-row: 3; align-self: start; justify-self: end;
    margin: 0; font-size: 11.5px; text-align: right; white-space: nowrap;
  }
  /* 5) prix / heure + temps : colonne de droite, toute la hauteur */
  html body .fs .fs-packs .fs-pack > .fs-pack__stats {
    grid-column: 5; grid-row: 1 / 4; align-self: stretch;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    width: auto !important; height: auto !important; min-height: 0 !important;
    margin: calc(var(--r-pt) * -1) 0 calc(var(--r-pb) * -1) 0 !important;
    padding: 6px 12px !important;
  }
  html body .fs .fs-packs .fs-pack > .fs-pack__stats,
  html body .fs .fs-packs .fs-pack.is-active > .fs-pack__stats,
  html body .fs .fs-packs .fs-pack:hover > .fs-pack__stats {
    background:
      linear-gradient(var(--pk-bd), var(--pk-bd)) 0 0 / 1px 100% no-repeat,
      color-mix(in srgb, rgb(var(--pk-rgb)) 26%, var(--pk-dk2)) !important;
  }
  html body .fs .fs-packs .fs-pack > .fs-pack__stats > div {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 0 !important; min-width: 0; text-align: center;
  }
  html body .fs .fs-packs .fs-pack > .fs-pack__stats::after { width: 58%; height: 1px; }
  html body .fs .fs-packs .fs-pack > .fs-pack__stats dd { font-size: 15px; }
  /* Pastille « choisi N fois » : sur l'angle haut droit. */
  html body .fs .fs-packs .fs-pack .fs-pack__badge { z-index: 6; }

  /* Cards compactes (un pack est choisi) : une ligne basse
     [titre / classe] [sessions] [prix]. */
  html body .fs .fs-packs.is-compact .fs-pack {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    column-gap: 18px; row-gap: 3px;
    min-height: 0 !important;
    padding: 12px 18px !important;
  }
  html body .fs .fs-packs.is-compact .fs-pack__title { grid-column: 1; grid-row: 1; font-size: 21px; }
  html body .fs .fs-packs.is-compact .fs-pack__head .fs-pack__label { grid-column: 1; grid-row: 2; }
  html body .fs .fs-packs.is-compact .fs-pack__sessions { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 18px; }
  html body .fs .fs-packs.is-compact .fs-pack__price { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 22px; }
}

@media (max-width: 900px) and (min-width: 601px) {
  html body .fs .fs-packs .fs-pack {
    --r-icon: 32px; --r-stats: 128px; --pk-av: 54px;
    grid-template-columns: var(--r-icon) minmax(0, 1fr) auto minmax(84px, auto) var(--r-stats);
    column-gap: 16px;
  }
  html body .fs .fs-packs .fs-pack__title { font-size: 22px; }
  html body .fs .fs-packs .fs-pack__price { font-size: 25px; }
}

@media (max-width: 600px) {
  html body .fs > .fs-packs { gap: 12px; }
  html body .fs .fs-packs .fs-pack {
    --r-pt: 10px; --r-pb: 10px; --r-pl: 10px;
    --r-icon: 22px; --r-stats: 64px; --pk-av: 38px;
    --pk-sl: 12px;
    grid-template-columns: var(--r-icon) minmax(0, 1fr) auto auto var(--r-stats);
    column-gap: 8px; row-gap: 2px;
    min-height: 88px !important;
  }
  html body .fs .fs-packs .fs-pack__title { font-size: 15px; letter-spacing: .03em; overflow-wrap: normal; word-break: normal; hyphens: none; }
  html body .fs .fs-packs .fs-pack__head .fs-pack__label { font-size: 8.5px; letter-spacing: .1em; }
  html body .fs .fs-packs .fs-pack__sessions { font-size: 14px; }
  html body .fs .fs-packs .fs-pack__pseudo { margin-top: 5px; max-width: 76px; font-size: 7.5px; letter-spacing: .05em; }
  html body .fs .fs-packs .fs-pack__avatars--2 + .fs-pack__pseudo,
  html body .fs .fs-packs .fs-pack__avatars--3 + .fs-pack__pseudo { margin-top: calc(var(--pk-av) * .22 + 4px); }
  html body .fs .fs-packs .fs-pack__price { grid-row: 1 / 4; align-self: center; font-size: 17px; max-width: 64px; overflow-wrap: normal; }
  html body .fs .fs-packs .fs-pack__pnote { display: none !important; }
  html body .fs .fs-packs .fs-pack > .fs-pack__stats { padding: 4px 6px !important; }
  html body .fs .fs-packs .fs-pack > .fs-pack__stats > div { gap: 2px; }
  html body .fs .fs-packs .fs-pack > .fs-pack__stats dt { font-size: 7.5px; letter-spacing: .08em; white-space: nowrap; }
  html body .fs .fs-packs .fs-pack > .fs-pack__stats dd { font-size: 12px; line-height: 1.1; }

  html body .fs .fs-packs.is-compact .fs-pack { column-gap: 12px; padding: 10px 12px !important; }
  html body .fs .fs-packs.is-compact .fs-pack__title { font-size: 15px; }
  html body .fs .fs-packs.is-compact .fs-pack__sessions { font-size: 14px; }
  html body .fs .fs-packs.is-compact .fs-pack__price { font-size: 16px; max-width: none; }
}


/* ============================================================
   15/10/2026 (v19)
   - joueurs : prix sous le nom (toutes les classes), competences dessous ;
     maximum de joueurs atteint => les autres joueurs disparaissent ;
   - mode presentation : joueurs « Nom » avec bonhomme ;
   - cards compactes (pack choisi) : plus de prix ;
   - fond COMMUN aux cards C1-2 et C3-4-5 (un seul conteneur) ;
   - « Joueurs & commande » / « Agenda » : plus de conteneur autour du
     contenu (on garde les 2 tabs) ;
   - moins de marge sous les boutons, en bas de la page ;
   - tablette / mobile : logo de classe plus grand, ronds user alignes.
   ============================================================ */

/* ---------- JOUEURS : nom, prix, competences ---------- */
.fs .fs-user { gap: 6px; }
.fs .fs-user__name { margin-top: 4px; }
.fs .fs-user__price {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  font-size: clamp(16px, 1.25vw, 19px); font-weight: 400; letter-spacing: .04em; line-height: 1;
  color: var(--velra-violet, #a78bfa);
}
.fs .fs-user__per {
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: none;
  color: var(--fs-muted);
}
.fs .fs-user .fs-user__tags { margin-top: 2px; }
.fs .fs-avatar__ph { display: grid; place-items: center; width: 100%; height: 100%; }
.fs .fs-avatar__ph svg { width: 52%; height: 52%; color: rgba(142, 195, 255, .78); }

/* Maximum de joueurs atteint : les autres disparaissent. */
.fs .fs-user-cell.is-gone { display: none !important; }
.fs .fs-user-cell.is-back { animation: fsUserBack .32s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes fsUserBack { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fs .fs-user-cell.is-back { animation: none; } }

/* ---------- CARDS COMPACTES : plus de prix ---------- */
html body .fs .fs-packs.is-compact .fs-pack__price { display: none !important; }

/* ---------- UN SEUL CONTENEUR DE FOND POUR C1-2 ET C3-4-5 ---------- */
html body .fs > .fs-packs {
  gap: 0 !important;
  background: #0a2152;
  border: 1px solid rgba(94, 170, 255, .42);
}
html body .fs .fs-packs .fs-pgroup,
html body .fs .fs-packs .fs-pgroup--premium,
html body .fs .fs-packs .fs-pgroup--best {
  background: none !important;
  border: 0 !important;
  width: auto;
}
/* Simple trait entre les deux groupes. */
html body .fs .fs-packs .fs-pgroup + .fs-pgroup { border-left: 1px solid rgba(94, 170, 255, .2) !important; }
@media (max-width: 1300px) {
  html body .fs > .fs-packs { max-width: 920px; margin-left: auto; margin-right: auto; width: 100%; }
  html body .fs .fs-packs .fs-pgroup,
  html body .fs .fs-packs .fs-pgroup--premium,
  html body .fs .fs-packs .fs-pgroup--best { width: 100% !important; max-width: none; align-self: stretch; }
  html body .fs .fs-packs .fs-pgroup + .fs-pgroup { border-left: 0 !important; border-top: 1px solid rgba(94, 170, 255, .2) !important; }
}

/* ---------- JOUEURS & COMMANDE / AGENDA : sans conteneur ---------- */
html body .fs .fs-stage {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body .fs .fs-stage .fs-views {
  margin: 0 0 clamp(18px, 2vw, 28px) !important;
  border: 1px solid var(--fs-line, rgba(94, 170, 255, .16));
  background: #071634;
}
html body .fs .fs-stage .fs-views__btn.is-on { background: #0b1f45; }

/* ---------- BAS DE PAGE : moins de marge sous les boutons ---------- */
html body .fs { padding-bottom: clamp(22px, 2.6vw, 40px) !important; }

/* ---------- TABLETTE / MOBILE : cards en ligne, retouches ----------
   Colonnes de largeur FIXE (identiques sur toutes les cards) : logos,
   ronds, prix et bandes s'alignent d'une card a l'autre. Les ronds
   arriere sont a la meme hauteur que le rond central. */
@media (max-width: 1300px) {
  html body .fs .fs-packs .fs-pack {
    --r-icon: 56px; --pk-av: 60px; --r-avw: calc(var(--pk-av) * 1.95); --r-price: 118px; --r-stats: 150px;
    grid-template-columns: var(--r-icon) minmax(0, 1fr) var(--r-avw) var(--r-price) var(--r-stats) !important;
  }
  html body .fs .fs-packs .fs-pack > .fs-pack__icon { width: var(--r-icon) !important; max-width: none !important; }
  html body .fs .fs-packs .fs-pack > .fs-pack__mid { width: var(--r-avw); justify-self: center; }
  html body .fs .fs-packs .fs-pack__avatars,
  html body .fs .fs-packs .fs-pack__avatars--2,
  html body .fs .fs-packs .fs-pack__avatars--3 { margin: 0 !important; translate: none; }
  /* 2 ronds : le groupe (centre + droite) est recentre dans sa colonne. */
  html body .fs .fs-packs .fs-pack__avatars--2 { translate: calc(var(--pk-av) * -.24) 0; }
  html body .fs .fs-packs .fs-pack__avatar[data-pos="right"] { translate: 48% 0 !important; }
  html body .fs .fs-packs .fs-pack__avatar[data-pos="left"]  { translate: -48% 0 !important; }
  html body .fs .fs-packs .fs-pack__pseudo,
  html body .fs .fs-packs .fs-pack__avatars--2 + .fs-pack__pseudo,
  html body .fs .fs-packs .fs-pack__avatars--3 + .fs-pack__pseudo { margin-top: 8px !important; translate: none; }
  html body .fs .fs-packs .fs-pack__price { justify-self: end; }
  /* Compactes : titre / classe | sessions (plus de prix). */
  html body .fs .fs-packs.is-compact .fs-pack { grid-template-columns: minmax(0, 1fr) auto !important; }
}
@media (max-width: 900px) and (min-width: 601px) {
  html body .fs .fs-packs .fs-pack { --r-icon: 48px; --pk-av: 52px; --r-price: 96px; --r-stats: 124px; }
}
@media (max-width: 600px) {
  html body .fs .fs-packs .fs-pack {
    --r-icon: 36px; --pk-av: 36px; --r-avw: calc(var(--pk-av) * 1.9); --r-price: 56px; --r-stats: 62px;
    column-gap: 8px !important;
  }
  html body .fs .fs-packs .fs-pack__pseudo,
  html body .fs .fs-packs .fs-pack__avatars--2 + .fs-pack__pseudo,
  html body .fs .fs-packs .fs-pack__avatars--3 + .fs-pack__pseudo { margin-top: 5px !important; }
  html body .fs .fs-packs .fs-pack__price { max-width: var(--r-price); font-size: 16px; }
}

/* ============================================================
   17/10/2026 (v35) — AGENDA FAN SESSION
   1) Dates / heures passees : la case disparait (non selectionnable),
      la grille garde sa place.
   2) Cases indisponibles en VIOLET (plus de gris).
   3) Semaine en cours <-> semaine suivante (fleches autour de
      « Semaine du ») ; point sur la fleche = creneaux choisis dans
      l'autre semaine pour le joueur affiche.
   4) « À compléter » : les dates disponibles du joueur clignotent.
   ============================================================ */
html body .fs-cal .fs-cell.is-past,
html body .fs-cal .fs-cell.is-past:disabled {
  visibility: hidden !important;
  pointer-events: none !important;
  background: none !important;
  box-shadow: none !important;
  animation: none !important;
}
html body .fs-cal .fs-cal__day.is-past { opacity: .4; }

html body .fs-cal .fs-cell:disabled {
  cursor: not-allowed;
  background: repeating-linear-gradient(135deg, #2a1d58 0 3px, #36276e 3px 6px) !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .22) !important;
}

.fs-week {
  display: inline-flex; align-items: center;
  gap: clamp(6px, .7vw, 10px);
  min-width: 0;
}
.fs-week__btn {
  position: relative;
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  padding: 0; border: 0;
  color: var(--fs-text, #e8f1ff);
  background: rgba(94, 170, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .3);
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
.fs-week__btn svg { width: 14px; height: 14px; }
.fs-week__btn:not(:disabled):hover { background: rgba(94, 170, 255, .24); }
.fs-week__btn:focus-visible { outline: 2px solid var(--accent-soft, #8ec3ff); outline-offset: 2px; }
.fs-week__btn:disabled { opacity: .28; cursor: default; }
/* Creneaux deja choisis dans l'autre semaine (joueur affiche). */
.fs-week__btn.has-picks::after {
  content: "";
  position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent2, #3d8bfd);
  box-shadow: 0 0 0 2px #071634;
}
@media (max-width: 600px) {
  .fs-week { gap: 6px; }
  .fs-week__btn { width: 24px; height: 24px; }
  .fs-week__btn svg { width: 12px; height: 12px; }
}

/* Changement de semaine : la grille glisse legerement. */
.fs-cal.is-week-next { animation: fsWeekNext .32s cubic-bezier(.22, 1, .36, 1); }
.fs-cal.is-week-prev { animation: fsWeekPrev .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes fsWeekNext { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes fsWeekPrev { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* Dates disponibles qui clignotent 2 fois (clic sur « À compléter »). */
html body .fs-cal .fs-cell.is-blink-free { animation: fsCellBlink .6s ease-in-out 2; }
@keyframes fsCellBlink {
  0%, 100% { background-color: #0d2552; box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .18); }
  50% { background-color: #3d8bfd; box-shadow: inset 0 0 0 1px #b9dcff, 0 0 0 2px rgba(94, 170, 255, .35); }
}
@media (prefers-reduced-motion: reduce) {
  .fs-cal.is-week-next, .fs-cal.is-week-prev, html body .fs-cal .fs-cell.is-blink-free { animation: none !important; }
}

/* ============================================================
   20/10/2026 (v36)
   1) Agenda : les cases passees REAPPARAISSENT, en case simple grise,
      sans contour (toujours non selectionnables).
   2) Semaine : UN SEUL bouton a fond plein, avec les deux fleches,
      place a droite de « Semaine du ». Une fleche indisponible garde le
      fond du bouton (seule l'icone s'attenue).
   3) Cards fan session en format compact : plus de gros traits (haut,
      bas, haut-gauche, bas-droite) ; seul le contour fin reste.
   4) « Premium » / « Meilleure offre » : plus de vignette ; le texte
      prend la couleur de l'ancienne vignette. Etoiles animees sur Premium.
   5) Plus de fondu en bas de la section, au-dessus du footer.
   ============================================================ */

/* 1) Cases passees : grises, simples, sans contour. */
html body .fs-cal .fs-cell.is-past,
html body .fs-cal .fs-cell.is-past:disabled,
html body .fs-cal .fs-cell.is-past:hover {
  visibility: visible !important;
  pointer-events: none !important;
  cursor: default !important;
  background: #252c3a !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

/* 2) Un seul bouton pour les deux fleches. */
html body .fs-week { gap: clamp(8px, .8vw, 12px); }
html body .fs-week__pair {
  position: relative;
  display: inline-flex; align-items: stretch;
  flex: 0 0 auto;
  height: 28px;
  background: #12305f;
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .34);
}
html body .fs-week__pair .fs-week__btn,
html body .fs-week__pair .fs-week__btn:disabled {
  width: 28px; height: 28px;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}
html body .fs-week__pair .fs-week__btn:not(:disabled):hover { background: rgba(94, 170, 255, .22); }
html body .fs-week__pair .fs-week__btn:disabled { cursor: default; }
html body .fs-week__pair .fs-week__btn:disabled svg { opacity: .3; }
html body .fs-week__pair .fs-week__btn:focus-visible { outline: 2px solid var(--accent-soft, #8ec3ff); outline-offset: -2px; }
html body .fs-week__pair-sep {
  flex: 0 0 1px;
  align-self: center;
  width: 1px; height: 14px;
  background: rgba(94, 170, 255, .34);
}
@media (max-width: 600px) {
  html body .fs-week__pair { height: 24px; }
  html body .fs-week__pair .fs-week__btn,
  html body .fs-week__pair .fs-week__btn:disabled { width: 24px; height: 24px; }
  html body .fs-week__pair-sep { height: 12px; }
}

/* 3) Cards compactes : plus de gros traits. */
html body .fs .fs-packs.is-compact .fs-pack::before,
html body .fs .fs-packs.is-compact .fs-pack::after,
html body .fs .fs-packs.is-compact .fs-pack:hover::before,
html body .fs .fs-packs.is-compact .fs-pack:hover::after,
html body .fs .fs-packs.is-compact .fs-pack.is-active::before,
html body .fs .fs-packs.is-compact .fs-pack.is-active::after {
  display: none !important;
}

/* 4) Premium / Meilleure offre : texte seul, couleur de l'ancienne vignette. */
html body .fs-pgroup .fs-pgroup__tag,
html body .fs-pgroup--premium .fs-pgroup__tag,
html body .fs-pgroup--best .fs-pgroup__tag {
  background: none !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html body .fs-pgroup--premium .fs-pgroup__tag { color: #7c5cf0 !important; }
html body .fs-pgroup--best .fs-pgroup__tag { color: var(--accent-soft, #8ec3ff) !important; }

/* Etoiles animees (meme etoile / meme animation que l'ancien titre
   « Evenements en vedette »), reduites pour le petit texte Premium. */
html body .fs-pgroup--premium .fs-pgroup__tag { overflow: visible; }
html body .fs-pgroup__tag .fs-sparkles {
  position: relative;
  display: inline-block;
  isolation: isolate;
  --sparkles-first-color: #a78bfa;
  --sparkles-second-color: #c9b8ff;
}
html body .fs-pgroup__tag .fs-sparkles__label { position: relative; z-index: 1; }
html body .fs-pgroup__tag .fs-sparkle {
  position: absolute !important;
  pointer-events: none;
  margin: 0;
  overflow: visible;
  opacity: 1;
  filter: none;
  transform: scale(0);
  animation: fs-sparkle 2.2s ease-in-out 1 both;
}
html body .fs-pgroup__tag .fs-sparkle--back { z-index: 0 !important; }
html body .fs-pgroup__tag .fs-sparkle--front { z-index: 2 !important; }
@keyframes fs-sparkle {
  0% { transform: scale(0) rotate(75deg); }
  50% { transform: scale(var(--sparkle-scale, 1)) rotate(120deg); }
  100% { transform: scale(0) rotate(150deg); }
}
@media (prefers-reduced-motion: reduce) {
  html body .fs-pgroup__tag .fs-sparkle { display: none !important; }
}

/* 5) Plus de fondu en bas de la section au-dessus du footer. */
html body main.fs::after,
html body .fs::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ============================================================
   20/10/2026 (v37)
   1) Semaine : UN SEUL carre. « > » (semaine suivante) puis, une fois
      dessus, « < » (retour). La fleche indisponible est masquee.
   2) Agenda : les cases non disponibles (violettes) passent en BLEU
      hachure, dans le meme bleu que les cases libres.
   ============================================================ */
html body .fs-week__pair .fs-week__pair-sep { display: none !important; }
html body .fs-week__pair .fs-week__btn[hidden] { display: none !important; }
html body .fs-cal .fs-cell:disabled:not(.is-past) {
  background: repeating-linear-gradient(135deg, #0d2552 0 3px, #163a7a 3px 6px) !important;
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .18) !important;
}

/* ============================================================
   21/10/2026 (v38)
   1) Joueurs : plus de vignettes (Pro, Semi pro, Createur de
      contenu...) sous les ronds user.
   2) Agenda : les cases passees (grises) passent en BLEU FONCE ;
      les cases bleues hachurees (non disponibles) n'ont plus de
      contour.
   3) Cards fan session refermees (format compact) : le logo de
      classe RESTE en haut a gauche et S'AGRANDIT (transition douce).
   4) Etirement en haut de page : le hero (hors de <main>) est etire
      avec le reste de la page (voir script.js, V20).
   ============================================================ */

/* 1) Plus de vignettes sous les joueurs. */
html body .fs .fs-user .fs-user__tags,
html body .fs-user__tags { display: none !important; }

/* 2) Cases passees : bleu fonce (toujours simples, sans contour). */
html body .fs-cal .fs-cell.is-past,
html body .fs-cal .fs-cell.is-past:disabled,
html body .fs-cal .fs-cell.is-past:hover {
  background: #071a3f !important;
  background-image: none !important;
}
/* Cases non disponibles (bleu hachure) : plus de contour. */
html body .fs-cal .fs-cell:disabled:not(.is-past),
html body .fs-cal .fs-cell:disabled:not(.is-past):hover {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* 3) Cards compactes : le logo reste en haut a gauche et grandit. */
html body .fs .fs-packs .fs-pack > .fs-pack__icon {
  transition: width .38s cubic-bezier(.22, 1, .36, 1), top .38s cubic-bezier(.22, 1, .36, 1), left .38s cubic-bezier(.22, 1, .36, 1);
}
html body .fs .fs-packs.is-compact .fs-pack > .fs-pack__icon {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute;
  top: 10px; left: 10px;
  width: clamp(34px, 2.4vw, 46px) !important;
  max-width: none !important;
  height: auto;
  z-index: 3;
}
/* Tablette / mobile (cards en ligne) : [logo] [titre / classe] [sessions]. */
@media (max-width: 1300px) {
  html body .fs .fs-packs.is-compact .fs-pack {
    grid-template-columns: var(--rc-icon, 60px) minmax(0, 1fr) auto !important;
    --rc-icon: 60px;
  }
  html body .fs .fs-packs.is-compact .fs-pack > .fs-pack__icon {
    position: static !important; inset: auto !important;
    grid-column: 1; grid-row: 1 / 3;
    align-self: center; justify-self: center;
    width: var(--rc-icon, 60px) !important;
    margin: 0 !important;
  }
  html body .fs .fs-packs.is-compact .fs-pack__title { grid-column: 2 !important; grid-row: 1; }
  html body .fs .fs-packs.is-compact .fs-pack__head .fs-pack__label { grid-column: 2 !important; grid-row: 2; }
  html body .fs .fs-packs.is-compact .fs-pack__sessions { grid-column: 3 !important; grid-row: 1 / 3; }
}
@media (max-width: 900px) and (min-width: 601px) {
  html body .fs .fs-packs.is-compact .fs-pack { --rc-icon: 52px; }
}
@media (max-width: 600px) {
  html body .fs .fs-packs.is-compact .fs-pack { --rc-icon: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .fs .fs-packs .fs-pack > .fs-pack__icon { transition: none !important; }
}

/* 4) Etirement : le hero suit la page. */
html.velra-stretching body > .sv-hero { will-change: transform; }

/* ============================================================
   21/10/2026 (V23)
   1) Cards fan session refermees (PC > 1300px) : le logo de classe est
      PLUS GRAND et centre verticalement sur la gauche de la card.
   2) Agenda : les cases bleu fonce (passees) ont un contour ; les cases
      hachurees (non disponibles) prennent la MEME couleur de fond que
      les cases bleu fonce (hachure discrete conservee) et un contour.
   ============================================================ */

/* 1) Logo : plus grand, centre a gauche. */
html body .fs .fs-packs .fs-pack > .fs-pack__icon {
  transition: width .38s cubic-bezier(.22, 1, .36, 1), top .38s cubic-bezier(.22, 1, .36, 1),
    left .38s cubic-bezier(.22, 1, .36, 1), transform .38s cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 1301px) {
  html body .fs .fs-packs.is-compact .fs-pack > .fs-pack__icon {
    top: 50%;
    left: clamp(12px, 1.1vw, 18px);
    transform: translateY(-50%);
    width: clamp(50px, 3.6vw, 68px) !important;
  }
}

/* 2) Agenda : contours + couleur unique. */
html body .fs-cal .fs-cell.is-past,
html body .fs-cal .fs-cell.is-past:disabled,
html body .fs-cal .fs-cell.is-past:hover {
  background: #071a3f !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .26) !important;
}
html body .fs-cal .fs-cell:disabled:not(.is-past),
html body .fs-cal .fs-cell:disabled:not(.is-past):hover {
  background: repeating-linear-gradient(135deg, #071a3f 0 3px, #0c2654 3px 6px) !important;
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .26) !important;
}

/* >>> VELRA-V26 START (22/10/2026) <<< */
/* Agenda : cases voisines de meme nature (passees / indisponibles
   hachurees) = un seul bloc, un seul contour (data-unit / data-join
   poses par services.js). Le calque ::before comble l'espace entre
   les cases ; le contour n'est trace que sur les bords exterieurs. */
html body .fs-cal .fs-cell[data-unit],
html body .fs-cal .fs-cell[data-unit]:disabled,
html body .fs-cal .fs-cell[data-unit]:hover {
  position: relative;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  overflow: visible !important;
}
html body .fs-cal .fs-cell[data-unit]::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  box-sizing: border-box;
  pointer-events: none;
  border: 1px solid rgba(94, 170, 255, .26);
  z-index: 0;
}
html body .fs-cal .fs-cell[data-unit="past"]::before { background: #071a3f; }
html body .fs-cal .fs-cell[data-unit="off"]::before {
  background: repeating-linear-gradient(135deg, #071a3f 0 3px, #0c2654 3px 6px);
  background-attachment: fixed;
}
html body .fs-cal .fs-cell[data-unit][data-join*="t"]::before { border-top-width: 0; top: calc(-1 * var(--fs-row-gap, 3px)); }
html body .fs-cal .fs-cell[data-unit][data-join*="b"]::before { border-bottom-width: 0; }
html body .fs-cal .fs-cell[data-unit][data-join*="l"]::before { border-left-width: 0; left: calc(-1 * var(--fs-col-gap, 3px)); }
html body .fs-cal .fs-cell[data-unit][data-join*="r"]::before { border-right-width: 0; }
/* >>> VELRA-V26 END <<< */

/* >>> VELRA-V27 START (22/10/2026) <<< */
/* 1) Agenda : cases passees voisines ET cases indisponibles (hachurees)
      voisines = un seul bloc, un seul contour (voir bloc V26). */
html body .fs-cal .fs-cell[data-unit="past"]::before { background: #071a3f; }

/* 2) Mode presentation : le trait de l'icone user (silhouette) a
      EXACTEMENT l'epaisseur du contour des ronds de « Joueurs &
      commande » (2px), quelle que soit la taille du rond. */
html body .fs .fs-avatar__ph svg *,
html body .fs .fs-order__ghost svg *,
html body .fs .fs-pack__avatar svg *,
html body .fs-profile .fs-avatar__ph svg * {
  vector-effect: non-scaling-stroke;
  stroke-width: var(--fs-ring-w, 2px);
}

/* 3) Cartes Fan Session (tablette <=1300px et mobile <=600px) : le rond
      principal est TOUJOURS au centre de sa colonne (1, 2 ou 3 ronds) ;
      les ronds sont donc alignes verticalement d'une carte a l'autre. */
@media (max-width: 1300px) {
  html body .fs .fs-packs .fs-pack > .fs-pack__mid { justify-self: center !important; align-self: center !important; align-items: center !important; }
  html body .fs .fs-packs .fs-pack__avatars,
  html body .fs .fs-packs .fs-pack__avatars--2,
  html body .fs .fs-packs .fs-pack__avatars--3 { translate: none !important; margin: 0 !important; }
  html body .fs .fs-packs .fs-pack__pseudo,
  html body .fs .fs-packs .fs-pack__avatars--2 + .fs-pack__pseudo,
  html body .fs .fs-packs .fs-pack__avatars--3 + .fs-pack__pseudo { translate: none !important; align-self: center; text-align: center; }
}

/* 4) « Joueurs & commande » : petit bouton Profil entre le nom et le prix. */
.fs-user__profile {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 24px; padding: 3px 9px;
  margin: -4px 0 -2px;
  border: 1px solid rgba(94, 170, 255, .32);
  background: rgba(7, 26, 63, .72);
  color: var(--accent-soft, #8ec3ff);
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.fs-user__profile svg { width: 13px; height: 13px; flex: 0 0 13px; }
.fs-user__profile:hover { background: rgba(20, 52, 108, .9); border-color: rgba(142, 195, 255, .7); color: #e6f1ff; }
.fs-user__profile:active { transform: scale(.96); }
.fs-user__profile:focus-visible { outline: 2px solid var(--accent-soft, #8ec3ff); outline-offset: 2px; }
@media (max-width: 600px) {
  .fs-user__profile { min-height: 22px; padding: 3px 7px; font-size: 9px; letter-spacing: .1em; }
  .fs-user__profile svg { width: 12px; height: 12px; flex-basis: 12px; }
}

/* 5) Widget profil (ouvert par le bouton ci-dessus). */
.fs-profile {
  --fs-ring-w: 2px;
  position: fixed; z-index: 1200;
  width: min(300px, calc(100vw - 24px));
  padding: 18px 16px 16px;
  background: rgba(4, 12, 24, .94);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(94, 170, 255, .28);
  box-shadow: 0 24px 54px rgba(0, 0, 20, .6);
  color: #e6f1ff;
  font-family: 'Barlow', var(--font-medium), sans-serif;
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.fs-profile[hidden] { display: none !important; }
.fs-profile.is-in { opacity: 1; transform: none; }
.fs-profile__close {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; color: rgba(230, 241, 255, .7);
  cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.fs-profile__close svg { width: 16px; height: 16px; }
.fs-profile__close:hover { background: rgba(94, 170, 255, .14); color: #fff; }
.fs-profile__close:focus-visible { outline: 2px solid var(--accent-soft, #8ec3ff); outline-offset: 1px; }
.fs-profile__head { display: flex; align-items: center; gap: 14px; padding-right: 30px; }
.fs-profile .fs-avatar {
  width: 64px; flex: 0 0 64px; aspect-ratio: 1;
  border-radius: 50% !important; clip-path: none !important;
  box-shadow: inset 0 0 0 var(--fs-ring-w, 2px) rgba(94, 170, 255, .45), 0 10px 22px rgba(1, 7, 25, .35) !important;
}
.fs-profile .fs-avatar img { border-radius: 50% !important; }
.fs-profile .fs-avatar__ph svg { width: 52%; height: 52%; color: rgba(142, 195, 255, .78); }
.fs-profile .fs-avatar__cls { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; object-fit: contain; }
.fs-profile .fs-check { display: none; }
.fs-profile__id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fs-profile__name {
  font-family: 'Bebas Neue', var(--font-medium), sans-serif;
  font-size: 26px; line-height: 1; letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fs-profile__cls {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-soft, #8ec3ff);
}
.fs-profile__cls .fs-clsimg { width: 18px; height: 18px; object-fit: contain; }
.fs-profile__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.fs-profile__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin: 14px 0 0; padding: 0;
  background: rgba(94, 170, 255, .18);
  border: 1px solid rgba(94, 170, 255, .18);
}
.fs-profile__stats > div { background: #071a3f; padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; }
.fs-profile__stats .fs-profile__wide { grid-column: 1 / -1; }
.fs-profile__stats dt { margin: 0; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(230, 241, 255, .55); }
.fs-profile__stats dd { margin: 0; font-size: 15px; font-weight: 700; color: #e6f1ff; }
.fs-profile__stats dd small { font-size: 10.5px; font-weight: 600; color: rgba(230, 241, 255, .6); }
.fs-profile__pick {
  width: 100%; min-height: 44px; margin-top: 14px;
  border: 0; cursor: pointer;
  background: var(--accent, #5eaaff); color: #040e1e;
  font-family: 'Bebas Neue', var(--font-medium), sans-serif; font-size: 18px; letter-spacing: .08em;
  transition: filter .18s ease, transform .18s ease;
}
.fs-profile__pick:hover { filter: brightness(1.08); }
.fs-profile__pick:active { transform: scale(.98); }
.fs-profile__pick:focus-visible { outline: 2px solid #e6f1ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .fs-profile, .fs-profile.is-in { transition: none; transform: none; }
}
/* >>> VELRA-V27 END <<< */

/* 23/10/2026 — Premium et Meilleure offre : deux conteneurs separes et distincts. */
html body .fs > .fs-packs {
  gap: clamp(14px, 1.6vw, 26px) !important;
  background: none !important;
  border: 0 !important;
}
html body .fs .fs-packs .fs-pgroup--premium {
  background: #1d4f96 !important;
  border: 1px solid #5eaaff !important;
}
html body .fs .fs-packs .fs-pgroup--premium .fs-pgroup__tag { color: #ffffff !important; }
html body .fs .fs-packs .fs-pgroup--best {
  background: #050f28 !important;
  border: 1px solid #1f3f7d !important;
}
html body .fs .fs-packs .fs-pgroup + .fs-pgroup { border-left-width: 1px !important; }
@media (max-width: 1300px) {
  html body .fs .fs-packs .fs-pgroup + .fs-pgroup { border-top: 1px solid #1f3f7d !important; border-left: 1px solid #1f3f7d !important; }
}
@media (max-width: 600px) {
  html body .fs > .fs-packs { gap: 12px !important; }
}

/* 23/10/2026 (2) — Cards fan session : plus de gros traits (haut-gauche / bas-droite). */
html body .fs .fs-packs .fs-pack::before,
html body .fs .fs-packs .fs-pack::after,
html body .fs .fs-packs .fs-pack:hover::before,
html body .fs .fs-packs .fs-pack:hover::after,
html body .fs .fs-packs .fs-pack.is-active::before,
html body .fs .fs-packs .fs-pack.is-active::after { display: none !important; }
/* Le texte « session(s) » passe au-dessus du rond pendant la fermeture. */
html body .fs .fs-packs .fs-pack__offer { position: relative; z-index: 2; }
/* Joueurs : prix en blanc, bouton Profil sous le prix. */
html body .fs .fs-user__price { color: #ffffff !important; }
html body .fs .fs-user__price .fs-user__per { color: rgba(255, 255, 255, .7) !important; }
html body .fs .fs-user__profile { margin: 2px 0 0 !important; }
/* Agenda : blocs fusionnes dessines par services.js (SVG continu). */
html body .fs-cal { position: relative; }
html body .fs-cal > .fs-cal__merge { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
html body .fs-cal .fs-cell[data-unit]::before { display: none !important; }
/* Contenu de la fan session rapproche du titre. */
html body .fs > .fs-section-head { margin-bottom: -12px !important; }
html body .fs .fs-packs.fs-no-trans,
html body .fs .fs-packs.fs-no-trans * { transition: none !important; }

/* 24/10/2026 (v41) — « Premium » comme « Meilleure offre » : texte bleu,
   conteneur bleu fonce, etoiles bleues et blanches. */
html body .fs .fs-packs .fs-pgroup--premium {
  background: #050f28 !important;
  border: 1px solid #1f3f7d !important;
}
html body .fs .fs-packs .fs-pgroup--premium .fs-pgroup__tag,
html body .fs-pgroup--premium .fs-pgroup__tag { color: var(--accent-soft, #8ec3ff) !important; }
html body .fs-pgroup--premium .fs-pgroup__tag .fs-sparkles {
  --sparkles-first-color: #5eaaff;
  --sparkles-second-color: #ffffff;
}

/* >>> VELRA-V38-FS-CARDS-FULL START <<< */
/* 25/10/2026 (v38) — Tablette (<= 1300px) et mobile (<= 600px) :
   les cards Fan Session vont jusqu'aux marges gauche / droite de la page.
   Le cadre du groupe (Premium, Meilleure offre...) deborde dans la
   gouttiere de la valeur exacte de son padding + bordure, de sorte que
   le bord des cards tombe pile sur la marge de la page. */
@media (max-width: 1300px) {
  html body .fs .fs-packs {
    --fsg-pad: 13px;
    max-width: none !important;
    width: calc(100% + 2 * (var(--fsg-pad) + 1px)) !important;
    margin-left: calc(-1 * (var(--fsg-pad) + 1px)) !important;
    margin-right: calc(-1 * (var(--fsg-pad) + 1px)) !important;
    box-sizing: border-box !important;
    align-self: center !important;
  }
  html body .fs .fs-packs .fs-pgroup {
    padding-left: var(--fsg-pad) !important;
    padding-right: var(--fsg-pad) !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 600px) {
  html body .fs .fs-packs { --fsg-pad: 6px; }
}
/* >>> VELRA-V38-FS-CARDS-FULL END <<< */

/* >>> VELRA-SV44 START (26/10/2026) <<< */

/* ---- 1) Cards fan session : nom, sessions, prix et petite note des
      classes 1 et 2 alignes sur les autres classes (PC). */
@media (min-width: 1301px) {
  html body .fs .fs-packs .fs-pack__avatars--1 + .fs-pack__pseudo { margin-top: calc(var(--pk-av) * .22 + 10px); }
}

/* ---- 2) Calque grille losange de la card (visible card refermee).
      La card isole son empilement : le calque passe sous le contenu, le
      rond numerote (badge) reste toujours PAR-DESSUS. */
html body .fs .fs-packs .fs-pack { isolation: isolate; }
html body .fs .fs-packs .fs-pack.is-chosen { z-index: 3; }
html body .fs .fs-packs .fs-pack__badge { z-index: 8 !important; }
.fs-pack__grid {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(var(--pk-rgb), .26) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(var(--pk-rgb), .26) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 100%);
}
html body .fs .fs-packs.is-compact .fs-pack__grid { opacity: 1; }

/* ---- 3) Bande du bas des cards : fond grille en losanges. */
html body .fs .fs-packs .fs-pack > .fs-pack__stats { isolation: isolate; }
html body .fs .fs-packs .fs-pack > .fs-pack__stats::before {
  content: ""; position: absolute; inset: 1px 0 0; z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 12px);
}

/* ---- 4) Card refermee : tout (sauf le logo de classe a gauche) se
      range a DROITE. */
html body .fs .fs-packs.is-compact .fs-pack__head {
  align-items: flex-end !important;
  text-align: right !important;
  padding-right: 4px;
}
html body .fs .fs-packs.is-compact .fs-pack > .fs-pack__offer {
  justify-content: flex-end !important;
  align-items: flex-end !important;
  text-align: right !important;
  align-self: flex-end !important;
  justify-self: end !important;
  padding-right: 4px;
}
@media (max-width: 1300px) {
  html body .fs .fs-packs.is-compact .fs-pack__head { justify-self: end !important; }
  html body .fs .fs-packs.is-compact .fs-pack__head .fs-pack__title,
  html body .fs .fs-packs.is-compact .fs-pack__head .fs-pack__label {
    justify-self: end !important;
    text-align: right !important;
    width: auto !important;
    max-width: 100%;
  }
}

/* ---- 5) Joueurs & commande / Agenda : contenu enroule dans UN conteneur
      qui touche les deux boutons. */
html body .fs .fs-stage .fs-views { margin: 0 !important; }
html body .fs .fs-stage > .fs-view {
  background: #050f28;
  border: 1px solid var(--fs-line, rgba(94, 170, 255, .16));
  border-top: 0;
  padding: clamp(16px, 2vw, 28px) clamp(14px, 2vw, 28px);
}
@media (max-width: 600px) {
  html body .fs .fs-stage > .fs-view { padding: 14px 10px; }
}

/* ---- 6) Changement de semaine (services.js, weekTransition) */
html body .fs-cal.is-week-wait .fs-cell,
html body .fs-cal.is-week-wait > .fs-cal__merge,
html body .fs-cal.is-week-wait .fs-cal__dnum { opacity: 0 !important; }
html body .fs-cal.fs-cal--ghost { background: none !important; box-shadow: none !important; border: 0 !important; }
html body .fs-cal--ghost .fs-cal__corner,
html body .fs-cal--ghost .fs-cal__hour,
html body .fs-cal--ghost .fs-cal__dname { visibility: hidden !important; }
html body .fs-cal--ghost .fs-cal__day { background: none !important; box-shadow: none !important; border-color: transparent !important; }
html body .fs-cal--ghost .fs-cal__day::before,
html body .fs-cal--ghost .fs-cal__day::after { display: none !important; }
html body .fs-cal .fs-cal__dnum { display: inline-block; }
html body .fs-cal .fs-cal__comp { transform-box: fill-box; }
/* >>> VELRA-SV44 END <<< */

/* >>> VELRA-SV48 START (26/10/2026) <<< */
/* ---- 1) Numero du jour (changement de semaine) : glisse dans un cadre
      qui le COUPE en bas, sans fondu. */
html body .fs-cal .fs-cal__dnum { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.15; }
html body .fs-cal .fs-cal__dnum-in { display: block; will-change: transform; }
html body .fs-cal.is-week-wait .fs-cal__dnum { opacity: 1 !important; }
html body .fs-cal.is-week-wait .fs-cal__dnum-in { transform: translateY(110%); }

/* ---- 2) Grille losange (bas des cards + card refermee) : motif en
      losanges imbriques, couleur de la classe de la card. */
html body .fs .fs-packs .fs-pack__grid {
  background-image: none !important;
  background-color: rgba(var(--pk-rgb), .34);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23000'%20stroke-width='1.2'%3E%3Cpath%20d='M0%200L48%2048M48%200L0%2048'/%3E%3Cpath%20d='M24%20-10L34%200L24%2010L14%200ZM24%2038L34%2048L24%2058L14%2048Z'/%3E%3C/svg%3E") 0 0 / 48px 48px repeat, linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 100%);
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23000'%20stroke-width='1.2'%3E%3Cpath%20d='M0%200L48%2048M48%200L0%2048'/%3E%3Cpath%20d='M24%20-10L34%200L24%2010L14%200ZM24%2038L34%2048L24%2058L14%2048Z'/%3E%3C/svg%3E") 0 0 / 48px 48px repeat, linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
html body .fs .fs-packs .fs-pack > .fs-pack__stats::before {
  background-image: none !important;
  background-color: rgba(var(--pk-rgb), .3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23000'%20stroke-width='1.2'%3E%3Cpath%20d='M0%200L48%2048M48%200L0%2048'/%3E%3Cpath%20d='M24%20-10L34%200L24%2010L14%200ZM24%2038L34%2048L24%2058L14%2048Z'/%3E%3C/svg%3E") 0 0 / 40px 40px repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23000'%20stroke-width='1.2'%3E%3Cpath%20d='M0%200L48%2048M48%200L0%2048'/%3E%3Cpath%20d='M24%20-10L34%200L24%2010L14%200ZM24%2038L34%2048L24%2058L14%2048Z'/%3E%3C/svg%3E") 0 0 / 40px 40px repeat;
}

/* ---- 3) Mode presentation : profil simule (competences + fil) */
.fs-profile.fs-profile--sim { width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.fs-profile__sim { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.fs-profile__h { margin: 4px 0 0; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-soft, #8ec3ff); }
.fs-profile__skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fs-profile__skill { display: grid; grid-template-columns: 112px 1fr 24px; align-items: center; gap: 8px; font-size: 12px; color: rgba(230, 241, 255, .86); }
.fs-profile__skill b { position: relative; height: 6px; background: rgba(94, 170, 255, .14); overflow: hidden; }
.fs-profile__skill b i { position: absolute; inset: 0 auto 0 0; width: var(--v); background: linear-gradient(90deg, #3f7fe0, #8ec3ff); animation: fsSkillIn .7s cubic-bezier(.22, 1, .36, 1) both; }
.fs-profile__skill em { font-style: normal; font-size: 11px; font-weight: 700; text-align: right; color: #fff; }
@keyframes fsSkillIn { from { width: 0; } }
.fs-profile__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fs-profile__chip { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; background: rgba(94, 170, 255, .08); border: 1px solid rgba(94, 170, 255, .22); font-size: 12px; font-weight: 700; color: #fff; }
.fs-profile__chip small { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(206, 224, 255, .6); }
.fs-profile__feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fs-profile__post { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 8px 9px; background: rgba(255, 255, 255, .03); border-left: 2px solid #ff3355; }
.fs-profile__post--tiktok { border-left-color: #25f4ee; }
.fs-profile__pf { grid-row: 1 / 3; align-self: start; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 5px; background: rgba(255, 51, 85, .16); color: #ff8fa3; }
.fs-profile__post--tiktok .fs-profile__pf { background: rgba(37, 244, 238, .12); color: #8ff7f3; }
.fs-profile__pt { font-size: 12px; line-height: 1.3; color: #e6f1ff; }
.fs-profile__pm { font-size: 10.5px; color: rgba(206, 224, 255, .55); }
@media (prefers-reduced-motion: reduce) { .fs-profile__skill b i { animation: none; } }
/* >>> VELRA-SV48 END <<< */

/* >>> VELRA-SV50 START (28/10/2026) <<< */
/* ---- 1) Grille losange des cards fan session : motif « Two Simple »
      (lignes diagonales continues + losanges imbriques), redessine
      a l'identique du modele, en tuile 4 x 3 sans raccord visible. */
html body .fs .fs-packs .fs-pack__grid {
  background-image: none !important;
  background-color: rgba(var(--pk-rgb), .36);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='36'%20viewBox='0%200%2048%2036'%20fill='none'%20stroke='%23000'%20stroke-width='1.1'%20stroke-linecap='square'%3E%3Cpath%20d='M0%2012L6%206M48%2012L54%206M0%2024L6%2018M48%2024L54%2018M0%2024L6%2030M48%2024L54%2030M6%206L12%200M6%2042L12%2036M6%2018L12%2012M6%20-6L12%200M6%2030L12%2036M12%200L18%206M12%2036L18%2042M12%2012L18%2018M12%200L18%20-6M12%2036L18%2030M18%206L24%2012M18%2018L24%2024M18%2030L24%2024M24%200L30%206M24%2036L30%2042M24%2012L30%2018M24%200L30%20-6M24%2036L30%2030M30%206L36%2012M30%2018L36%2024M30%2030L36%2024M36%2012L42%206M36%2024L42%2018M36%2024L42%2030M-6%206L0%200M-6%2042L0%2036M42%206L48%200M42%2042L48%2036M-6%2018L0%2012M42%2018L48%2012M-6%20-6L0%200M-6%2030L0%2036M42%20-6L48%200M42%2030L48%2036'/%3E%3C/svg%3E") 0 0 / 48px 36px repeat, linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 100%);
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='36'%20viewBox='0%200%2048%2036'%20fill='none'%20stroke='%23000'%20stroke-width='1.1'%20stroke-linecap='square'%3E%3Cpath%20d='M0%2012L6%206M48%2012L54%206M0%2024L6%2018M48%2024L54%2018M0%2024L6%2030M48%2024L54%2030M6%206L12%200M6%2042L12%2036M6%2018L12%2012M6%20-6L12%200M6%2030L12%2036M12%200L18%206M12%2036L18%2042M12%2012L18%2018M12%200L18%20-6M12%2036L18%2030M18%206L24%2012M18%2018L24%2024M18%2030L24%2024M24%200L30%206M24%2036L30%2042M24%2012L30%2018M24%200L30%20-6M24%2036L30%2030M30%206L36%2012M30%2018L36%2024M30%2030L36%2024M36%2012L42%206M36%2024L42%2018M36%2024L42%2030M-6%206L0%200M-6%2042L0%2036M42%206L48%200M42%2042L48%2036M-6%2018L0%2012M42%2018L48%2012M-6%20-6L0%200M-6%2030L0%2036M42%20-6L48%200M42%2030L48%2036'/%3E%3C/svg%3E") 0 0 / 48px 36px repeat, linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
html body .fs .fs-packs .fs-pack > .fs-pack__stats::before {
  background-image: none !important;
  background-color: rgba(var(--pk-rgb), .32);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='30'%20viewBox='0%200%2040%2030'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linecap='square'%3E%3Cpath%20d='M0%2010L5%205M40%2010L45%205M0%2020L5%2015M40%2020L45%2015M0%2020L5%2025M40%2020L45%2025M5%205L10%200M5%2035L10%2030M5%2015L10%2010M5%20-5L10%200M5%2025L10%2030M10%200L15%205M10%2030L15%2035M10%2010L15%2015M10%200L15%20-5M10%2030L15%2025M15%205L20%2010M15%2015L20%2020M15%2025L20%2020M20%200L25%205M20%2030L25%2035M20%2010L25%2015M20%200L25%20-5M20%2030L25%2025M25%205L30%2010M25%2015L30%2020M25%2025L30%2020M30%2010L35%205M30%2020L35%2015M30%2020L35%2025M-5%205L0%200M-5%2035L0%2030M35%205L40%200M35%2035L40%2030M-5%2015L0%2010M35%2015L40%2010M-5%20-5L0%200M-5%2025L0%2030M35%20-5L40%200M35%2025L40%2030'/%3E%3C/svg%3E") 0 0 / 40px 30px repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='30'%20viewBox='0%200%2040%2030'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linecap='square'%3E%3Cpath%20d='M0%2010L5%205M40%2010L45%205M0%2020L5%2015M40%2020L45%2015M0%2020L5%2025M40%2020L45%2025M5%205L10%200M5%2035L10%2030M5%2015L10%2010M5%20-5L10%200M5%2025L10%2030M10%200L15%205M10%2030L15%2035M10%2010L15%2015M10%200L15%20-5M10%2030L15%2025M15%205L20%2010M15%2015L20%2020M15%2025L20%2020M20%200L25%205M20%2030L25%2035M20%2010L25%2015M20%200L25%20-5M20%2030L25%2025M25%205L30%2010M25%2015L30%2020M25%2025L30%2020M30%2010L35%205M30%2020L35%2015M30%2020L35%2025M-5%205L0%200M-5%2035L0%2030M35%205L40%200M35%2035L40%2030M-5%2015L0%2010M35%2015L40%2010M-5%20-5L0%200M-5%2025L0%2030M35%20-5L40%200M35%2025L40%2030'/%3E%3C/svg%3E") 0 0 / 40px 30px repeat;
}
/* >>> VELRA-SV50 END <<< */

/* >>> VELRA-SV50b START (28/10/2026) <<< */
/* Clic sur le texte bleu « choisis un creneau... » : les cases libres de
   l'agenda clignotent SANS halo lumineux ni contour ajoute, dans un bleu
   plus doux (moins sature). */
@keyframes fsCellBlinkSoft {
  0%, 100% { background-color: #0d2552; box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .18); }
  50% { background-color: #24477e; box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .18); }
}
html body .fs-cal .fs-cell.is-blink-free {
  animation: fsCellBlinkSoft .6s ease-in-out 2 !important;
  outline: 0 !important;
  filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html body .fs-cal .fs-cell.is-blink-free { animation: none !important; }
}
/* >>> VELRA-SV50b END <<< */

/* >>> VELRA-SV52 START (29/10/2026) <<< */

/* ---- 1) Agenda : fleches gauche / droite (changement de joueur) sans
      contour. Le contour clavier (focus-visible) reste pour l'accessibilite. */
html body .fs .fs-switch__btn,
html body .fs .fs-switch__btn:hover,
html body .fs .fs-switch__btn:focus,
html body .fs .fs-switch__btn:active,
html body .fs .fs-switch__btn:disabled {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}
html body .fs .fs-switch__btn::before,
html body .fs .fs-switch__btn::after { content: none !important; display: none !important; }
html body .fs .fs-switch__btn:focus-visible { outline: 2px solid var(--accent-soft, #8ec3ff) !important; outline-offset: 2px; }

/* ---- 2) Cards Fan Session (tablette <= 1300px, mobile <= 600px) :
      - le(s) rond(s) user sont AU CENTRE de la card ; le rond principal
        reste aligne verticalement d'une card a l'autre (meme colonne) ;
      - le prix est centre dans la partie DROITE (entre les ronds et la
        bande « Prix / heure | Session »).
      La grille est rendue symetrique : la 1re colonne (logo) a la meme
      largeur que la bande de droite (moins le retrait gauche de la card),
      le titre / la classe / les sessions debordent sur cette colonne
      juste apres le logo (meme position qu'avant). */
@media (max-width: 1300px) {
  html body .fs .fs-packs:not(.is-compact) .fs-pack {
    --r-cg: 22px;
    column-gap: var(--r-cg) !important;
    grid-template-columns:
      calc(var(--r-stats) - var(--r-pl)) minmax(0, 1fr) var(--r-avw) minmax(0, 1fr) var(--r-stats) !important;
  }
  html body .fs .fs-packs:not(.is-compact) .fs-pack > .fs-pack__icon { grid-column: 1 !important; justify-self: start !important; }
  html body .fs .fs-packs:not(.is-compact) .fs-pack__title,
  html body .fs .fs-packs:not(.is-compact) .fs-pack__head .fs-pack__label,
  html body .fs .fs-packs:not(.is-compact) .fs-pack__sessions {
    grid-column: 1 / 3 !important;
    margin-left: calc(var(--r-icon) + var(--r-cg)) !important;
    min-width: 0;
  }
  html body .fs .fs-packs:not(.is-compact) .fs-pack > .fs-pack__mid {
    grid-column: 3 !important;
    justify-self: center !important;
  }
  html body .fs .fs-packs:not(.is-compact) .fs-pack__price {
    grid-column: 4 !important;
    justify-self: center !important;
    text-align: center !important;
  }
  html body .fs .fs-packs:not(.is-compact) .fs-pack__pnote {
    grid-column: 4 !important;
    justify-self: center !important;
    text-align: center !important;
  }
  html body .fs .fs-packs:not(.is-compact) .fs-pack > .fs-pack__stats { grid-column: 5 !important; }
}
@media (max-width: 900px) and (min-width: 601px) {
  html body .fs .fs-packs:not(.is-compact) .fs-pack { --r-cg: 16px; }
}
@media (max-width: 600px) {
  html body .fs .fs-packs:not(.is-compact) .fs-pack { --r-cg: 8px; }
  html body .fs .fs-packs:not(.is-compact) .fs-pack__price { max-width: none !important; }
}
/* >>> VELRA-SV52 END <<< */

/* v53 : profil joueur : bouton « Choisir ce joueur » bleu, pas de logo de
   classe sur le rond, plus de rubrique « Compétences ». */
html body .fs-profile .fs-profile__pick { background: var(--accent, #5eaaff) !important; color: #040e1e !important; }
html body .fs-profile .fs-profile__pick:hover { background: #7cbcff !important; filter: none; }
html body .fs-profile .fs-avatar__cls,
html body .fs-profile .fs-profile__skills,
html body .fs-profile .fs-profile__sim > .fs-profile__h:first-child { display: none !important; }

/* >>> VELRA-SV57 START (31/10/2026) <<< */
/* ---- 1) Bande du bas des cards : plus de petit trait de separation ;
      des losanges du motif se remplissent au hasard (services.js SV57). */
html body .fs .fs-packs .fs-pack > .fs-pack__stats::after,
html body .fs .fs-packs .fs-pack.is-active > .fs-pack__stats::after { content: none !important; display: none !important; }
html body .fs .fs-packs .fs-pack > .fs-pack__stats > div,
html body .fs .fs-packs .fs-pack.is-active > .fs-pack__stats > div { border-left: 0 !important; border-top: 0 !important; }
html body .fs .fs-packs .fs-pack > .fs-pack__stats > .fs-pack__dias {
  position: absolute; left: 0; top: 1px; z-index: -1;
  width: 100%; height: calc(100% - 1px);
  overflow: hidden;
  pointer-events: none;
}
html body .fs .fs-packs .fs-pack__dias polygon {
  fill: rgb(var(--pk-rgb));
  opacity: 0;
}
html body .fs .fs-packs .fs-pack__dias polygon.is-lit { animation: fsDiaLit 2.2s ease-in-out 1 both; }
@keyframes fsDiaLit {
  0% { opacity: 0; }
  30% { opacity: .62; }
  62% { opacity: .62; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body .fs .fs-packs .fs-pack__dias polygon.is-lit { animation: none; }
}

/* ---- 2) « Ajouter au panier » : inactif tant que chaque session n'a pas
      sa date (comme « Passer la commande »). */
html body .fs .fs-actions .fs-btn--cart:disabled,
html body .fs .fs-actions .fs-btn--cart:disabled:hover,
html body .fs .fs-actions .fs-btn--cart:disabled:active {
  cursor: not-allowed;
  color: rgba(214, 230, 255, .55);
  background: #142c58;
  transform: none;
}

/* ---- 3) Meme joueur choisi plusieurs fois : UN rectangle avec « ×2 »
      (titre + prix) et le total pour ce joueur. */
.fs-order__x {
  display: inline-block;
  margin-left: 6px;
  font-style: normal;
  font-family: 'Barlow', sans-serif;
  font-size: .62em; font-weight: 800; letter-spacing: .02em;
  color: var(--pk-hi, #8ec3ff);
  vertical-align: .12em;
}
.fs-order__price .fs-order__x { margin: 0 4px 0 0; font-size: .58em; vertical-align: .22em; }
.fs-order__ptotal {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(206, 224, 255, .62); white-space: nowrap;
  max-width: 170px; overflow: hidden; text-overflow: ellipsis;
}
/* Agenda : creneaux deja choisis avec ce joueur (pack jumeau) : visibles. */
html body .fs-cal .fs-cell.is-picked-twin,
html body .fs-cal .fs-cell.is-picked-twin:disabled,
html body .fs-cal .fs-cell.is-picked-twin:disabled:not(.is-past),
html body .fs-cal .fs-cell.is-picked-twin:disabled:not(.is-past):hover {
  cursor: default;
  background: var(--accent2, #3d8bfd) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--accent-soft, #8ec3ff) !important;
  opacity: .78;
}
/* >>> VELRA-SV57 END <<< */

/* >>> VELRA-SV57b START (31/10/2026) <<<
   Navbar : elle se raccourcit (comme sur les autres pages) quand la 1re
   bande laterale s'ouvre. La regle « html body #navbar { right:0 } » de
   cette page (selecteur ID) l'en empechait. */
html body #navbar,
html body #navbar.navbar--visible {
  transition: transform .5s cubic-bezier(.22,1,.36,1),
              opacity .3s ease,
              padding .35s cubic-bezier(.4,0,.2,1),
              right .38s cubic-bezier(.22, 1, .36, 1) !important;
}
@media (min-width: 1001px) {
  html.va-nav-shrink:not(.va-push-open) body #navbar,
  html.va-nav-shrink:not(.va-push-open) body #navbar.navbar--visible { right: min(360px, 92vw) !important; }
  html.va-push-open body #navbar,
  html.va-push-open body #navbar.navbar--visible { right: 360px !important; }
}
/* >>> VELRA-SV57b END <<< */

/* >>> VELRA-SV58 START (31/10/2026) <<< */
/* ---- 1) Card refermee (compacte) : losanges du motif de la card qui se
      remplissent au hasard (calque cree par services.js SV57/SV58). */
html body .fs .fs-packs .fs-pack > .fs-pack__dias--card {
  position: absolute; left: 0; top: 0; z-index: -1;
  width: 100%; height: 100%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 100%);
}
html body .fs .fs-packs:not(.is-compact) .fs-pack > .fs-pack__dias--card { display: none; }

/* ---- 2) Plus de contour autour des cards ni de trait en haut de la bande
      du bas. A la place : un trait EPAIS sur toute la largeur du haut de la
      card (card ouverte ET refermee). Sa couleur suit l'etat de la card
      (survol / choisie / active). */
html body .fs .fs-packs .fs-pack,
html body .fs .fs-packs .fs-pack:hover,
html body .fs .fs-packs .fs-pack.is-chosen,
html body .fs .fs-packs .fs-pack.is-active,
html body .fs .fs-packs.is-compact .fs-pack,
html body .fs .fs-packs.is-compact .fs-pack.is-active {
  border-color: transparent !important;
  box-shadow: none !important;
}
html body .fs .fs-packs .fs-pack > .fs-pack__stats,
html body .fs .fs-packs .fs-pack:hover > .fs-pack__stats,
html body .fs .fs-packs .fs-pack.is-active > .fs-pack__stats {
  background-image: none !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
html body .fs .fs-packs .fs-pack::after,
html body .fs .fs-packs .fs-pack:hover::after,
html body .fs .fs-packs .fs-pack.is-active::after,
html body .fs .fs-packs.is-compact .fs-pack::after,
html body .fs .fs-packs.is-compact .fs-pack:hover::after,
html body .fs .fs-packs.is-compact .fs-pack.is-active::after { display: none !important; }
html body .fs .fs-packs .fs-pack::before,
html body .fs .fs-packs .fs-pack:hover::before,
html body .fs .fs-packs .fs-pack.is-active::before,
html body .fs .fs-packs.is-compact .fs-pack::before,
html body .fs .fs-packs.is-compact .fs-pack:hover::before,
html body .fs .fs-packs.is-compact .fs-pack.is-active::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -1px !important; left: -1px !important; right: -1px !important; bottom: auto !important;
  width: auto !important; height: 5px !important;
  -webkit-clip-path: none !important; clip-path: none !important;
  background: color-mix(in srgb, rgb(var(--pk-rgb)) 70%, var(--pk-dk2, #0a1530)) !important;
  z-index: 2 !important;
  transition: background-color .2s ease;
}
html body .fs .fs-packs .fs-pack.is-chosen::before { background: color-mix(in srgb, rgb(var(--pk-rgb)) 85%, #fff) !important; }
@media (hover: hover) {
  html body .fs .fs-packs .fs-pack:hover::before { background: rgb(var(--pk-rgb)) !important; }
}
html body .fs .fs-packs .fs-pack.is-active::before,
html body .fs .fs-packs.is-compact .fs-pack.is-active::before { background: var(--pk-hi, rgb(var(--pk-rgb))) !important; }
@media (max-width: 600px) {
  html body .fs .fs-packs .fs-pack::before,
  html body .fs .fs-packs.is-compact .fs-pack::before { height: 3px !important; }
}
/* >>> VELRA-SV58 END <<< */

/* >>> VELRA-SV59 START (31/10/2026) <<< */
/* ---- 1) Trait epais du haut des cards fan session : il ne depasse plus
      a gauche ni a droite (exactement la largeur de la card). */
html body .fs .fs-packs .fs-pack::before,
html body .fs .fs-packs .fs-pack:hover::before,
html body .fs .fs-packs .fs-pack.is-active::before,
html body .fs .fs-packs.is-compact .fs-pack::before,
html body .fs .fs-packs.is-compact .fs-pack:hover::before,
html body .fs .fs-packs.is-compact .fs-pack.is-active::before {
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Le fond de la card s'arrete au meme bord que le trait et la bande du bas. */
html body .fs .fs-packs .fs-pack { background-clip: padding-box !important; }

/* ---- 2) Survol des cards fan session : leger RETRECISSEMENT fluide
      (card ouverte et card refermee). */
html body .fs .fs-packs .fs-pack {
  scale: 1;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), scale .38s cubic-bezier(.22, 1, .36, 1),
              box-shadow .25s ease, border-color .25s ease, opacity .3s ease, filter .3s ease;
}
@media (hover: hover) {
  html body .fs .fs-packs .fs-pack:hover { scale: .97; }
}
html body .fs .fs-packs .fs-pack:active { scale: .955; }
html body .fs .fs-packs.fs-no-trans .fs-pack { transition: scale .38s cubic-bezier(.22, 1, .36, 1) !important; }
@media (prefers-reduced-motion: reduce) {
  html body .fs .fs-packs .fs-pack:hover,
  html body .fs .fs-packs .fs-pack:active { scale: 1; }
}

/* ---- 3) Ronds user : le contour est A L'EXTERIEUR du rond (il ne passe
      plus par-dessus la photo de profil). */
html body .fs .fs-pack__avatar::before {
  inset: calc((var(--pk-ring, 1.5px) + .5px) * -1) !important;
}
html body .fs .fs-avatar::before {
  inset: calc((var(--rt, 1px) + .5px) * -1) !important;
}
html body .fs .fs-user .fs-avatar::after { inset: -9px !important; }
@media (max-width: 600px) {
  html body .fs .fs-user .fs-avatar::after { inset: -7px !important; }
}

/* ---- 4) Joueur selectionne : plus de rond bleu sous la fleche de
      validation, seulement la fleche, de la meme couleur que le contour. */
html body .fs .fs-check,
html body .fs .fs-user.is-selected .fs-check {
  background: none !important;
  box-shadow: none !important;
  color: var(--av-ring, var(--accent-soft, #8ec3ff)) !important;
}
html body .fs .fs-check svg {
  width: 78% !important; height: 78% !important;
  filter: drop-shadow(0 1px 2px rgba(2, 8, 20, .65));
}

/* ---- 5) Bande du bas (et card refermee) : motif redessine par
      services.js avec, au hasard, quelques losanges NON formes. */
html body .fs .fs-packs .fs-pack > .fs-pack__stats.has-rpat::before {
  -webkit-mask: var(--fs-rpat) !important;
  mask: var(--fs-rpat) !important;
}

/* ---- 6) Joueurs & commande / Agenda : se replie / s'ouvre depuis son
      centre (services.js) : pas d'animation d'apparition en plus. */
html body .fs .fs-booking.is-folding { animation: none !important; }

/* ---- 7) Haut de la page : aucun vide au-dessus du hero. */
html, html body.services-page { margin-top: 0 !important; padding-top: 0 !important; }
html body.services-page > .sv-hero { margin-top: 0 !important; }
/* >>> VELRA-SV59 END <<< */

/* >>> VELRA-SV62 START (02/11/2026) <<<
   1) Bande « Joueurs & commande | Agenda » toujours visible : sans card
      choisie, seule la bande s'affiche (.fs-booking.is-idle).
   2) Cards fan session : pendant l'ouverture / fermeture, le contenu ne
      deborde plus de la card (le rond numerote garde sa place en haut a
      droite).
   3) Nom du joueur juste sous le rond photo de profil. */
html body .fs .fs-booking.is-idle > .fs-checkout,
html body .fs .fs-booking.is-idle .fs-stage > .fs-view { display: none !important; }
html body .fs .fs-booking.is-idle .fs-stage { padding-bottom: 0 !important; }
html body .fs .fs-booking.is-idle .fs-views { margin-bottom: 0 !important; border-bottom-color: transparent !important; }
html body .fs .fs-booking.is-idle .fs-views__btn { cursor: pointer; }
html body .fs .fs-booking.is-idle .fs-views__btn.is-on::after { opacity: .55; }

@supports (overflow-clip-margin: 1px) {
  html body .fs .fs-packs.is-morphing .fs-pack {
    overflow: clip !important;
    overflow-clip-margin: 16px;
  }
}
@supports not (overflow-clip-margin: 1px) {
  /* Safari : coupe tout sauf l'angle haut droit (rond numerote). */
  html body .fs .fs-packs.is-morphing .fs-pack {
    -webkit-clip-path: polygon(0 0, calc(100% - 22px) 0, calc(100% - 22px) -22px, calc(100% + 22px) -22px, calc(100% + 22px) 22px, 100% 22px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 22px) 0, calc(100% - 22px) -22px, calc(100% + 22px) -22px, calc(100% + 22px) 22px, 100% 22px, 100% 100%, 0 100%);
  }
}

html body .fs .fs-packs .fs-pack__pseudo,
html body .fs .fs-packs .fs-pack__avatars--1 + .fs-pack__pseudo,
html body .fs .fs-packs .fs-pack__avatars--2 + .fs-pack__pseudo,
html body .fs .fs-packs .fs-pack__avatars--3 + .fs-pack__pseudo {
  position: relative; z-index: 4;
  margin-top: 8px !important;
  text-shadow: 0 1px 6px rgba(2, 8, 20, .9);
}
@media (max-width: 600px) {
  html body .fs .fs-packs .fs-pack__pseudo,
  html body .fs .fs-packs .fs-pack__avatars--1 + .fs-pack__pseudo,
  html body .fs .fs-packs .fs-pack__avatars--2 + .fs-pack__pseudo,
  html body .fs .fs-packs .fs-pack__avatars--3 + .fs-pack__pseudo { margin-top: 4px !important; }
}
/* >>> VELRA-SV62 END <<< */

/* >>> VELRA-SV63 START (02/11/2026) <<<
   1) Joueurs & commande : noms en blanc ; contour du rond et fleche de
      validation en blanc ; photo assombrie quand le joueur est choisi.
   2) Bouton « Ajouter encore » (packs de plusieurs sessions) sous le
      joueur choisi : le rond affiche ×2, ×3.
   3) Tablette (<= 1300 px) et mobile (<= 600 px) : le trait epais des
      cards fan session passe a GAUCHE, a la verticale. */
html body .fs .fs-user__name,
html body .fs .fs-user.is-selected .fs-user__name { color: #ffffff !important; }
html body .fs .fs-user.is-selected .fs-avatar { --av-ring: #ffffff !important; --av-rw: 1.5px; }
html body .fs .fs-user.is-selected .fs-avatar::after,
html body .fs .fs-user.is-selected:hover .fs-avatar::after { border-color: #ffffff !important; }
html body .fs .fs-check,
html body .fs .fs-user.is-selected .fs-check { color: #ffffff !important; z-index: 4; }
html body .fs .fs-avatar > img:not(.fs-avatar__cls),
html body .fs .fs-avatar > .fs-avatar__initials { transition: filter .25s ease; }
html body .fs .fs-user.is-selected .fs-avatar > img:not(.fs-avatar__cls),
html body .fs .fs-user.is-selected .fs-avatar > .fs-avatar__initials { filter: brightness(.45) saturate(.85); }
/* v64 : le logo de classe reste a pleine luminosite. */
html body .fs .fs-avatar > img.fs-avatar__cls,
html body .fs .fs-user.is-selected .fs-avatar > img.fs-avatar__cls { filter: none !important; }

html body .fs .fs-user__more {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin: 8px auto 0; height: 28px; padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 0 !important;
  -webkit-clip-path: none !important; clip-path: none !important;
  background: rgba(255, 255, 255, .06); color: #ffffff;
  font-family: var(--font-body, 'Barlow', sans-serif); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
html body .fs .fs-user__more svg { width: 12px; height: 12px; flex: 0 0 auto; }
html body .fs .fs-user-cell.can-more .fs-user__more { visibility: visible; opacity: 1; pointer-events: auto; }
html body .fs .fs-user__more:hover,
html body .fs .fs-user__more:focus-visible { background: #ffffff; color: #06142a; border-color: #ffffff; outline: none; }
@media (max-width: 600px) {
  html body .fs .fs-user__more { height: 26px; padding: 0 8px; font-size: 9.5px; letter-spacing: .06em; }
  html body .fs .fs-user__more span { display: none; }
  html body .fs .fs-user__more::after { content: "Encore"; }
}

@media (max-width: 1300px) {
  html body .fs .fs-packs .fs-pack::before,
  html body .fs .fs-packs .fs-pack:hover::before,
  html body .fs .fs-packs .fs-pack.is-active::before,
  html body .fs .fs-packs.is-compact .fs-pack::before,
  html body .fs .fs-packs.is-compact .fs-pack:hover::before,
  html body .fs .fs-packs.is-compact .fs-pack.is-active::before {
    top: -1px !important; bottom: -1px !important; left: -1px !important; right: auto !important;
    width: 5px !important; height: auto !important;
  }
}
@media (max-width: 600px) {
  html body .fs .fs-packs .fs-pack::before,
  html body .fs .fs-packs.is-compact .fs-pack::before { width: 4px !important; height: auto !important; }
}
/* >>> VELRA-SV63 END <<< */

/* >>> VELRA-SV69 START (02/11/2026) <<<
   Agenda :
   1) Plus de contour qui reste sur une case (survol « colle » au toucher,
      focus apres un clic, case d'un autre joueur du pack) : une case libre
      a TOUJOURS le meme contour fin ; seul le fond change au survol.
   2) Plus d'effet lumineux (halo / glow) sur les cases.
   3) Ligne du haut (nom, 1/2, sessions, semaine) : ne passe plus jamais
      a la ligne ; le nom se coupe (…) s'il manque de place. */

/* 1) + 2) Cases */
html body .fs-cal .fs-cell {
  -webkit-tap-highlight-color: transparent;
  outline: 0 !important;
  filter: none !important;
  transition: background-color .18s ease !important;
}
html body .fs-cal .fs-cell:not(:disabled):not(.is-picked):not(.is-picked-twin):not(.is-past),
html body .fs-cal .fs-cell:not(:disabled):not(.is-picked):not(.is-picked-twin):not(.is-past):focus,
html body .fs-cal .fs-cell:not(:disabled):not(.is-picked):not(.is-picked-twin):not(.is-past):focus-visible,
html body .fs-cal .fs-cell:not(:disabled):not(.is-picked):not(.is-picked-twin):not(.is-past):active {
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .18) !important;
  outline: 0 !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .fs-cal .fs-cell:not(:disabled):not(.is-picked):not(.is-picked-twin):not(.is-past):hover { background: #16367a !important; }
}
@media (hover: none), (pointer: coarse) {
  html body .fs-cal .fs-cell:not(:disabled):not(.is-picked):not(.is-picked-twin):not(.is-past):hover { background: #0d2552 !important; }
}
/* clavier : le fond change, pas de contour */
html body .fs-cal .fs-cell:not(:disabled):not(.is-picked):focus-visible { background: #16367a !important; }
/* case choisie : bleu plein, contour fin, AUCUN halo */
html body .fs-cal .fs-cell.is-picked,
html body .fs-cal .fs-cell.is-picked:hover,
html body .fs-cal .fs-cell.is-picked:focus,
html body .fs-cal .fs-cell.is-picked:focus-visible {
  background: var(--accent2, #3d8bfd) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--accent-soft, #8ec3ff) !important;
  outline: 0 !important;
}
/* case choisie pour un AUTRE joueur du pack : fond teinte, sans contour */
html body .fs-cal .fs-cell.is-picked-other:not(.is-picked):not(:disabled),
html body .fs-cal .fs-cell.is-picked-other:not(.is-picked):not(:disabled):hover {
  background: #1d3f80 !important;
  box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .18) !important;
}
/* clignotement « À compléter » : pas de halo */
html body .fs-cal .fs-cell.is-blink-free { box-shadow: inset 0 0 0 1px rgba(94, 170, 255, .18) !important; }

/* 3) Ligne du haut sur une seule ligne (PC / tablette) */
html body .fs-switch,
html body .fs-after > .fs-agenda .fs-switch,
html body .fs-stage .fs-after > .fs-agenda .fs-switch { max-width: none !important; }
html body .fs-switch__mid { flex-wrap: nowrap !important; min-width: 0; }
html body .fs-switch__mid > .fs-switch__name { flex: 0 1 auto !important; min-width: 0 !important; }
html body .fs-switch__name { flex-wrap: nowrap !important; white-space: nowrap; }
/* le nom ne se coupe qu'en tout dernier recours */
html body .fs-switch__name .fs-switch__label { flex: 0 1 auto; min-width: 3ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .fs-switch__name .fs-switch__pos,
html body .fs-switch__mid > .fs-switch__sep,
html body .fs-switch__mid > .fs-week { flex: 0 0 auto !important; white-space: nowrap; }
html body .fs-week { flex-wrap: nowrap !important; }
@media (max-width: 900px) {
  html body .fs-switch__mid { gap: 6px 10px !important; }
  html body .fs-switch__name { gap: 8px !important; }
}
/* Telephone : 2 lignes PROPRES (nom + sessions, puis la semaine), sans trait */
@media (max-width: 600px) {
  html body .fs-switch__mid { flex-wrap: wrap !important; row-gap: 8px !important; }
  html body .fs-switch__mid > .fs-switch__name { flex: 1 0 100% !important; justify-content: center !important; }
  html body .fs-switch__mid > .fs-switch__sep { display: none !important; }
  html body .fs-switch__mid > .fs-week { flex: 0 0 auto !important; margin: 0 auto; }
}
/* >>> VELRA-SV69 END <<< */

/* >>> VELRA-SV71 START (05/11/2026) <<<
   1) Agenda : « Horaires en heure de <pays> » au-dessus des heures, heures
      converties dans le fuseau de la langue choisie (format 12 h + AM/PM),
      decalage UTC (ex. UTC+1) au centre de l'en-tete de l'agenda.
   2) Tablette / mobile (<= 1300 px) : le trait epais a GAUCHE des cards
      reste DANS la card (plus de debordement haut / bas / gauche sur le
      bord transparent de 1 px) et garde la meme epaisseur au survol. */

/* 1) Fuseau horaire */
html body .fs-tz {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 8px; padding: 0;
  font-family: var(--font-body, 'Barlow', sans-serif);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(206, 224, 255, .72);
}
html body .fs-tz b { color: #e6f1ff; font-weight: 700; }
html body .fs-tzbadge {
  flex: 0 0 auto !important; display: inline-flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 9px; white-space: nowrap;
  border: 1px solid rgba(94, 170, 255, .4); background: rgba(94, 170, 255, .12);
  font-family: var(--font-body, 'Barlow', sans-serif); font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  color: #8ec3ff;
}
html body .fs-cal .fs-cal__hour { flex-direction: column; justify-content: flex-end; line-height: 1.05; gap: 1px; text-transform: none; }
html body .fs-cal .fs-cal__hnum { font-weight: 700; }
html body .fs-cal .fs-cal__ampm { font-size: .78em; font-weight: 700; letter-spacing: .04em; opacity: .75; }
@media (max-width: 600px) {
  html body .fs-cal { grid-template-columns: 46px repeat(7, minmax(0, 1fr)) !important; }
  html body .fs-cal .fs-cal__hour { flex-direction: row; align-items: center; justify-content: flex-end; gap: 3px; }
  html body .fs-tz { font-size: 10px; letter-spacing: .08em; }
  html body .fs-tzbadge { height: 22px; font-size: 10.5px; }
}

/* 2) Trait gauche des cards (tablette / mobile) */
@media (max-width: 1300px) {
  html body .fs .fs-packs .fs-pack,
  html body .fs .fs-packs .fs-pack:hover,
  html body .fs .fs-packs .fs-pack.is-chosen,
  html body .fs .fs-packs .fs-pack.is-chosen:hover,
  html body .fs .fs-packs .fs-pack.is-active,
  html body .fs .fs-packs .fs-pack.is-active:hover { border-left-color: transparent !important; }
  html body .fs .fs-packs .fs-pack::before,
  html body .fs .fs-packs .fs-pack:hover::before,
  html body .fs .fs-packs .fs-pack.is-chosen::before,
  html body .fs .fs-packs .fs-pack.is-active::before,
  html body .fs .fs-packs.is-compact .fs-pack::before,
  html body .fs .fs-packs.is-compact .fs-pack:hover::before,
  html body .fs .fs-packs.is-compact .fs-pack.is-active::before {
    top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important;
    width: 4px !important; height: auto !important;
    box-sizing: border-box !important;
    transform: none !important; scale: none !important; translate: none !important;
    border: 0 !important; box-shadow: none !important; outline: 0 !important;
  }
}
@media (max-width: 600px) {
  html body .fs .fs-packs .fs-pack::before,
  html body .fs .fs-packs .fs-pack:hover::before,
  html body .fs .fs-packs .fs-pack.is-active::before,
  html body .fs .fs-packs.is-compact .fs-pack::before,
  html body .fs .fs-packs.is-compact .fs-pack:hover::before,
  html body .fs .fs-packs.is-compact .fs-pack.is-active::before { width: 3px !important; }
}
/* >>> VELRA-SV71 END <<< */

/* >>> VELRA-SV73 START (05/11/2026) <<<
   1) Agenda : la ligne « Horaires en heure de <pays> » est sur sa propre
      ligne entre l'en-tete (joueur / semaine) et la grille, espacement net ;
      decalage UTC a DROITE du texte, en texte simple (plus de cadre).
   2) Agenda (PC / tablette) : colonne des jours (LUN 02...) a la largeur de
      son contenu + 12 px avant la grille (moins d'espace a gauche). */
html body .fs-tz {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 4px 10px; margin: 18px 0 14px; padding: 0; text-align: center;
}
html body .fs-tz__txt { display: inline; }
html body .fs-tz__off {
  display: inline; padding: 0; border: 0; background: none; box-shadow: none;
  font: inherit; letter-spacing: .08em; color: #8ec3ff; white-space: nowrap;
}
html body .fs-tzbadge { display: none !important; }
@media (min-width: 601px) {
  html body .fs-cal { grid-template-columns: max-content repeat(24, minmax(0, 1fr)) !important; }
  html body .fs-cal .fs-cal__day { justify-content: flex-start; padding-left: 0 !important; padding-right: 12px !important; min-width: 0; white-space: nowrap; }
  html body .fs-cal .fs-cal__corner { min-width: 0; }
}
@media (max-width: 600px) {
  html body .fs-tz { margin: 14px 0 10px; gap: 2px 8px; }
}
/* >>> VELRA-SV73 END <<< */

/* >>> VELRA-SV74 START (05/11/2026) <<<
   1) Haut de la page : quand un tiroir du footer s'ouvre, <main> monte
      (place liberee pour le tiroir). Le hero monte maintenant AVEC lui
      (meme valeur, posee sur <body> par components.js V74) : le titre
      « Fan session » ne passe plus sur les onglets du hero.
   2) Tablette (<= 1300 px) et mobile (<= 600 px), cards Fan session
      REFERMEES : titre et « Classe N » au CENTRE de la card ; rond numero
      (nombre de selections) plus petit. Les fondus / la bande qui se
      retire de gauche a droite sont pilotes par services.js (V74). */
html body.services-page > .sv-hero {
  translate: 0 calc(-1 * var(--footer-page-shift, 0px));
}
@media (max-width: 1300px) {
  html body .fs .fs-packs.is-compact .fs-pack__head { justify-self: stretch !important; }
  html body .fs .fs-packs.is-compact .fs-pack__head .fs-pack__title,
  html body .fs .fs-packs.is-compact .fs-pack__head .fs-pack__label {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    text-align: center !important;
    width: auto !important;
    max-width: calc(100% - 2 * (var(--rc-icon, 60px) + 70px));
    position: relative; z-index: 1;
    pointer-events: none;
  }
  html body .fs .fs-packs.is-compact .fs-pack__head .fs-pack__title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html body .fs .fs-packs .fs-pack .fs-pack__badge,
  html body .fs .fs-packs .fs-pack.is-active .fs-pack__badge {
    min-width: 20px !important; height: 20px !important;
    padding: 0 5px !important;
    font-size: 10.5px !important;
  }
}
@media (max-width: 600px) {
  html body .fs .fs-packs.is-compact .fs-pack__head .fs-pack__title,
  html body .fs .fs-packs.is-compact .fs-pack__head .fs-pack__label {
    max-width: calc(100% - 2 * (var(--rc-icon, 44px) + 58px));
  }
  html body .fs .fs-packs .fs-pack .fs-pack__badge,
  html body .fs .fs-packs .fs-pack.is-active .fs-pack__badge {
    min-width: 18px !important; height: 18px !important;
    padding: 0 4px !important; font-size: 10px !important;
  }
}
/* >>> VELRA-SV74 END <<< */

/* >>> VELRA-SV75 START (06/11/2026) <<<
   1) Cards fan session, tablette (<= 1300 px) et mobile (<= 600 px) :
      - la bande de droite n'affiche plus « Prix / heure » ni « Session » :
        le PRIX de la card prend leur place, centre dans la bande (avec sa
        petite mention en dessous sur tablette) ;
      - les ronds user sont centres dans l'espace libere, entre la fin des
        textes de gauche (titre, classe, sessions) et la bande ; la
        colonne des textes a la MEME largeur sur toutes les cards
        (--sv75-lead, calculee par services.js SV75), les ronds restent
        donc alignes d'une card a l'autre.
   2) Agenda : « Horaires en heure de … UTC » exactement a mi-distance
      entre l'en-tete (joueur / semaine) et la grille (--sv75-tz-t /
      --sv75-tz-b, ajustees par services.js SV75 sur les textes visibles).
   PC (> 1300 px) : inchange. */

/* ---------- 1) Cards : prix dans la bande ---------- */
@media (max-width: 1300px) {
  html body .fs .fs-packs:not(.is-compact) .fs-pack {
    --sv75-band: var(--r-stats, 150px);
    grid-template-columns: var(--sv75-lead, minmax(0, 46%)) minmax(var(--r-avw, 110px), 1fr) var(--sv75-band) !important;
  }
  /* Logo + textes : 1re colonne (largeur commune a toutes les cards) */
  html body .fs .fs-packs:not(.is-compact) .fs-pack > .fs-pack__icon {
    grid-column: 1 !important; justify-self: start !important;
  }
  html body .fs .fs-packs:not(.is-compact) .fs-pack__title,
  html body .fs .fs-packs:not(.is-compact) .fs-pack__head .fs-pack__label,
  html body .fs .fs-packs:not(.is-compact) .fs-pack__sessions {
    grid-column: 1 / 2 !important;
    margin-left: calc(var(--r-icon) + var(--r-cg, 16px)) !important;
    min-width: 0;
  }
  /* Ronds user : centres entre les textes et la bande */
  html body .fs .fs-packs:not(.is-compact) .fs-pack > .fs-pack__mid {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
  }
  /* Bande : plus de « Prix / heure » ni de « Session » (le motif et ses
     losanges animes restent) */
  /* v75b : la bande couvre TOUTE la hauteur de la card (du bord haut au
     bord bas, bordure comprise) : elle est posee en absolu sur la 3e
     colonne (les lignes « auto » = bords de la card). La hauteur de la
     card ne change pas. */
  html body .fs .fs-packs:not(.is-compact) .fs-pack > .fs-pack__stats {
    position: absolute !important;
    grid-column: 3 !important;
    grid-row: auto !important;
    /* v75d : exactement aux bords VISIBLES de la card (sa bordure de 1 px
       est transparente) : plus aucun debordement. */
    top: 0 !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    width: auto !important; height: auto !important;
    margin: 0 !important;
    align-self: auto !important;
  }
  html body .fs .fs-packs:not(.is-compact) .fs-pack > .fs-pack__stats > .fs-pack__stat { visibility: hidden !important; }
  /* Prix : au centre de la bande, au-dessus du motif */
  html body .fs .fs-packs:not(.is-compact) .fs-pack__price {
    grid-column: 3 !important;
    grid-row: 1 / 4 !important;
    justify-self: center !important;
    align-self: center !important;
    position: relative; z-index: 3;
    max-width: calc(var(--sv75-band) - 18px) !important;
    /* prix + mention : groupe centre dans la bande (hauteurs mesurees par
       services.js SV75 : --sv75-ph / --sv75-nh) */
    margin: 0 0 calc(var(--sv75-nh, 14px) + 5px) !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    /* couleur : celle de la classe, comme sur PC (pas de blanc force) */
    font-size: 26px !important;
    line-height: 1.02 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    pointer-events: none;
  }
  html body .fs .fs-packs:not(.is-compact) .fs-pack__pnote {
    grid-column: 3 !important;
    grid-row: 1 / 4 !important;
    justify-self: center !important;
    align-self: center !important;
    position: relative; z-index: 3;
    max-width: calc(var(--sv75-band) - 22px) !important;
    margin: calc(var(--sv75-ph, 27px) + 5px) 0 0 !important;
    text-align: center !important;
    white-space: normal !important;
    text-wrap: balance;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    pointer-events: none;
  }
}
@media (max-width: 900px) and (min-width: 601px) {
  html body .fs .fs-packs:not(.is-compact) .fs-pack__price { font-size: 22px !important; }
  html body .fs .fs-packs:not(.is-compact) .fs-pack__pnote { font-size: 10px !important; }
}
@media (max-width: 600px) {
  html body .fs .fs-packs .fs-pack { --r-stats: 74px; }
  html body .fs .fs-packs:not(.is-compact) .fs-pack__price {
    grid-row: 1 / 4 !important;
    align-self: center !important;
    margin: 0 !important;
    max-width: calc(var(--sv75-band) - 10px) !important;
    font-size: 16px !important;
    line-height: 1.05 !important;
  }
  html body .fs .fs-packs:not(.is-compact) .fs-pack__pnote { display: none !important; }
}
/* v75b : motif de la bande (et ses losanges animes) jusqu'au bord HAUT de
   la bande, sur tous les formats (il commencait 1 px plus bas). */
html body .fs .fs-packs .fs-pack > .fs-pack__stats::before,
html body .fs .fs-packs .fs-pack > .fs-pack__stats.has-rpat::before { top: 0 !important; }
html body .fs .fs-packs .fs-pack > .fs-pack__stats > .fs-pack__dias { top: 0 !important; height: 100% !important; }
/* mesure de la largeur naturelle des textes (services.js SV75, une image) */
html body .fs .fs-packs.sv75-measure .fs-pack__title,
html body .fs .fs-packs.sv75-measure .fs-pack__head .fs-pack__label,
html body .fs .fs-packs.sv75-measure .fs-pack__sessions {
  white-space: nowrap !important; width: max-content !important; max-width: none !important;
}

/* ---------- 2) Agenda : ligne du fuseau horaire centree ---------- */
html body .fs .fs-agenda > .fs-switch { margin-bottom: 0 !important; }
html body .fs .fs-agenda > .fs-tz {
  margin: var(--sv75-tz-t, 20px) 0 var(--sv75-tz-b, 20px) !important;
}
/* >>> VELRA-SV75 END <<< */

/* >>> VELRA-SV75D START (06/11/2026) <<<
   Tablette (<= 1300 px) et mobile (<= 600 px) :
   1) le cadre qui enveloppe les cards (Premium / Meilleure offre) reste
      entre les marges gauche et droite de la page, exactement comme le
      conteneur de l'agenda (il debordait de son padding + bordure) ;
   2) « Premium » / « Meilleure offre » parfaitement centres : l'espace
      ajoute apres la derniere lettre (letter-spacing) est compense. */
@media (max-width: 1300px) {
  html body .fs .fs-packs {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body .fs .fs-pgroup .fs-pgroup__tag { text-indent: .18em; }
}
@media (max-width: 600px) {
  html body .fs .fs-pgroup .fs-pgroup__tag { text-indent: .12em; }
}
/* >>> VELRA-SV75D END <<< */

/* >>> VELRA-SV75E START (06/11/2026) <<<
   Tablette (<= 1300 px) et mobile (<= 600 px) : les cadres « Premium » et
   « Meilleure offre » FUSIONNENT en un seul conteneur (plus d'espace ni de
   double bordure entre les deux ; « Meilleure offre » sert de separation). */
@media (max-width: 1300px) {
  html body .fs > .fs-packs, html body .fs .fs-packs { gap: 0 !important; row-gap: 0 !important; }
  html body .fs .fs-packs .fs-pgroup:first-child { border-bottom-width: 0 !important; padding-bottom: 0 !important; }
  html body .fs .fs-packs .fs-pgroup + .fs-pgroup { border-top-width: 0 !important; margin-top: 0 !important; }
}
/* >>> VELRA-SV75E END <<< */


/* >>> VELRA-SV75I START (06/11/2026) <<<
   Tablette / mobile : pendant que les cards passent a leur 2e forme, la
   bande et le prix qui glissent vers la droite sont coupes EXACTEMENT au
   bord droit de la card (avant : jusqu'a 16 px au-dela, la bande
   depassait de la card et du cadre Premium / Meilleure offre depuis
   qu'il respecte les marges). Seul le rond numerote, en haut a droite,
   reste visible hors de la card. */
@media (max-width: 1300px) {
  html body .fs .fs-packs.is-morphing .fs-pack {
    overflow: visible !important;
    -webkit-clip-path: inset(-1px) !important;
    clip-path: inset(-1px) !important;
  }
  /* card qui porte le rond numerote : on laisse depasser uniquement ce rond */
  html body .fs .fs-packs.is-morphing .fs-pack:has(> .fs-pack__badge.is-pop),
  html body .fs .fs-packs.is-morphing .fs-pack.is-chosen {
    -webkit-clip-path: polygon(-1px -1px, calc(100% - 13px) -1px, calc(100% - 13px) -10px, calc(100% + 10px) -10px, calc(100% + 10px) 13px, calc(100% + 1px) 13px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)) !important;
    clip-path: polygon(-1px -1px, calc(100% - 13px) -1px, calc(100% - 13px) -10px, calc(100% + 10px) -10px, calc(100% + 10px) 13px, calc(100% + 1px) 13px, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)) !important;
  }
}
/* >>> VELRA-SV75I END <<< */


/* >>> VELRA-SV76 START (07/11/2026) <<<
   1) Joueur sans date libre : rond assombri, « Indisponible » a la place
      du prix, non selectionnable (le profil reste consultable).
   2) Card de classe vide / tous indisponibles : assombrie, non selectionnable.
   3) Baisse de prix d'un C1 : etiquette « -X % » pendant 7 jours. */
html body .fs .fs-user.is-unavailable { cursor: not-allowed; }
html body .fs .fs-user.is-unavailable .fs-avatar {
  filter: grayscale(.85) brightness(.42);
  opacity: .78;
  box-shadow: none !important;
}
html body .fs .fs-user.is-unavailable .fs-user__name { color: rgba(206, 224, 255, .45); }
html body .fs .fs-user.is-unavailable:hover .fs-avatar,
html body .fs .fs-user.is-unavailable:focus-visible .fs-avatar { transform: none !important; }
html body .fs .fs-user__price--off {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(206, 224, 255, .2);
  background: rgba(6, 17, 43, .9);
  color: rgba(206, 224, 255, .6) !important;
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html body .fs .fs-user.is-unavailable .fs-user__profile { opacity: .85; cursor: pointer; }
html body .fs .fs-user__drop {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  background: linear-gradient(150deg, #4ade80, #16a34a);
  color: #04210f;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  vertical-align: 1px;
  box-shadow: 0 4px 12px rgba(34, 197, 94, .35);
  animation: fsDropIn .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes fsDropIn { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

html body .fs .fs-pack.is-off {
  cursor: not-allowed;
  filter: grayscale(.7) brightness(.5);
  opacity: .72;
  border-color: rgba(94, 170, 255, .1) !important;
  box-shadow: none !important;
}
html body .fs .fs-pack.is-off:hover,
html body .fs .fs-pack.is-off:active { transform: none !important; }
html body .fs .fs-pack.is-off .fs-pack__avatars,
html body .fs .fs-pack.is-off .fs-pack__pseudo { opacity: .55; }
html body .fs .fs-pack__off {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  padding: 4px 9px;
  background: #06112b;
  border: 1px solid rgba(206, 224, 255, .25);
  color: #e6f1ff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.2;
  pointer-events: none;
}
html body .fs .fs-pack__off { left: 50%; transform: translateX(-50%); white-space: nowrap; }
/* cards compactes : en bas a gauche (l'icone de classe est en haut a gauche) */
html body .fs .fs-packs.is-compact .fs-pack__off,
html body .fs .fs-packs.is-morphing .fs-pack__off { top: auto; bottom: 10px; left: 14px; transform: none; }
html body .fs .fs-pack__off[hidden] { display: none !important; }
html body .fs .fs-pack.is-off .fs-pack__off { filter: brightness(2); }
/* >>> VELRA-SV76 END <<< */


/* >>> VELRA-SV77 START (08/11/2026, revu le 09/11/2026 - v78) <<<
   1) Cards de classe indisponibles : MEME sombre et MEMES couleurs
      d'origine (v76), etiquette « Bientot disponible / Indisponible »
      comprise. Tablette (<= 1300 px) et mobile (<= 600 px) : pas
      d'etiquette sur les cards.
   2) Joueur indisponible : PHOTO plus foncee (pas transparente), logo de
      classe intact, pas d'icone de validation.
   3) Ronds des cards : epaisseur du contour constante pendant la rotation
      (plus de contour qui grossit puis retrecit). */
@property --fs-av-s { syntax: '<number>'; inherits: true; initial-value: 1; }

/* ---- 1) Cards : etiquette retiree sur tablette et mobile ---- */
@media (max-width: 1300px) {
  html body .fs .fs-pack__off,
  html body .fs .fs-packs.is-compact .fs-pack__off,
  html body .fs .fs-packs.is-morphing .fs-pack__off { display: none !important; }
}

/* ---- 2) Joueur indisponible ---- */
html body .fs .fs-user.is-unavailable .fs-avatar {
  filter: none !important;
  opacity: 1 !important;
}
/* photo (ou bonhomme) assombrie, pleinement opaque */
html body .fs .fs-user.is-unavailable .fs-avatar > img,
html body .fs .fs-user.is-unavailable .fs-avatar > .fs-avatar__initials {
  filter: grayscale(.85) brightness(.42) !important;
  opacity: 1 !important;
}
/* logo de classe : couleurs normales */
html body .fs .fs-user.is-unavailable .fs-avatar .fs-avatar__cls { filter: none !important; opacity: 1 !important; }
/* jamais d'icone de validation sur un joueur indisponible */
html body .fs .fs-user.is-unavailable .fs-check,
html body .fs .fs-user-cell.is-unavailable .fs-check { display: none !important; }

/* ---- 3) Contour constant pendant la rotation ----
   La taille des ronds (centre 1 / cotes 0,8) passe par --fs-av-s et le
   contour est divise par la meme valeur a chaque image : epaisseur
   identique du debut a la fin du mouvement. */
html body .fs .fs-pack__avatar {
  --fs-av-s: 1;
  --pk-ring-c: calc(var(--pk-ring, 1.5px) / var(--fs-av-s));
  scale: var(--fs-av-s) !important;
  transition: translate .9s cubic-bezier(.65, 0, .35, 1), --fs-av-s .9s cubic-bezier(.65, 0, .35, 1),
              filter .9s ease, opacity .9s ease, transform .42s cubic-bezier(.65, 0, .35, 1) !important;
}
html body .fs .fs-pack__avatar[data-pos="right"],
html body .fs .fs-pack__avatar[data-pos="left"] { --fs-av-s: .8; }
html body .fs .fs-pack__avatar[data-pos="center"] { --fs-av-s: 1; }
html body .fs .fs-pack__avatar::before {
  --rt: var(--pk-ring-c) !important;
  inset: calc((var(--pk-ring-c) + .5px / var(--fs-av-s)) * -1) !important;
}
html body .fs .fs-pack__avatar svg * { stroke-width: var(--pk-ring-c); }
@media (prefers-reduced-motion: reduce) {
  html body .fs .fs-pack__avatar { transition: none !important; }
}
/* >>> VELRA-SV77 END <<< */