/* ===============================
   🎨 STYLES FORMUP & GO - GLOBAL
   =============================== */

/* ---------- Fonts + Palette ---------- */
@font-face {
  font-family: 'Segoe UI Black';
  src: local('Segoe UI Black'), local('SegoeUIBlack');
}

@font-face {
  font-family: 'Gadugi';
  src: local('Gadugi');
}

:root {
  --bg: #1b1b1b;
  --panel: #262626;
  --accent: #00FFFF;
  --magenta: #FF00FF;
  --gold: #FFD700;
  --text: #E6E6E6;
  --muted: #bfbfbf;
}

/* ---------- Layout ---------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Gadugi", "Segoe UI", Roboto, Arial, sans-serif;
  background: #2E2E2E;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

/* ---------- Navbar ---------- */
.navbar {
  display: flex;
  align-items: center;
  justify-content: right;
  padding: 8px 16px;
  background: transparent;
  position: relative;
}

.logo-small {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.nav-links a {
  margin: 0 8px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: 10px 16px 6px;
}

.logo-big {
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Segoe UI Black", "Gadugi", sans-serif;
  font-weight: 900;
  letter-spacing: 0.5px;
}

h1 {
  margin: 6px 0 2px;
  font-size: 2.5rem;
  color: var(--accent);
}

.hero p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- Sections ---------- */
section {
  max-width: 960px;
  margin: 10px auto;
  padding: 12px 14px;
}

h2 {
  color: var(--accent);
  margin: 6px 0 8px;
}

/* ---------- Buttons ---------- */
.btn,
.btn-outline {
  display: inline-block;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn {
  background: var(--accent);
  color: #0f0f0f;
  border: none;
  padding: 10px 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 10px 16px;
}

.btn:hover {
  transform: scale(1.05);
}

/* ---------- Controls ---------- */
.controls,
.center-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.hidden-panel {
  display: none;
}

.visible {
  display: block;
}

/* ---------- Download / Feedback ---------- */
.download-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  gap: 8px;
}

#feedback {
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  margin-top: 10px;
  word-break: break-word;
}

/* ---------- Services ---------- */
.services ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
  color: var(--muted);
}

.services li {
  padding: 6px 0;
}

/* ---------- Footer ---------- */
footer {
  background: #0f0f0f;
  color: var(--muted);
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  width: 100%;
  max-width: 100%;
}

/* Contact aligné à gauche de l’écran */
footer #contact {
  text-align: center;
  margin: 0;
  /* supprime les marges par défaut */
  width: 100%;
  max-width: 100%;
}

/* Liens sociaux centrés */
footer .social {
  text-align: center;
}

/* Liens styles */
footer a {
  color: var(--accent);
  text-decoration: none;
  margin: 0px;
}

footer a:hover {
  color: var(--text);
}

/* Copyright aligné à gauche de l’écran */
footer .copyright {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 0px;
}

/* ---------- Responsive ---------- */

/* 🖥️ PC : boutons plus grands */
@media (min-width: 1025px) {

  .btn,
  .btn-outline {
    padding: 14px 26px;
    font-size: 1.1rem;
  }
}

/* 📱 Smartphone */
@media (max-width: 768px) {
  .preview-rect {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #video,
  #output {
    width: 100%;
    max-width: 360px;
  }

  .hero p {
    font-size: 1.1rem;
  }

  footer {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  footer section#contact {
    text-align: center;
  }

  footer .social {
    text-align: center;
  }

  footer .copyright {
    text-align: center;
  }
}

/* ✅ Centrer les 2 documents admin en desktop */
footer .footer-legal{
  width: 100%;
  text-align: center;

  margin: 12px 0;
}

/* ==== Liens-images exercices (grille responsive carrée) ==== */
:root {
  /* Ajuste si tu veux des vignettes plus grandes/petites */
  --ex-thumb-size-desktop: 220px;
  --ex-thumb-size-mobile: 220px;
}

/* Conteneur des liens-images */
.exercise-links {
  display: grid;
  gap: 16px;
  justify-content: space-between;
  /* aligne aux extrémités */
  align-items: start;
  margin: 16px 0;
  width: 100%;
  max-width: 980px;
  /* même largeur que ton bloc vidéo si tu veux */
  margin-left: auto;
  margin-right: auto;
}

/* PC/tablette large : 2 vignettes alignées gauche/droite */
@media (min-width: 992px) {
  .exercise-links {
    grid-template-columns: repeat(2, var(--ex-thumb-size-desktop));
  }
}

/* Mobile : 1 vignette par ligne (empilées) */
@media (max-width: 991px) {
  .exercise-links {
    grid-template-columns: var(--ex-thumb-size-mobile);
    justify-content: center;
    /* recentre sur mobile */
  }
}

/* Carte lien + image + légende */
.ex-link {
  text-decoration: none;
  display: grid;
  justify-items: center;
  gap: 8px;
}

/* Image carrée */
.ex-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* carré natif */
  object-fit: cover;
  /* remplit sans déformer */
  border-radius: 12px;
  border: none;
  /* plus de bordure */
  box-shadow: none;
  /* plus d’ombre si tu veux vraiment un rendu “photo brute” */
}

/* Légende */
.ex-caption {
  font-family: "Segoe UI Black", Gadugi, sans-serif;
  color: #00FFFF;
  letter-spacing: .3px;
}

/* ==== Formats des "cases vidéos" (preview-rect) ==== */
.preview-rect {
  /* Par défaut : paysage (16:9) comme tes pompes & gainage */
  --video-ratio: 16/9;
  aspect-ratio: var(--video-ratio);
  position: relative;
  width: 100%;
  max-width: 980px;
  /* ajuste si tes cases sont plus larges/étroites */
  margin: 0 auto;
  background: linear-gradient(180deg, #141414, #1d1d1d);
  border-radius: 12px;
  overflow: hidden;
}

/* Squat : par défaut en vertical (9:16) */
body[data-exercise="squat"] .preview-rect {
  --video-ratio: 9/16;
}

/* Le média remplit la "case" en respectant son ratio d’origine */
.preview-rect>video,
.preview-rect>canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* pas de rognage, tout est visible */
}

.preview-rect>video {
  z-index: 1;
}

.preview-rect>canvas {
  z-index: 2;
  pointer-events: none;
}

.preview-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: start;
}

@media (min-width: 992px) {
  .preview-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.plank-chrono {
  display: block;
  /* ne joint pas la grille */
  text-align: center;
  /* centré */
  margin: 8px auto 0;
  /* espace au-dessus, pas collé aux vidéos */
  font-weight: 800;
  color: var(--muted);
  font-size: 1rem;
  max-width: 980px;
  /* même largeur que tes cases */
}

/* ===== Icône Profil (nav ou lien image) ===== */
.fu-link img[alt="Profil"] {
  width: 42px;
  height: 42px;
  object-fit: contain;
  vertical-align: middle;
  border-radius: 50%;
  transition: transform .15s ease;
}

.fu-link img[alt="Profil"]:hover {
  transform: scale(1.05);
}

/* ====== HEADER UNIFIÉ — DROP-IN ====== */

/* Fallbacks si les variables n'existent pas déjà */
:root {
  --fu-graphite: #2E2E2E;
  --fu-cyan: #00FFFF;
  --fu-silver: #D9D9D9;
  --fu-border: #3a3a3a;
  --fu-wrap: 1100px;
}

/* Bandeau */
.fu-navbar-wrap {
  background: var(--fu-graphite);
  border-bottom: 1px solid var(--fu-border) !important;
  /* 👈 force la barre même si home.css dit "none" */
}


/* Barre interne (gauche/droite) */
.fu-navbar {
  max-width: var(--fu-wrap);
  margin: 0 auto;
  /* padding un peu plus serré à gauche pour caler l’icône profil sur la ligne */
  padding: 14px 10px 14px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* au cas où la marque et les liens viennent à se serrer */
}

/* Marque (logo + nom) à gauche */
.fu-navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fu-silver);
  min-width: 0;
  /* évite les débordements si le nom est long */
}

.fu-navbar__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
}

.fu-navbar__title {
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--fu-cyan);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Liens à droite (reste sur une seule ligne) */
.fu-navbar__links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
  /* permet l’ellipsis si l’espace est trop petit */
}

.fu-navbar__links a {
  color: var(--fu-silver);
  text-decoration: none;
  opacity: .95;
  white-space: nowrap;
}

.fu-navbar__links a:hover {
  color: var(--fu-cyan);
}

/* Lien-image du profil (icône à droite) */
.fu-navbar__profile-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.fu-navbar__profile-link img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--fu-border);
  vertical-align: middle;
  transition: transform .15s ease, filter .15s ease;
}

.fu-navbar__profile-link img:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* État “actif” facultatif (si tu veux marquer la page courante) */
/*
.fu-navbar__links a[aria-current="page"]{
  color: var(--fu-cyan);
  text-decoration: underline;
}
*/

/* Responsive — compacter sans grossir les textes */
@media (max-width: 880px) {
  .fu-navbar {
    padding: 12px 8px;
  }

  .fu-navbar__logo {
    width: 32px;
    height: 32px;
  }

  .fu-navbar__title {
    font-size: 1rem;
    max-width: 40vw;
    /* coupe proprement si très petit écran */
  }

  .fu-navbar__links {
    gap: 10px;
  }

  .fu-navbar__profile-link img {
    width: 36px;
    height: 36px;
  }
}

/* Ultra-petit : si ça serre, on réduit légèrement les espacements */
@media (max-width: 360px) {
  .fu-navbar__links {
    gap: 8px;
  }

  .fu-navbar {
    padding: 10px 6px;
  }
}

/* ==== Séances (PaDe – Jambes & PaDe carrousel) ==== */
.pade-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
}

.pade-head {
  text-align: center;
  margin-bottom: 16px;
}

.pade-head h1 {
  color: var(--fu-cyan);
  margin: 0 0 8px;
  font-size: 1.5rem;
}

.pade-head p {
  margin: 0;
  opacity: .9;
}

/* Chrono (menu flottant déjà en place, ne change pas) */
.fu-chrono {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px auto 18px;
}

.fu-chrono__digits {
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  color: var(--fu-cyan);
}

.fu-chrono__actions .fu-btn {
  padding: 8px 12px
}

/* ====== CARROUSEL D’EXERCICES ====== */
.pade-carousel {
  display: flex;
  align-items: stretch;
  /* 🔴 CHANGEMENT CLÉ */
  justify-content: center;
  gap: 16px;
  margin: 16px auto 8px;
  max-width: 1100px;
  position: relative;
}


.pade-carousel__viewport {
  overflow-x: hidden;
  /* hide horizontal overflow so sliding still works */
  overflow-y: visible;
  /* allow slides to grow vertically so stacked cards aren't clipped */
  flex: 1 1 auto;
}

.pade-track {
  display: flex;
  width: 100%;
  transition: transform .45s ease;
  will-change: transform;
  gap: 0;
  align-items: flex-start;
  /* don't stretch slides vertically */
}

/* Chaque slide = 2 cartes (machine + sans matériel) empilées */
.pade-slide {
  min-width: 100%;
  height: auto;
  /* let content define height so both cards are visible */
  width: 100%;
  flex: 0 0 100%;
  /* ensure each slide is exactly the viewport width */
  display: flex;
  align-items: flex-start;
  /* stack content from top */
  justify-content: center;
  /* centre le contenu */
  padding: 0 4px;
  box-sizing: border-box;
}


/* Pile les deux cartes l’une sous l’autre + centre le bloc complet */
.pade-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto 12px;
  /* <== centre la ligne d’exercices */
  max-width: 520px;
  /* largeur fixe, bien centrée */
}

.pade-card {
  background: var(--fu-bg-deeper);
  border: 1px solid var(--fu-border);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .25);
  width: 100%;
  /* occupe toute la largeur de .pade-row */
  box-sizing: border-box;
}

/* Style général des flèches du carrousel */
.pade-nav {
  background: var(--fu-cyan);
  color: #2e2e2e;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 28px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  padding-bottom: 8px;
  /* Position absolute so arrows don't affect layout/centering */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

/* Hover propre */
.pade-nav:hover {
  transform: translateY(-50%) scale(1.07);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* Cacher proprement */
.pade-nav.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

/* Positioning helpers for prev/next */
.pade-nav--prev {
  left: 8px;
}

.pade-nav--next {
  right: 8px;
}

/* Mobile: ensure a single slide fills the viewport and no neighbours peek through */
@media (max-width: 768px) {
  .pade-carousel {
    gap: 0;
    max-width: 100%;
    margin: 0 auto 8px;
    padding: 0;
  }

  .pade-carousel__viewport {
    overflow: hidden;
    padding: 0;
  }

  .pade-track {
    gap: 0;
  }

  .pade-slide {
    min-width: 100%;
    padding: 0;
    /* remove extra slide padding that can reveal neighbours */
  }

  /* reduce arrow size and inset on small screens so they don't cover content */
  .pade-nav {
    width: 24px;
    height: 24px;
    padding-bottom: 0;
    /* ensure glyph is vertically centered in the button */
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    line-height: 1;
    /* avoid extra baseline shifting */
  }

  .pade-nav--prev {
    left: 6px;
  }

  .pade-nav--next {
    right: 6px;
  }
}

/* Mobile overlay masks to hide any tiny peeks of neighbouring slides */
@media (max-width: 768px) {
  .pade-carousel__viewport {
    position: relative;
  }

  .pade-carousel__viewport::before,
  .pade-carousel__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    /* slightly narrower cover to match smaller mobile nav buttons */
    pointer-events: none;
    z-index: 15;
    /* keep below nav buttons (z-index:20) */
    background: inherit;
    /* solid cover matching carousel/page background */
  }

  .pade-carousel__viewport::after {
    right: 0;
  }

  .pade-carousel__viewport::before {
    left: 0;
  }
}

/* Pages that include a `.pade-wrap` (all `_pade.html` and `seance_perso.html`) 
   should share the same page background color. Use :has() so this only applies
   when the page contains the PaDe layout and doesn't affect other pages. */
body:has(.pade-wrap) {
  background: #2e2e2e;
  color: #e6e6e6;
}

/* Make the carousel area itself match the page background so there's no
   visual banding between the page and the carousel viewport. Cards keep
   their own `--fu-bg-deeper` background. */
body:has(.pade-wrap) .pade-carousel,
body:has(.pade-wrap) .pade-carousel__viewport {
  background: inherit;
}

/* Ensure the floating session bar matches the page background on PaDe pages */
body:has(.pade-wrap) .fu-chrono--floating {
  background: #2e2e2e;
  border-color: #3a3a3a;
}

/* Centrage réel de la flèche par rapport aux cartes */
.pade-carousel {
  align-items: center;
  /* 🔥 centre sur la hauteur du contenu */
}

.pade-nav {
  align-self: center;
  /* 🔒 verrouille le centrage vertical */
}


/* Compteur Exercice 1/6 */
.pade-counter {
  text-align: center;
  margin: 4px 0 18px;
  font-weight: 700;
  color: var(--fu-silver);
}



.pade-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.pade-card__title {
  margin: 0;
  color: var(--fu-silver);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2
}



.pade-card__equip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 0;
  font-size: .75rem;
  border: 1px solid var(--fu-border);
  padding: 2px 8px;
  border-radius: 999px;
  opacity: .9;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
}
.pade-card__badge {
  font-size: .75rem;
  border: 1px solid var(--fu-border);
  padding: 2px 8px;
  border-radius: 999px;
  opacity: .9
}

.pade-card__muscle {
  margin: 0;
  opacity: .85;
  font-size: .95rem
}

/* Enregistrements par exercice */
.pade-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px
}

.pade-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px
}

.pade-field label {
  opacity: .9
}

.pade-field input[type="number"],
.pade-field input[type="text"],
.pade-field select,
.pade-field textarea {
  background: transparent;
  border: 1px solid var(--fu-border);
  border-radius: 10px;
  color: var(--fu-silver);
  padding: 8px;
  min-width: 80px;
}

.pade-field textarea {
  width: 100%;
  min-height: 70px;
  resize: vertical
}

/* ✅ SEULEMENT l'encadré "Notes personnelles de cette séance" */
#sessionNotes {
  background: #2e2e2e;
  color: #f2f2f2;
  border: 1px solid #3a3a3a;
}

/* ✅ Bouton "Sauver les notes" : pas transparent */
#saveSessionNotesBtn {
  background: #2e2e2e;
  border: 1px solid var(--fu-cyan);
  color: var(--fu-cyan);
}

/* Boutons - petits */
.pade-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.pade-actions .fu-btn {
  padding: 8px 12px
}

/* Grille compacte sur mobile */
@media (max-width:768px) {
  .pade-row {
    gap: 10px;
    margin-bottom: 10px;
  }

  .pade-card {
    padding: 10px;
  }

  .pade-card__title {
    font-size: .98rem;
  }

  .pade-head h1 {
    font-size: 1.35rem;
  }
}

/* bloc sauvegarde session (inchangé) */
.pade-save {
  background: var(--fu-bg-deeper);
  border: 1px solid var(--fu-border);
  border-radius: 14px;
  padding: 14px;
  margin-top: 14px;
}


/* Badge numéro d'exercice */
.pade-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--fu-cyan);
  color: #0a0a0a;
  font-weight: 900;
  margin-right: 8px;
  flex: 0 0 26px;
}

.pade-card__head {
  gap: 10px;
}


/* ===== Menu flottant séance (chrono + début / fin) ===== */
.fu-chrono--floating {
  position: fixed;
  top: 72px;              /* sous la navbar */
  left: 12px;             /* ✅ desktop : à gauche */
  right: auto;
  transform: none;
  z-index: 1200;

  background: var(--fu-bg-deeper, #242424);
  border: 1px solid var(--fu-border, #3a3a3a);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);

  /* ✅ mêmes dimensions que mobile */
  width: 220px;
  max-width: 220px;

  padding: 8px;
  display: flex;
  flex-wrap: wrap;        /* autorise 2 lignes */
  justify-content: center;
  gap: 8px;

  cursor: grab;
  white-space: nowrap;    /* garde le texte sur une ligne */
  touch-action: none;     /* drag mobile/desktop */
}

.fu-chrono--floating.is-dragging {
  cursor: grabbing;
}

/* Zones gauche / centre / droite du menu */
.session-bar__left,
.session-bar__center,
.session-bar__right {
  display: flex;
  align-items: center;
  gap: 5px;

  /* ✅ même layout que mobile, même en desktop */
  width: 100%;
  justify-content: center;
  text-align: center;
}

.session-bar__label {
  font-size: 0.8rem;
  color: var(--fu-muted, #bfbfbf);
}

.session-bar__chrono {
  font-variant-numeric: tabular-nums;
  font-size: 1.2rem;
  color: var(--fu-cyan, #00ffff);
}

/* Boutons du menu flottant */
.session-bar__btn {
  border-radius: 999px;
  border: 1px solid var(--fu-cyan, #00ffff);
  background: transparent;
  color: var(--fu-cyan, #00ffff);
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.session-bar__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.4);
}

/* Bouton principal "Commencer la séance" */
.session-bar__btn--primary {
  background: var(--fu-cyan, #00ffff);
  color: #000;
}

/* Bouton fin de séance : gris au repos, rouge quand actif */
.session-end-btn {
  border-width: 1px;
}

.session-end-btn--idle {
  background: var(--fu-silver, #d9d9d9);
  border-color: var(--fu-silver, #d9d9d9);
  color: #222;
}

.session-end-btn--armed {
  background: #b00020;
  border-color: #b00020;
  color: #fff;
}

@media (max-width: 768px){
  /* Mobile : menu compact centré (le contenu reste visible grâce au padding-top du header) */
  .fu-chrono--floating{
    top: 72px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);

    width: 220px;
    max-width: 220px;

    padding: 8px;
    gap: 8px;

    display: flex;
    flex-wrap: wrap;          /* autorise 2 lignes */
    justify-content: center;

    touch-action: none;       /* drag mobile */
  }

  /* ✅ laisse de la place au-dessus du contenu pour le bouton/menu */
  body:has(.pade-wrap) .pade-head{
    padding-top: 88px;
  }
}

@media (max-width: 600px){
  .session-bar__left,
  .session-bar__center,
  .session-bar__right{
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Contour lumineux quand la séance est en cours */
.pade-wrap--active {
  position: relative;
  border-radius: 18px;
  box-shadow:
    0 0 0 2px rgba(0, 255, 255, 0.8),
    0 0 26px rgba(0, 255, 255, 0.75);
  background: #163838;
  /* <- plus de dégradé */
}


/* Durée par série – style compact + couleur */
.pade-field select[id^="dur_"] {
  font-size: 0.95rem;
  /* plus petit = contrôle visuellement plus compact */
  line-height: 1.2;
  padding: 2px 4px;
  /* réduit la hauteur */
  height: 32px;
  /* garde une hauteur cohérente */
  width: 110px;
  /* évite une liste trop large */
  color: var(--fu-cyan);
  /* couleur des chiffres dans le select */
  background: var(--fu-bg-deeper);
  border: 1px solid var(--fu-border);
  border-radius: 8px;
}

/* Option : sur mobile, encore plus compact */
@media (max-width: 480px) {
  .pade-field select[id^="dur_"] {
    font-size: 0.9rem;
    height: 32px;
    width: 100px;
  }
}

/* conteneur compact */
.pade-dur .pade-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* champ durée */
.pade-dur__value {
  width: 80px;
  text-align: center;
  font-weight: 700;
  color: var(--fu-cyan);
  padding: 6px 8px;
  border: 1px solid var(--fu-border);
  border-radius: 8px;
  background: var(--fu-bg-deeper);
}

/* petit label "sec" */
.pade-dur__unit {
  color: var(--fu-silver);
  font-weight: 600;
  margin-left: 2px;
}


/* ===== underline au hover/focus : desktop + mobile ===== */
.fu-navbar__links a:hover,
.fu-navbar__links a:focus-visible {
  text-decoration: underline;
}

/* ===== bouton hamburger ===== */
.fu-hamburger {
  display: none;
  /* caché par défaut (desktop) */
  background: transparent;
  border: 1px solid var(--fu-cyan);
  color: var(--fu-cyan);
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}

/* Bouton Back to top – Version FormUp améliorée */
.fu-backtotop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  /* carré arrondi FormUp */
  background: #00ffff;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.2s;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Triangle en CSS */
.fu-backtotop::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 12px solid #2e2e2e;
  /* triangle blanc => flèche FormUp */
  transform: translateY(1px);
  /* on remonte le triangle pour l'équilibre visuel */
}

/* Effet hover (super clean) */
.fu-backtotop:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Quand on l'affiche */
.fu-backtotop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Centrer le contenu des modales */
.fu-modal__body {
  text-align: center;
  /* ✔ centre tout */
}

.fu-modal__title {
  text-align: center;
  /* ✔ centre le titre */
  width: 100%;
}

.fu-modal__actions {
  justify-content: center;
  /* ✔ boutons centrés */
  display: flex;
  gap: 12px;
}

.fu-modal__dialog {
  text-align: center;
}

/* Modales simples sans image — override du grid de home.css */
#sessionEndConfirmModal .fu-modal__dialog,
#sessionCongratsModal .fu-modal__dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-template-columns: unset;
}

#sessionCongratsModal .fu-modal__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  justify-content: center;
  width: 100%;
}

/* =========================
   MODALE INFOS EXO (_pade.html)
   — même look que la modale "Détails" de creation_seance.html
   ========================= */

#exInfoModal .fu-modal__dialog {
  background: #050505 !important;
  color: #fff !important;
  border-radius: 20px;
  padding: 24px !important;
  max-width: 900px !important;
  width: calc(100% - 40px) !important;
  margin: 40px auto !important;
  position: relative;
  display: block !important;
  /* neutralise d'éventuels flex hérités */
  overflow: hidden !important;
}

#exInfoModal .cs-exodetail-wrapper {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 24px !important;
  width: 100% !important;
  height: auto !important;
}

/* Colonne image */
#exInfoModal .cs-exodetail-image {
  width: 100% !important;
  height: auto !important;
}

#exInfoModal .cs-exodetail-img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 16px;
}

/* Colonne texte */
#exInfoModal .cs-exodetail-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 180px) !important;
  padding-right: 8px !important;
}

#exInfoModal .cs-exodetail-header h3 {
  margin: 0;
  font-size: 1.6rem;
}

#exInfoModal .cs-exodetail-group,
#exInfoModal .cs-exodetail-muscles {
  margin: 0;
  color: #bbb;
}

#exInfoModal .cs-exodetail-section h4 {
  margin: 0 0 4px;
  color: #00eaff;
  font-size: 1.1rem;
}

#exInfoModal .cs-exodetail-section p {
  margin: 0;
  line-height: 1.5;
}

/* Responsive : on repasse en 1 colonne sur mobile */
@media (max-width: 720px) {
  #exInfoModal .cs-exodetail-wrapper {
    grid-template-columns: 1fr !important;
  }

  #exInfoModal .cs-exodetail-img {
    max-width: 360px;
    margin: 0 auto;
  }

  #exInfoModal .cs-exodetail-text {
    max-height: calc(100vh - 240px) !important;
  }
}


/* 🔒 Bloquer le scroll de la page quand une modale est ouverte */
html.fu-modal-open,
body.fu-modal-open {
  overflow: hidden;
  height: 100%;
}

/* iOS/Android: on fige le body pour éviter le scroll derrière la modale */
body.fu-modal-open {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

/* ===== Flèches fictives dans le 1er et le dernier slide ===== */

.pade-slide-inner {
  display: block;
  /* 🔴 STOP le flex horizontal */
  width: 100%;
}

/* The old "fake" arrows were visible inside slides. We hide them now because
   real navigation arrows are positioned above the viewport and should be
   used instead. Keeping them in DOM but hidden allows any JS that creates
   ghost elements to continue working without visual clutter. */
.pade-fake-arrow {
  display: none;
  width: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

/* on garde la même largeur pour la zone d'exercices */
.pade-slide-inner .pade-row {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}

/* ==================================================
   Styles spécifiques à `pages/a_propos.html` (extraits)
   — déplacés depuis le bloc <style> de la page
   ================================================== */

.fu-check {
  color: #00FFFF;
  /* Cyan */
  margin-right: 8px;
}

.fu-card__text {
  margin-bottom: 20px;
}

.fu-list {
  margin-bottom: 30px;
}

.fu-section {
  margin-bottom: 40px;
}

.fu-card {
  margin-bottom: 30px;
}

.fu-card__title {
  margin-bottom: 12px;
}

/* Classes utilitaires utilisées par la page `a_propos.html` */
.fu-card__title--small {
  font-size: 1rem;
}

.fu-card__text--spaced {
  margin-top: 10px;
}

/* Styles extraits depuis pages/connexion.html (auth local) */
.fu-auth {
  /* ✅ Layout type "white login" (mais en gardant la palette FormUp & Go) */
  width: min(440px, 92vw);
  margin: 10vh auto 0;
  padding: 32px 24px 26px;
  text-align: left;
}

.fu-auth h1 {
  color: var(--fu-cyan);
  margin: 0 0 18px;
  font-size: 1.6rem;
  text-align: center;
}

.fu-auth p {
  margin: 0 0 14px;
  opacity: .9;
  text-align: center;
}

.fu-auth .row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.fu-auth label {
  font-weight: 600;
  color: rgba(217, 217, 217, .92);
  font-size: .95rem;
}

.fu-auth input,
.fu-auth select {
  width: 100%;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid var(--fu-border);
  background: rgba(0, 0, 0, .18);
  color: var(--fu-silver);
  font: inherit;
}

.fu-auth input::placeholder {
  color: rgba(217, 217, 217, .55);
}

.fu-auth input:focus,
.fu-auth select:focus {
  outline: none;
  box-shadow: var(--fu-focus);
  border-color: rgba(0, 255, 255, .45);
}

.fu-auth .fu-btn {
  width: 100%;
}

.fu-auth__submit {
  padding: 16px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
}

/* Password label + forgot link sur la même ligne */
.fu-auth__labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.fu-auth__forgot {
  font-size: .92rem;
  color: rgba(217, 217, 217, .78);
  text-decoration: none;
  white-space: nowrap;
}

.fu-auth__forgot:hover {
  color: var(--fu-cyan);
  text-decoration: underline;
}

/* Champ password + icône œil à droite */
.fu-auth__field {
  position: relative;
}

.fu-auth__field input {
  padding-right: 52px;
  /* place pour l'icône */
}

.fu-auth__toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: rgba(217, 217, 217, .7);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fu-auth__toggle:hover {
  background: rgba(0, 255, 255, 0.08);
  color: var(--fu-cyan);
}

/* Icônes SVG (show/hide password) */
.fu-auth__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fu-auth__toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

.fu-auth__icon--hide {
  display: none;
}

.fu-auth__toggle.is-visible .fu-auth__icon--show {
  display: none;
}

.fu-auth__toggle.is-visible .fu-auth__icon--hide {
  display: inline-flex;
}

.fu-auth .u-muted {
  font-size: .95rem;
  text-align: center;
}

/* Lien "S'inscrire" en bas à droite (Mes Séances / Connexion) */
.fu-auth__signup {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-bottom: 2px;
  text-align: center;
}

.fu-auth__signup a {
  font-weight: 600;
}

/* ===== Sélecteur de plan dans la modale d'inscription ===== */
.fu-auth-plan-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.fu-auth-plan-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.fu-auth-plan-btn:hover {
  border-color: rgba(0, 255, 255, 0.4);
}

.fu-auth-plan-btn.is-active {
  border-color: var(--accent, #00FFFF);
  background: rgba(0, 255, 255, 0.06);
}

.fu-auth-plan-btn__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}

.fu-auth-plan-btn__sub {
  font-size: 0.72rem;
  color: #888;
}

.fu-auth-plan-btn.is-active .fu-auth-plan-btn__sub {
  color: var(--accent, #00FFFF);
}

/* ===== FIX hauteur carrousel mobile ===== */
@media (max-width: 768px) {
  .pade-carousel__viewport {
    /* allow natural height on mobile so stacked cards aren't clipped */
    height: auto;
    max-height: none;
    display: block;
  }
}

/* Mobile: position arrows exactly between the two stacked cards */
@media (max-width: 768px) {
  .pade-carousel {
    position: relative;
  }

  .pade-carousel__viewport {
    /* avoid content under the arrows: keep small inset but allow vertical growth */
    padding: 0;

    /* match mask width */
    box-sizing: border-box;
  }

  .pade-row {
    padding: 0 56px;
    /* garde l’espace pour les flèches */
    box-sizing: border-box;
  }

  .pade-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    align-self: auto;
    /* 🔓 laisse le positionnement absolu faire le job */
    width: 40px;
    height: 32px;
    border-radius: 12px;
    z-index: 30;
    padding-bottom: 6px;
  }

  .pade-nav--prev {
    left: 12px;
  }

  .pade-nav--next {
    right: 12px;
  }

  /* Slightly reduce visual weight on small screens */
  .pade-nav {
    font-size: 24px;
  }
}

/* ===============================
   ✂️ FU Cropper (recadrage image)
   =============================== */
.fu-cropper {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
}

.fu-cropper.u-hidden {
  display: none;
}

.fu-cropper__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.fu-cropper__panel {
  position: relative;
  width: min(92vw, 520px);
  height: min(92vh, 720px);
  background: #111;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.fu-cropper__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(20, 20, 20, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fu-cropper__title {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 15px;
}

.fu-cropper__close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 16px;
}

.fu-cropper__stage {
  position: relative;
  background: #000;
  touch-action: none;
}

.fu-cropper__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.fu-cropper__bottom {
  padding: 12px 14px 14px;
  background: rgba(20, 20, 20, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fu-cropper__zoom {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  margin-bottom: 12px;
}

.fu-cropper__zoom input[type="range"] {
  width: 100%;
}

.fu-cropper__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Preview petite image (modale ajouter exercice) */
.cs-exoimg-preview {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  object-fit: cover;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}


/* ===== A PROPOS : ACCORDEON ===== */

.fu-accordion {
  max-width: var(--fu-wrap, 1100px);
  margin: 0 auto;
  padding: 8px 16px 60px;
}

.fu-accordion__item {
  margin: 12px 0;
}

.fu-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  /* flèche + titre à gauche */
  padding: 16px 16px;
  background: var(--fu-bg-deeper, #242424);
  border: 1px solid var(--fu-border, #3a3a3a);
  border-radius: 14px;
  color: var(--fu-cyan, #00FFFF);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.fu-accordion__trigger:hover {
  filter: brightness(1.05);
}

.fu-accordion__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fu-cyan, #00FFFF);
  font-size: 28px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .18s ease;
  flex: 0 0 auto;
}


.fu-accordion__title {
  color: var(--fu-cyan, #00FFFF);
  font-size: 1.05rem;
  letter-spacing: .2px;
}

.fu-accordion__panel {
  overflow: hidden;
  max-height: 0px;
  transition: max-height .22s ease;
}

.fu-accordion__content {
  padding: 14px 4px 6px;
}

.fu-accordion__item.is-open .fu-accordion__icon {
  transform: rotate(90deg);
  /* 1/4 de tour */
}

/* un peu plus compact sur mobile */
@media (max-width: 520px) {
  .fu-accordion__trigger {
    padding: 14px 14px;
  }

  .fu-accordion__title {
    font-size: 1rem;
  }
}

/* ==================================================
   FAQ ITEMS (mini-accordéons dans À propos)
   ================================================== */

.fu-faq-item {
  background: var(--fu-bg-deeper, #242424);
  border: 1px solid var(--fu-border, #3a3a3a);
  border-radius: var(--fu-radius, 14px);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--fu-shadow, 0 2px 14px rgba(0, 0, 0, .25));
  transition: border-color .15s ease;
}

.fu-faq-item:hover {
  border-color: rgba(0, 255, 255, .25);
}

.fu-faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 14px 16px;
  background: transparent;
  border: none;
  color: var(--fu-silver, #D9D9D9);
  font-weight: 600;
  text-align: left;
  cursor: default;
  transition: background .15s ease;
  min-width: 0;
}

.fu-faq-item__trigger:hover {
  background: rgba(0, 255, 255, .06);
}

.fu-faq-item.is-open .fu-faq-item__trigger {
  background: #00FFFF;
}

.fu-faq-item__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fu-cyan, #00FFFF);
  font-size: 18px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .18s ease;
  flex: 0 0 20px;
  margin-top: 2px;
}

.fu-faq-item.is-open .fu-faq-item__icon {
  transform: rotate(90deg);
}

.fu-faq-item__question {
  font-family: "Segoe UI Black", sans-serif;
  color: #2e2e2e;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: .1px;
  line-height: 1.35;
  word-wrap: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.fu-faq-item__panel {
  overflow: visible;
  max-height: none;
  transition: none;
  background: transparent;
}

.fu-faq-item__answer {
  padding: 12px 16px 14px;
}

.fu-faq-item__answer p {
  font-family: "Gadugi", sans-serif;
  margin: 0;
  color: var(--fu-silver, #D9D9D9);
  opacity: .95;
  line-height: 1.55;
  font-size: 0.9rem;
}

@media (max-width: 520px) {
  .fu-faq-item__trigger {
    padding: 12px 14px;
  }

  .fu-faq-item__question {
    font-size: 0.9rem;
  }

  .fu-faq-item__answer {
    padding: 10px 14px 12px;
  }

  .fu-faq-item__answer p {
    font-size: 0.85rem;
  }
}

/* ==================================================
   PLANS (pages/plans.html) — style "comme ChatGPT"
   ================================================== */

.fu-plans-page {
  background: var(--fu-graphite, #2E2E2E);
  color: var(--fu-silver, #D9D9D9);
  text-align: left;
  /* plans = plus "dashboard" */
}

/* Layout */
.fu-plans {
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 16px 60px;
}

/* Hero */
.fu-plans-hero {
  text-align: center;
  margin: 10px auto 18px;
}

.fu-plans-title {
  margin: 10px 0 10px;
  font-size: 2rem;
  color: var(--fu-silver, #D9D9D9);
  letter-spacing: .2px;
  color: var(--fu-cyan, #00FFFF);
  /* ✅ cyan */
}

.fu-plans-sub {
  margin: 10px 0 0;
  color: rgba(217, 217, 217, .85);
}

/* Toggle */
.fu-billing {
  position: relative;
  width: 280px;
  margin: 0 auto;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--fu-border, #3a3a3a);
  border-radius: 999px;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  overflow: hidden;
}

.fu-billing-btn {
  position: relative;
  z-index: 2;
  border: 0;
  background: transparent;
  color: rgba(217, 217, 217, .9);
  font-weight: 800;
  padding: 10px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.fu-billing-btn.is-active {
  color: #101010;
}

.fu-billing-slider {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;

  /* ✅ largeur exacte = (100% - padding gauche/droite - gap) / 2 */
  width: calc((100% - 18px) / 2);

  background: var(--fu-cyan, #00FFFF);
  border-radius: 999px;
  transition: transform .18s ease;
  z-index: 1;
}


.fu-billing[data-mode="yearly"] .fu-billing-slider {
  transform: translateX(calc(100% + 6px));
}

/* Grid cards */
.fu-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
  align-items: stretch;
}

@media (max-width: 980px) {
  .fu-plan-grid {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.fu-plan-card {
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--fu-border, #3a3a3a);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  /* ✅ ajoute ça */
}

.fu-plan-card.is-featured {
  background: rgba(0, 255, 255, .06);
  border-color: rgba(0, 255, 255, .45);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, .35),
    0 16px 38px rgba(0, 0, 0, .38);
}

.fu-plan-head {
  display: grid;
  gap: 6px;
}

.fu-plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 255, 255, .18);
  border: 1px solid rgba(0, 255, 255, .55);
  color: var(--fu-cyan, #00FFFF);
  font-weight: 900;
  letter-spacing: .2px;
  font-size: .85rem;
  position: absolute;
  /* ✅ */
  top: 14px;
  right: 14px;
  margin: 0;
  /* au cas où */
  z-index: 5;
}

.fu-plan-name {
  margin: 0;
  font-size: 1.35rem;
  color: var(--fu-silver, #D9D9D9);
}

.fu-plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.fu-plan-amount {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--fu-silver, #D9D9D9);
}

.fu-plan-currency,
.fu-plan-period {
  color: rgba(217, 217, 217, .75);
  font-weight: 700;
}

.fu-plan-tagline {
  margin: 2px 0 0;
  color: rgba(217, 217, 217, .8);
}

/* CTA */
.fu-plan-cta {
  width: 100%;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid rgba(217, 217, 217, .25);
  background: rgba(217, 217, 217, .12);
  color: var(--fu-silver, #D9D9D9);
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}

.fu-plan-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.fu-plan-cta--ghost {
  border-color: rgba(0, 255, 255, .45);
  background: transparent;
  color: var(--fu-cyan, #00FFFF);
}

.fu-plan-cta--solid {
  border-color: rgba(0, 255, 255, .55);
  background: var(--fu-cyan, #00FFFF);
  color: #121212;
}

/* Features list */
.fu-plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.fu-plan-features li {
  display: flex;
  gap: 10px;
  line-height: 1.35;
  color: rgba(217, 217, 217, .9);
}

.fu-dot {
  color: var(--fu-cyan, #00FFFF);
  flex: 0 0 auto;
}

/* Compare */
.fu-compare {
  margin-top: 26px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid var(--fu-border, #3a3a3a);
  border-radius: 18px;
  padding: 18px;
}

.fu-compare-title {
  margin: 0 0 12px;
  color: var(--fu-silver, #D9D9D9);
  font-size: 1.25rem;
  color: var(--fu-cyan, #00FFFF);
  /* ✅ cyan */
}

.fu-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
}

.fu-compare-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  background: rgba(0, 0, 0, .25);
}

.fu-compare-table th,
.fu-compare-table td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  text-align: left;
  color: rgba(217, 217, 217, .92);
}

.fu-compare-table th {
  font-weight: 900;
  color: rgba(217, 217, 217, .95);
  background: rgba(0, 0, 0, .35);
}

.fu-compare-table th,
.fu-compare-table td {
  border-right: 1px solid rgba(255, 255, 255, .08);
  /* ✅ barres verticales */
}

.fu-compare-table th:last-child,
.fu-compare-table td:last-child {
  border-right: none;
}

.fu-compare-table td.ok {
  color: var(--fu-cyan, #00FFFF);
  font-weight: 900;
}

.fu-compare-table td.no {
  color: rgba(217, 217, 217, .45);
  font-weight: 900;
}

.fu-compare-note {
  margin: 10px 0 0;
  color: rgba(217, 217, 217, .75);
  text-align: center;
}

/* ✅ PLANS — Compare table: mobile sans scroll horizontal */
@media (max-width: 768px) {

  /* on évite le scroll horizontal */
  .fu-compare-wrap {
    overflow-x: hidden;
  }


/* sécurité : rien ne dépasse à cause des paddings/bordures */
.fu-compare,
.fu-compare-wrap,
.fu-compare-table {
  box-sizing: border-box;
  max-width: 100%;
}
  /* le tableau prend la largeur dispo */
  .fu-compare-table {
    min-width: 0;
    /* annule le min-width: 780px */
    width: 100%;
    table-layout: fixed;
    /* force les colonnes à se partager l’espace */
  }

  /* on autorise le retour à la ligne */
  .fu-compare-table th,
  .fu-compare-table td {
    white-space: normal;
    word-break: normal;
    /* ✅ ne coupe pas les mots */
    overflow-wrap: normal;
    /* ✅ coupe seulement si VRAIMENT nécessaire (mots très longs) */
    hyphens: none;
    /* ✅ pas de césure automatique */

    padding: 8px 6px;
    font-size: 0.92rem;
  }

  /* ✅ Mobile: colonne "Fonction" plus étroite + colonnes plans plus larges */
  .fu-compare-table th:first-child,
  .fu-compare-table td:first-child {
    width: 35%;
  }

  /* colonnes plans : plus compactes + centrées */
  .fu-compare-table th:nth-child(2),
  .fu-compare-table td:nth-child(2) {
    width: 18%;
    text-align: center;
  }

  .fu-compare-table th:nth-child(3),
  .fu-compare-table td:nth-child(3) {
    width: 25%;
    text-align: center;
  }

  .fu-compare-table th:nth-child(4),
  .fu-compare-table td:nth-child(4) {
    width: 22%;
    text-align: center;
  }
}

/* ✅ FIX mobile - Mes Séances : les boutons ronds reviennent à la ligne */
@media (max-width: 768px) {
  .ms-card__buttons-row{
    flex-wrap: wrap;
  }

  .ms-card__icon-row{
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
    flex-wrap: wrap; /* au cas où tu ajoutes + d’icônes */
  }
}

/* =============================
   SESSION BAR MOBILE - MODE "DEMARRER"
   ============================= */
.session-bar__fab{
  display:none;
  align-items:center;
  justify-content:center;
  width:100%;
  border:1px solid #00ffff;
  background:#00ffff;
  color:#000;
  font-family: "Segoe UI Black", "Segoe UI", sans-serif;
  font-weight:800;
  border-radius:999px;
  padding:10px 14px;
  font-size:0.95rem;
  cursor:pointer;
}

.session-bar__collapse{
  display:none;
  position:absolute;
  right:10px;
  bottom:10px;
  top:auto;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border:1px solid #00ffff;
  background:transparent;
  color:#00ffff;
  border-radius:12px;
  cursor:pointer;
  font-family: "Segoe UI Black", "Segoe UI", sans-serif;
  line-height:1;
}

@media (max-width: 600px){
  .fu-chrono--floating.is-collapsed{
    width:140px !important;
    max-width:140px !important;
    padding:8px !important;
    border-radius:999px !important;
    gap:0 !important;
  }
  .fu-chrono--floating.is-collapsed .session-bar__left,
  .fu-chrono--floating.is-collapsed .session-bar__center,
  .fu-chrono--floating.is-collapsed .session-bar__right{
    display:none !important;
  }
  .fu-chrono--floating.is-collapsed .session-bar__fab{
    display:inline-flex !important;
  }
  .fu-chrono--floating:not(.is-collapsed) .session-bar__collapse{
    display:inline-flex !important;
  }
  .fu-chrono--floating.is-collapsed .session-bar__collapse{
    display:none !important;
  }
}

/* =====================================================
   FIX MOBILE — MODALE DETAILS EXERCICE (#exInfoModal)
   Objectif: même marge en haut (zone rouge) ET en bas (zone jaune)
   + éviter que la modale dépasse de l'écran sur Android/iOS.
   ===================================================== */
@media (max-width: 700px){
  #exInfoModal .fu-modal__dialog{
    /* on force la modale à rentrer dans le viewport mobile */
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 24px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
    left: 20px !important;
    right: 20px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;

    /* layout interne */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* en mobile on empile image + texte, et on fait scroller le texte */
  #exInfoModal .cs-exodetail-wrapper{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    overflow: hidden !important;
  }

  /* la zone texte devient scrollable */
  #exInfoModal .cs-exodetail-text{
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}
/* =========================================================
   ✅ FIX mobile — Séance perso : marges gauche/droite comme les *_pade.html
   (les *_pade.html sont la référence)
   ========================================================= */
@media (max-width: 768px){
  body.seance-perso .pade-wrap{
    padding: 24px 16px;
  }
  body.seance-perso .pade-row{
    padding: 0 56px;
    box-sizing: border-box;
  }
}


/* === OVERRIDE: éviter les images coupées (GymVisual) === */
#exInfoModal .cs-exodetail-img{
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}

/* ===== Notifications stylées (remplace alert) ===== */
#fu-notif-container {
  position: fixed;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
  width: 90%;
  max-width: 420px;
}

.fu-notif {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #1f1f1f;
  border: 1px solid rgba(0, 255, 255, 0.35);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  font-size: 0.93rem;
  color: #e6e6e6;
  pointer-events: auto;
  animation: fuNotifIn 0.25s ease;
  width: 100%;
  box-sizing: border-box;
}

.fu-notif img {
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
}

.fu-notif__msg {
  flex: 1;
  line-height: 1.4;
}

.fu-notif__close {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
}

.fu-notif__close:hover {
  color: #00FFFF;
}

@keyframes fuNotifIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Modale confirm stylée (remplace confirm()) ===== */
.fu-confirm {
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.fu-confirm__actions {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  justify-content: flex-end;
  width: 100%;
}

.fu-confirm__ok {
  background: #00FFFF;
  border: none;
  border-radius: 8px;
  color: #0f0f0f;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 0.5rem 1rem;
  cursor: pointer;
  order: 1;
  transition: opacity 0.2s;
}

.fu-confirm__ok:hover {
  opacity: 0.85;
}

.fu-confirm__cancel {
  background: none;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  color: #bfbfbf;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  cursor: pointer;
  order: 2;
  transition: border-color 0.2s, color 0.2s;
}

.fu-confirm__cancel:hover {
  border-color: #00FFFF;
  color: #00FFFF;
}

@media (max-width: 480px) {
  .fu-confirm__actions {
    flex-direction: column-reverse;
  }
}