Inviter à rejoindre l’équipe
Vous avez dit :
tu sais refaire ce css proprement et si il y a des copies, ne garder que la dernière version . merci /* =========================
   BASE À NE PAS TOUCHER
   ========================= */
div.planning .fa.fa-exclamation-circle,
div.planning .fa.fa-exclamation-triangle {
  color: green !important;
}

div.zclosed[data-disciplineid="36"] {
  display: none;
}

@media (max-width: 640px) {
  div.planning [data-disciplineid="36"] div.hour {
    font-size: 1.3em !important;
    left: 15px !important;
    top: 5px !important;
  }

  div.cell.discipline36 {
    display: flex;
  }

  div.cell.discipline36 div.planningItem {
    display: none;
  }

  div.row[data-disciplineid="36"] {
    width: 33%;
  }
}

/* ==========================================================
   THEME PREMIUM (style Negundo) – CLEAN (sans doublons)
   ========================================================== */

/* TOKENS (1 seule fois) */
:root {
  --p-surface: #ffffff;
  --p-surface-2: #f7f8fb;
  --p-text: #0f172a;
  --p-muted: #667085;
  --p-border: rgba(15, 23, 42, 0.10);

  --p-radius: 14px;
  --p-radius-sm: 10px;

  --p-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  --p-shadow-2: 0 18px 50px rgba(15, 23, 42, 0.14);

  --p-accent: #dd3535;
  --p-accent-2: #fb7185;

  --p-focus: 0 0 0 3px rgba(221, 53, 53, 0.22);

  /* UI extra */
  --ui-line: rgba(15, 23, 42, 0.08);
  --ui-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  --ui-shadow-2: 0 16px 45px rgba(15, 23, 42, 0.14);

  /* Negundo */
  --negundo-red: #dd3333;
  --negundo-red-soft: rgba(221, 51, 51, 0.12);

  /* Tarifs (liserés) */
  --p-offpeak-rail: rgba(15, 23, 42, 0.18);
  --p-peak-rail: rgba(255, 140, 0, 0.50); /* (tu peux switch en rouge Negundo si tu préfères) */

  /* Variables widget */
  --ca-primary: #dd3333;
  --ca-primary-2: #dd3333;
}

/* Si le widget définit les variables sur un conteneur */
div.planning,
div#planning,
.planning,
.ca,
.ca-root,
.ca-widget {
  --ca-primary: #dd3333 !important;
  --ca-primary-2: #dd3333 !important;
}

/* Rendu global */
div.planning {
  color: var(--p-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grille / cellules : look "card" */
div.planning .row {
  background: transparent;
}

div.planning .cell {
  background: var(--p-surface);
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--p-radius-sm);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

/* En-tête de colonne (safe) */
div.planning .cell .header,
div.planning .cell .courtName,
div.planning .cell .titleCourt,
div.planning .cell > .title {
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  background: #fff !important;
  border-bottom: 1px solid var(--ui-line);
}

/* Créneaux (planningItem) : cartes premium */
div.planning .planningItem {
  position: relative;
  background: linear-gradient(180deg, var(--p-surface), var(--p-surface-2));
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--p-radius);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
  will-change: transform;
}

/* Liseré accent premium */
div.planning .planningItem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--p-accent), var(--p-accent-2));
  opacity: 0.85;
}

@media (hover: hover) {
  div.planning .planningItem:hover {
    transform: translateY(-2px);
    box-shadow: var(--p-shadow-2);
    filter: saturate(1.03);
  }
}

/* Typo */
div.planning .hour {
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--p-text);
}

div.planning .title,
div.planning .planningItem .title {
  font-weight: 800;
  color: var(--p-text);
}

div.planning .sub,
div.planning .planningItem .sub,
div.planning .meta {
  color: var(--p-muted);
}

/* Icônes */
div.planning .fa {
  opacity: 0.92;
}

/* Focus clavier */
div.planning a:focus-visible,
div.planning button:focus-visible,
div.planning [tabindex]:focus-visible,
div.planning [role="tab"]:focus-visible {
  outline: none !important;
  box-shadow: var(--p-focus) !important;
  border-radius: 12px;
}

/* États (optionnel) */
div.planning .is-full,
div.planning .full,
div.planning [data-status="full"] {
  opacity: 0.78;
  filter: grayscale(0.15);
}

div.planning .is-closed,
div.planning .closed,
div.planning [data-status="closed"] {
  opacity: 0.58;
}

/* ==========================================
   RÉSERVÉ (busy) — lisibilité premium
   ========================================== */
div.planning.busy {
  border-radius: var(--p-radius) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.15) !important;
  font-weight: 700;
  letter-spacing: 0.2px;

  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

div.planning.busy * {
  color: #ffffff !important;
}

div.planning.busy .fa-bolt {
  color: #ffd400 !important;
}

@media (hover: hover) {
  div.planning.busy:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.25) !important;
  }
}

/* ==========================================
   TARIFS VISUELS — DERNIÈRE VERSION (définitive)
   Fond identique + liseré (AntiqueWhite vs SandyBrown)
   ========================================== */
div.planning.free {
  background: #fdfaf4 !important; /* fond unique */
  color: #374151 !important;
  font-weight: 700 !important;
  text-shadow: none !important;

  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 14px !important;

  position: relative;
  padding-left: 12px !important; /* place pour le liseré */
}

/* On neutralise toutes les anciennes différences de background */
div.planning.free[data-color="AntiqueWhite"],
div.planning.free[style*="AntiqueWhite"],
div.planning.free[data-color="SandyBrown"],
div.planning.free[style*="SandyBrown"] {
  background: #fdfaf4 !important;
}

/* Liseré via ::before (moins épais, plus premium) */
div.planning.free::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: var(--p-offpeak-rail);
  opacity: 0.9;
}

/* Creuse = AntiqueWhite */
div.planning.free[data-color="AntiqueWhite"]::before,
div.planning.free[style*="AntiqueWhite"]::before {
  background: var(--p-offpeak-rail);
}

/* Pleine = SandyBrown */
div.planning.free[data-color="SandyBrown"]::before,
div.planning.free[style*="SandyBrown"]::before {
  background: var(--p-peak-rail);
}

@media (hover: hover) {
  div.planning.free:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.10) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
  }
}

/* ==========================================
   LÉGENDE / PILLS (Heure creuse / Heure pleine)
   ========================================== */
.creneauxContainer,
.filters,
.filterBar,
.legend,
.legendContainer {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.creneauxContainer > *,
.filters a,
.filters button,
.filters span,
.filterBar a,
.filterBar button,
.filterBar span,
.legend a,
.legend button,
.legend span,
.legendContainer a,
.legendContainer button,
.legendContainer span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  color: #111827;
  background: #ffffff;
  text-decoration: none !important;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

@media (hover: hover) {
  .creneauxContainer > *:hover,
  .filters a:hover,
  .filters button:hover,
  .filters span:hover,
  .filterBar a:hover,
  .filterBar button:hover,
  .filterBar span:hover,
  .legend a:hover,
  .legend button:hover,
  .legend span:hover,
  .legendContainer a:hover,
  .legendContainer button:hover,
  .legendContainer span:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  }
}

.creneauxContainer > div[style*="SandyBrown"],
.creneauxContainer > div[style*="sandybrown"] {
  background: linear-gradient(135deg, #dd3333, #b72828) !important;
  border-color: rgba(221, 51, 51, 0.22) !important;
  color: #ffffff !important;
}

.creneauxContainer > div[style*="AntiqueWhite"],
.creneauxContainer > div[style*="antiquewhite"] {
  background: #fbfaf7 !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #374151 !important;
}

.creneauxContainer .active,
.creneauxContainer .selected,
.filters .active,
.filters .selected,
.filterBar .active,
.filterBar .selected,
.legend .active,
.legend .selected {
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.14);
}

.creneauxContainer a:focus-visible,
.creneauxContainer button:focus-visible,
.filters a:focus-visible,
.filters button:focus-visible,
.filterBar a:focus-visible,
.filterBar button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(221, 51, 51, 0.18) !important;
}

/* ==========================================
   MODAL PREMIUM – Réserver un créneau
   ========================================== */
#reserverModal .modal-content {
  border-radius: 18px;
  border: none;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.25);
  overflow: hidden;
}

#reserverModal .modal-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding: 22px 28px;
}

#reserverModal .modal-header h4,
#reserverModal .modal-title {
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.3px;
}

#reserverModal .close {
  font-size: 22px;
  opacity: 0.4;
  transition: 0.2s ease;
}

#reserverModal .close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

#reserverModal .modal-body {
  padding: 28px;
}

#reserverModal .alert {
  border-radius: 14px;
  border: 1px solid rgba(221, 51, 51, 0.25);
  background: linear-gradient(135deg, rgba(221, 51, 51, 0.08), rgba(221, 51, 51, 0.03));
  color: #b72828;
  font-weight: 600;
}

#reserverModal input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  position: relative;
  margin-left: 8px;
  cursor: pointer;
  transition: 0.2s ease;
}

#reserverModal input[type="radio"]:checked {
  border-color: #dd3333;
}

#reserverModal input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dd3333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#reserverModal label {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

#reserverModal input[type="text"] {
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 14px 16px;
  font-size: 15px;
  transition: 0.2s ease;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

#reserverModal input[type="text"]:focus {
  border-color: #dd3333;
  box-shadow: 0 0 0 3px rgba(221, 51, 51, 0.15);
  outline: none;
}

#reserverModal .modal-body em {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 15px;
  color: #6b7280;
}

#reserverModal hr {
  border-color: rgba(15, 23, 42, 0.06);
  margin: 28px 0;
}

#reserverModal .modal-footer {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding: 22px 28px;
}

#reserverModal .btn-primary,
#reserverModal button[type="submit"] {
  background: linear-gradient(135deg, #dd3333, #b72828);
  border: none;
  border-radius: 12px;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 10px 25px rgba(221, 51, 51, 0.25);
  transition: 0.2s ease;
}

#reserverModal .btn-primary:hover,
#reserverModal button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 35px rgba(221, 51, 51, 0.35);
}

div.text_header_reservation.text-center.alert.alert-info {
  display: none !important;
}

/* =========================
   ADMIN – polish UI (tables)
   ========================= */
body {
  background: #f6f7fb;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container,
.content,
.page-content,
.main,
main {
  max-width: 1400px;
}

.card,
.panel,
.box,
.content-box {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

h1,
h2,
h3,
.title {
  font-weight: 800;
  letter-spacing: -0.2px;
}

a {
  color: #0f172a;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
/* ==========================================
   MOBILE — Heure visible pour les créneaux LIBRES
   Structure réelle:
   .row.zfree[data-hour]  > .hour
   ========================================== */
@media (max-width: 768px){

  /* Le bloc row devient le repère du badge */
  div.row.zfree{
    position: relative !important;
  }

  /* Afficher / forcer visibilité de l'heure (souvent cachée) */
  div.row.zfree > div.hour{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    /* Badge lisible */
    background: rgba(17,24,39,.92) !important;
    color: #ffffff !important;
    text-shadow: none !important;

    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    /* Placement dans le créneau */
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 9999 !important;

    box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
    pointer-events: none !important;
  }

  /* Icône et texte dedans */
  div.row.zfree > div.hour,
  div.row.zfree > div.hour *{
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* On laisse un peu de place pour le badge pour éviter qu'il chevauche "Libre" */
  div.row.zfree > div.planning.free{
    padding-top: 18px !important;
  }
}
/* ==========================================
   MOBILE — Heure LIBRE ultra compacte
   ========================================== */
@media (max-width: 768px){

  div.row.zfree{
    position: relative !important;
  }

  div.row.zfree > div.hour{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    background: rgba(0,0,0,.70) !important;
    color: #fff !important;

    padding: 1px 5px !important;
    border-radius: 4px !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    position: absolute !important;
    top: 3px !important;
    left: 3px !important;

    box-shadow: none !important;
  }

  div.row.zfree > div.hour i{
    font-size: 8px !important;
    margin-right: 2px !important;
  }

  div.row.zfree > div.planning.free{
    padding-top: 10px !important;
  }
}
/* ==========================================
   FIX — Badges heures UNIQUEMENT dans la grille planning
   (évite complètement le modal de réservation)
   ========================================== */
@media (max-width: 768px){

  /* 1) Annule l'ancien comportement (si posé globalement) */
  div.row.zfree > div.hour{
    position: static !important;
    top: auto !important;
    left: auto !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  div.row.zfree > div.planning.free{
    padding-top: 0 !important;
  }

  /* 2) Ré-applique le badge MAIS seulement dans la grille du planning */
  div.planning div.row.zfree{
    position: relative !important;
  }

  div.planning div.row.zfree > div.hour{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    background: rgba(0,0,0,.70) !important;
    color: #fff !important;

    padding: 1px 5px !important;
    border-radius: 4px !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    z-index: 10 !important;

    box-shadow: none !important;
    pointer-events: none !important;
  }

  div.planning div.row.zfree > div.hour i{
    font-size: 8px !important;
    margin-right: 2px !important;
  }

  div.planning div.row.zfree > div.planning.free{
    padding-top: 10px !important;
  }
}
/* ==========================================
   FORCE COULEUR PRIMAIRE (override final)
   ========================================== */
:root{
  --ca-primary: #dd3333 !important;
  --ca-primary-2: #b72828 !important; /* secondaire un poil plus sombre */

  /* au cas où le widget utilise d'autres noms */
  --primary: #dd3333 !important;
  --primary-color: #dd3333 !important;
  --brand-primary: #dd3333 !important;
  --accent: #dd3333 !important;
}

div.planning,
div#planning,
.planning,
.ca,
.ca-root,
.ca-widget{
  --ca-primary: #dd3333 !important;
  --ca-primary-2: #b72828 !important;

  --primary: #dd3333 !important;
  --primary-color: #dd3333 !important;
  --brand-primary: #dd3333 !important;
  --accent: #dd3333 !important;
}

/* Fallback si certains boutons ne prennent pas les variables */
div.planning .btn-primary,
.ca .btn-primary,
.ca-widget .btn-primary{
  background: #dd3333 !important;
  border-color: #dd3333 !important;
}
/* ==========================================
   HEURE PLEINE = ROUGE NEGUNDO (#dd3333)
   ========================================== */

/* 1) Liseré des créneaux libres en heure pleine */
div.planning.free[data-color="SandyBrown"]::before,
div.planning.free[style*="SandyBrown"]::before{
  background: #dd3333 !important;
}

/* 2) Si jamais un border-left est encore actif */
div.planning.free[data-color="SandyBrown"],
div.planning.free[style*="SandyBrown"]{
  border-left-color: #dd3333 !important;
}

/* 3) Pastilles / légende heure pleine */
.creneauxContainer > div[style*="SandyBrown"],
.creneauxContainer > div[style*="sandybrown"]{
  background: #dd3333 !important;
  border-color: #b72828 !important;
  color: #ffffff !important;
}

/* 4) Si le widget met une classe peak */
div.planning .peak,
div.planning [data-price-type="peak"],
div.planning [data-tariff="peak"]{
  background: #dd3333 !important;
  border-color: #b72828 !important;
  color: #ffffff !important;
}
/* ==========================================
   LISERÉ UNIQUEMENT (fond inchangé)
   - Creuse (AntiqueWhite) : liseré AntiqueWhite
   - Pleine (SandyBrown)    : liseré #dd3333
   ========================================== */

/* Fond identique pour tous les libres (on ne touche pas) */
div.planning.free[data-color="AntiqueWhite"],
div.planning.free[style*="AntiqueWhite"],
div.planning.free[data-color="SandyBrown"],
div.planning.free[style*="SandyBrown"]{
  /* on ne met PAS de background ici */
}

/* Liseré creuse -> AntiqueWhite */
div.planning.free[data-color="AntiqueWhite"]::before,
div.planning.free[style*="AntiqueWhite"]::before{
  display: block !important;
  background: AntiqueWhite !important;
  opacity: 1 !important;
}

/* Liseré pleine -> rouge Negundo */
div.planning.free[data-color="SandyBrown"]::before,
div.planning.free[style*="SandyBrown"]::before{
  display: block !important;
  background: #dd3333 !important;
  opacity: 1 !important;
}

/* (optionnel) Légende : creuse en AntiqueWhite, pleine en rouge */
.creneauxContainer > div[style*="AntiqueWhite"],
.creneauxContainer > div[style*="antiquewhite"]{
  background: AntiqueWhite !important;
  color: #374151 !important;
  border-color: rgba(15,23,42,.10) !important;
}

.creneauxContainer > div[style*="SandyBrown"],
.creneauxContainer > div[style*="sandybrown"]{
  background: #dd3333 !important;
  color: #ffffff !important;
  border-color: rgba(221,51,51,.22) !important;
}
/* ==========================================
   ULTRA PREMIUM — Abonnement Modal
   ========================================== */

#abonnementModal .modal-dialog{
  max-width: 900px;
}

#abonnementModal .modal-content{
  border-radius: 22px;
  border: none;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(15,23,42,.35);
  background: #ffffff;
}

/* HEADER */
#abonnementModal .modal-header{
  padding: 28px 36px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
}

#abonnementModal .modal-title{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: #0f172a;
}

#abonnementModal .close{
  font-size: 22px;
  opacity: .35;
  transition: .2s ease;
}

#abonnementModal .close:hover{
  opacity: 1;
  transform: rotate(90deg);
}

/* BODY */
#abonnementModal .modal-body{
  padding: 36px;
  background: #f8fafc;
}

/* ==========================================
   TABS PREMIUM
   ========================================== */

#abonnementModal .nav-tabs{
  border-bottom: none;
  display: inline-flex;
  background: #ffffff;
  padding: 6px;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(15,23,42,.08);
  margin-bottom: 30px;
}

#abonnementModal .nav-tabs > li{
  margin: 0;
}

#abonnementModal .nav-tabs > li > a{
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700;
  color: #64748b !important;
  padding: 10px 20px;
  transition: .2s ease;
}

#abonnementModal .nav-tabs > li.active > a{
  background: linear-gradient(135deg, #dd3333, #b72828) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(221,51,51,.35);
}

/* ==========================================
   CARTES ABONNEMENTS / TICKETS
   ========================================== */

#abonnementModal .chooseAbonnement{
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: #ffffff;
  padding: 18px 22px;
  border-radius: 16px;
  margin-bottom: 14px;

  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 20px rgba(15,23,42,.06);

  cursor: pointer;
  transition: .2s ease;
}

#abonnementModal .chooseAbonnement:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
  border-color: rgba(221,51,51,.25);
}

/* Texte principal */
#abonnementModal .chooseAbonnement > div:first-child{
  font-weight: 700;
  font-size: 16px;
  color: #0f172a;
}

/* Prix */
#abonnementModal .chooseAbonnement b{
  font-size: 18px;
  color: #dd3333;
}

/* Sous description */
#abonnementModal .chooseAbonnement div div:last-child{
  font-size: 13px;
  color: #64748b;
}

/* ==========================================
   FOOTER
   ========================================== */

#abonnementModal .modal-footer{
  padding: 24px 36px;
  border-top: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
}

#abonnementModal .btn-default{
  border-radius: 12px;
  padding: 10px 20px;
  border: 1px solid rgba(15,23,42,.12);
  background: #ffffff;
  font-weight: 600;
}

#abonnementModal .btn-default:hover{
  background: #f1f5f9;
}

/* ==========================================
   ANIMATION D'APPARITION PREMIUM
   ========================================== */

#abonnementModal.fade .modal-dialog{
  transform: translateY(40px);
  transition: .3s ease;
}

#abonnementModal.in .modal-dialog{
  transform: translateY(0);
}
/* ==========================================
   ULTRA PREMIUM — Abonnement Modal (pricing cards)
   + Badge “Meilleure offre”
   (sans changer ton HTML)
   ========================================== */

/* Modal plus large + premium */
#abonnementModal .modal-dialog{
  max-width: 980px;
  width: calc(100% - 24px);
}

#abonnementModal .modal-content{
  border-radius: 22px;
  border: none;
  overflow: hidden;
  box-shadow: 0 40px 110px rgba(15,23,42,.35);
  background: #ffffff;
}

/* Header */
#abonnementModal .modal-header{
  padding: 28px 36px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
}

#abonnementModal .modal-title{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.3px;
  color: #0f172a;
}

#abonnementModal .close{
  font-size: 22px;
  opacity: .35;
  transition: .2s ease;
}

#abonnementModal .close:hover{
  opacity: 1;
  transform: rotate(90deg);
}

/* Body */
#abonnementModal .modal-body{
  padding: 32px 36px 36px;
  background: #f8fafc;
}

/* ==========================================
   Tabs premium (pill)
   ========================================== */
#abonnementModal .nav-tabs{
  border-bottom: none;
  display: inline-flex;
  gap: 0;
  background: #ffffff;
  padding: 6px;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  margin: 0 0 26px;
}

#abonnementModal .nav-tabs > li{
  margin: 0;
}

#abonnementModal .nav-tabs > li > a{
  border: none !important;
  border-radius: 999px !important;
  font-weight: 800;
  color: #64748b !important;
  padding: 10px 18px;
  transition: .2s ease;
}

#abonnementModal .nav-tabs > li.active > a{
  background: linear-gradient(135deg, #dd3333, #b72828) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(221,51,51,.30);
}

/* Titres des tabs */
#abonnementModal .tab-content h2{
  margin: 10px 0 18px;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -.2px;
}

/* ==========================================
   PRICING GRID — transforme les chooseAbonnement en cartes
   (ne dépend pas d’un wrapper)
   ========================================== */

/* On met les cartes en grille (par tab) */
#abonnementModal .tab-pane{
  display: block; /* bootstrap gère déjà le show/hide */
}

#abonnementModal .tab-pane .chooseAbonnement{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;

  background: #ffffff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 18px 18px;

  box-shadow: 0 10px 26px rgba(15,23,42,.08);
  cursor: pointer;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  overflow: hidden;
}

/* Liseré premium discret à gauche */
#abonnementModal .tab-pane .chooseAbonnement::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:4px;
  border-radius:999px;
  background: rgba(15,23,42,.14);
  opacity:.65;
}

@media (hover:hover){
  #abonnementModal .tab-pane .chooseAbonnement:hover{
    transform: translateY(-3px);
    box-shadow: 0 22px 55px rgba(15,23,42,.14);
    border-color: rgba(221,51,51,.22);
    filter: saturate(1.02);
  }
}

/* Texte (colonne gauche) */
#abonnementModal .tab-pane .chooseAbonnement > div:first-child{
  font-weight: 900;
  font-size: 15px;
  color: #0f172a;
  letter-spacing: -.1px;
  line-height: 1.25;
}

/* Colonne droite (prix + sous-texte) */
#abonnementModal .tab-pane .chooseAbonnement > div:last-child{
  text-align: right;
  min-width: 120px;
}

/* Prix */
#abonnementModal .tab-pane .chooseAbonnement b{
  font-size: 20px;
  font-weight: 950;
  color: #dd3333;
}

/* Sous-texte (ligne 2) */
#abonnementModal .tab-pane .chooseAbonnement > div:last-child > div:last-child{
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: #64748b;
}

/* ==========================================
   BADGE “Meilleure offre”
   Sans toucher HTML : on le met sur une carte précise.
   ➜ Ici : la carte “Tickets: 24” (heure pleine) = data-id="9"
   (Change le sélecteur si tu veux un autre pack)
   ========================================== */

#abonnementModal .chooseAbonnement[data-id="9"]{
  border-color: rgba(221,51,51,.30);
  box-shadow: 0 18px 45px rgba(221,51,51,.14);
}

#abonnementModal .chooseAbonnement[data-id="9"]::before{
  background: #dd3333;
  opacity: .95;
}

/* Badge en coin */
#abonnementModal .chooseAbonnement[data-id="9"]::after{
  content:"Meilleure offre";
  position:absolute;
  top: 12px;
  right: 12px;

  background: rgba(221,51,51,.10);
  color: #dd3333;

  border: 1px solid rgba(221,51,51,.25);
  padding: 5px 10px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15px;
}

/* ==========================================
   Footer + bouton fermer
   ========================================== */
#abonnementModal .modal-footer{
  padding: 22px 36px;
  border-top: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
}

#abonnementModal .btn-default{
  border-radius: 12px;
  padding: 10px 20px;
  border: 1px solid rgba(15,23,42,.12);
  background: #ffffff;
  font-weight: 800;
}

#abonnementModal .btn-default:hover{
  background: #f1f5f9;
}

/* ==========================================
   Mobile : cartes plus compactes
   ========================================== */
@media (max-width: 768px){
  #abonnementModal .modal-body{
    padding: 22px 16px 18px;
  }

  #abonnementModal .modal-header,
  #abonnementModal .modal-footer{
    padding: 18px 16px;
  }

  #abonnementModal .modal-title{
    font-size: 20px;
  }

  #abonnementModal .tab-pane .chooseAbonnement{
    border-radius: 16px;
    padding: 14px 14px;
  }

  #abonnementModal .tab-pane .chooseAbonnement b{
    font-size: 18px;
  }
}

/* ==========================================
   Animation d’apparition (douce)
   ========================================== */
#abonnementModal.fade .modal-dialog{
  transform: translateY(34px);
  transition: .25s ease;
}
#abonnementModal.in .modal-dialog{
  transform: translateY(0);
}
/* ==========================================
   FIX GROS ESPACES — Tabs Bootstrap (abonnementModal)
   Restaure le hide/show correct des tab-pane
   ========================================== */

/* 1) IMPORTANT : onglets inactifs = hors layout */
#abonnementModal .tab-content > .tab-pane{
  display: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2) Onglet actif = visible */
#abonnementModal .tab-content > .tab-pane.active,
#abonnementModal .tab-content > .tab-pane.active.in{
  display: block !important;
}

/* 3) Nettoyage marges titres */
#abonnementModal .tab-content h2{
  margin: 10px 0 14px !important;
}

/* 4) Dernière carte : pas de marge en bas */
#abonnementModal .chooseAbonnement:last-child{
  margin-bottom: 0 !important;
}

/* 5) Réduit le padding bas global du body */
#abonnementModal .modal-body{
  padding-bottom: 18px !important;
}
/* Ajustement badge Meilleure offre */
#abonnementModal .chooseAbonnement[data-id="9"]{
  padding-top: 32px; /* laisse place au badge */
}

#abonnementModal .chooseAbonnement[data-id="9"]::after{
  content:"Le plus vendu";
  position:absolute;
  top: 8px;
  right: 18px;   /* plus à droite */
  
  background: rgba(221,51,51,.10);
  color: #dd3333;
  border: 1px solid rgba(221,51,51,.25);

  padding: 4px 10px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2px;
}
/* Prix complet en rouge (nombre + €) */
#abonnementModal .chooseAbonnement > div:last-child{
  color: #dd3333 !important;
  font-weight: 800;
}
/* Tous les prix en rouge dans abonnementModal */
#abonnementModal .chooseAbonnement b{
  color: #dd3333 !important;
}

#abonnementModal .chooseAbonnement > div:last-child{
  color: #dd3333 !important;
}
/* ==========================================
   BADGE "LE PLUS VENDU"
   Pour data-id 2 et 21
   ========================================== */

/* Supprime ancien badge si encore actif */
#abonnementModal .chooseAbonnement[data-id="9"]::after{
  content: none !important;
}

/* Carte mise en avant */
#abonnementModal .chooseAbonnement[data-id="2"],
#abonnementModal .chooseAbonnement[data-id="21"]{
  position: relative;
  padding-top: 32px; /* espace pour badge */
  border-color: rgba(221,51,51,.30);
  box-shadow: 0 18px 45px rgba(221,51,51,.12);
}

/* Liseré rouge */
#abonnementModal .chooseAbonnement[data-id="2"]::before,
#abonnementModal .chooseAbonnement[data-id="21"]::before{
  background: #dd3333 !important;
  opacity: 1 !important;
}

/* Badge */
#abonnementModal .chooseAbonnement[data-id="2"]::after,
#abonnementModal .chooseAbonnement[data-id="21"]::after{
  content: "Le plus vendu";
  position: absolute;
  top: 8px;
  right: 18px;

  background: linear-gradient(135deg, #dd3333, #b72828);
  color: #ffffff;

  padding: 5px 12px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .3px;

  box-shadow: 0 8px 22px rgba(221,51,51,.35);
}
/* ==========================================
   ULTRA PREMIUM — Tickets History Modal
   ========================================== */

#ticketsHistoryModal .modal-dialog{
  max-width: 1000px;
  width: calc(100% - 24px);
}

#ticketsHistoryModal .modal-content{
  border-radius: 22px;
  border: none;
  overflow: hidden;
  box-shadow: 0 40px 110px rgba(15,23,42,.35);
  background: #ffffff;
}

/* Header */
#ticketsHistoryModal .modal-header{
  padding: 26px 34px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
}

#ticketsHistoryModal .modal-title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.3px;
  color: #0f172a;
}

#ticketsHistoryModal .modal-title i{
  color: #dd3333;
  margin-right: 8px;
}

#ticketsHistoryModal .close{
  font-size: 22px;
  opacity: .35;
  transition: .2s ease;
}

#ticketsHistoryModal .close:hover{
  opacity: 1;
  transform: rotate(90deg);
}

/* Body scroll premium */
#ticketsHistoryModal .modal-body{
  padding: 24px 34px;
  background: #f8fafc;
  max-height: 65vh;
  overflow-y: auto;
}

/* Scrollbar premium */
#ticketsHistoryModal .modal-body::-webkit-scrollbar{
  width: 6px;
}
#ticketsHistoryModal .modal-body::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.2);
  border-radius: 999px;
}

/* ==========================================
   TABLE STYLE (ticketItem)
   ========================================== */

/* Header row */
#ticketsHistoryModal .ticketItem.header{
  display: grid;
  grid-template-columns: 160px 1fr 1fr 1fr 1fr;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #64748b;

  padding: 14px 18px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  margin-bottom: 10px;
}

/* Data rows */
#ticketsHistoryModal .ticketItem:not(.header){
  display: grid;
  grid-template-columns: 160px 1fr 1fr 1fr 1fr;
  align-items: center;

  background: #ffffff;
  padding: 16px 18px;
  border-radius: 14px;
  margin-bottom: 10px;

  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 6px 18px rgba(15,23,42,.05);

  transition: .18s ease;
}

/* Hover effect */
@media (hover:hover){
  #ticketsHistoryModal .ticketItem:not(.header):hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15,23,42,.12);
    border-color: rgba(221,51,51,.25);
  }
}

/* Date style */
#ticketsHistoryModal .ticketItem > div:first-child{
  font-weight: 700;
  color: #0f172a;
}

/* Tickets numbers highlight */
#ticketsHistoryModal .ticketItem > div:nth-child(2),
#ticketsHistoryModal .ticketItem > div:nth-child(3){
  font-weight: 800;
  color: #dd3333;
}

/* Discipline */
#ticketsHistoryModal .ticketItem > div:nth-child(4){
  font-weight: 700;
  color: #334155;
}

/* Court */
#ticketsHistoryModal .ticketItem > div:nth-child(5){
  font-weight: 600;
  color: #64748b;
}

/* Footer */
#ticketsHistoryModal .modal-footer{
  padding: 20px 34px;
  border-top: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
}

#ticketsHistoryModal .btn-default{
  border-radius: 12px;
  padding: 10px 22px;
  font-weight: 700;
  border: 1px solid rgba(15,23,42,.12);
  background: #ffffff;
}

#ticketsHistoryModal .btn-default:hover{
  background: #f1f5f9;
}
/* ==========================================
   ULTRA PREMIUM — Offrir Tickets Modal
   ========================================== */

#offrirTicketsModal .modal-dialog{
  max-width: 720px;
  width: calc(100% - 24px);
}

#offrirTicketsModal .modal-content{
  border-radius: 22px;
  border: none;
  overflow: hidden;
  box-shadow: 0 40px 110px rgba(15,23,42,.35);
  background: #ffffff;
}

/* Header */
#offrirTicketsModal .modal-header{
  padding: 26px 34px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
}

#offrirTicketsModal .modal-title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.3px;
  color: #0f172a;
}

#offrirTicketsModal .close{
  font-size: 22px;
  opacity: .35;
  transition: .2s ease;
}

#offrirTicketsModal .close:hover{
  opacity: 1;
  transform: rotate(90deg);
}

/* Body */
#offrirTicketsModal .modal-body{
  padding: 30px 34px 20px;
  background: #f8fafc;
}

/* Intro text */
#offrirTicketsModal .modal-body > div:first-child{
  font-size: 15px;
  font-weight: 600;
  color: #334155;
  line-height: 1.6;
}

/* Nombre de tickets disponible */
#offrirTicketsModal .modal-body b{
  font-size: 22px;
  font-weight: 900;
  color: #dd3333;
  background: rgba(221,51,51,.08);
  padding: 4px 10px;
  border-radius: 10px;
}

/* Form */
#offrirTicketsModal .form-group{
  margin-bottom: 18px;
}

#offrirTicketsModal label{
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #64748b;
  margin-bottom: 6px;
}

/* Inputs premium */
#offrirTicketsModal .form-control{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
  transition: .18s ease;
}

#offrirTicketsModal .form-control:focus{
  border-color: #dd3333;
  box-shadow: 0 0 0 3px rgba(221,51,51,.15);
  outline: none;
}

/* Footer */
#offrirTicketsModal .modal-footer{
  padding: 22px 34px;
  border-top: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
  text-align: right;
}

/* Bouton Offrir premium Negundo */
#offrirTicketsModal .btn-success{
  background: linear-gradient(135deg, #dd3333, #b72828) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 30px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  box-shadow: 0 14px 35px rgba(221,51,51,.35);
  transition: .2s ease;
}

#offrirTicketsModal .btn-success:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(221,51,51,.45);
}
/* ==========================================
   ULTRA PREMIUM — Update User Modal
   ========================================== */

#updateUserModal .modal-dialog{
  max-width: 900px;
  width: calc(100% - 24px);
}

#updateUserModal .modal-content{
  border-radius: 24px;
  border: none;
  overflow: hidden;
  box-shadow: 0 45px 120px rgba(15,23,42,.35);
  background: #ffffff;
}

/* HEADER */
#updateUserModal .modal-header{
  padding: 28px 36px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
}

#updateUserModal .modal-title{
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.3px;
  color: #0f172a;
}

#updateUserModal .close{
  font-size: 22px;
  opacity: .35;
  transition: .2s ease;
}

#updateUserModal .close:hover{
  opacity: 1;
  transform: rotate(90deg);
}

/* BODY */
#updateUserModal .modal-body{
  padding: 30px 36px 20px;
  background: #f8fafc;
}

/* Bloc info abonnement */
#updateUserModal .abonnementInfo2{
  background: rgba(221,51,51,.06);
  border: 1px solid rgba(221,51,51,.15);
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
  color: #b72828;
  margin-bottom: 18px;
}

/* PHOTO CONTAINER */
#photoContainer{
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px dashed rgba(15,23,42,.15) !important;
  padding: 16px 18px !important;
  transition: .2s ease;
}

#photoContainer:hover{
  border-color: #dd3333 !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

#photoContainer img{
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 20px rgba(15,23,42,.15);
  transition: .2s ease;
}

#photoContainer:hover img{
  transform: scale(1.05);
}

/* FORM */
#updateUserModal .form-group{
  margin-bottom: 18px;
}

#updateUserModal label{
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #64748b;
  margin-bottom: 6px;
}

/* Inputs premium */
#updateUserModal .form-control{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
  transition: .18s ease;
}

#updateUserModal .form-control:focus{
  border-color: #dd3333;
  box-shadow: 0 0 0 3px rgba(221,51,51,.15);
  outline: none;
}

/* Textarea */
#updateUserModal textarea.form-control{
  resize: none;
}

/* Radios premium */
#updateUserModal input[type="radio"]{
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  margin-right: 6px;
  position: relative;
  cursor: pointer;
  transition: .2s ease;
}

#updateUserModal input[type="radio"]:checked{
  border-color: #dd3333;
}

#updateUserModal input[type="radio"]:checked::before{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  background:#dd3333;
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

/* Footer */
#updateUserModal .modal-footer{
  padding: 22px 36px;
  border-top: 1px solid rgba(15,23,42,.08);
  background: #ffffff;
}

/* Bouton principal */
#updateUserModal .btn-primary{
  background: linear-gradient(135deg, #dd3333, #b72828) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 32px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  box-shadow: 0 14px 35px rgba(221,51,51,.35);
  transition: .2s ease;
}

#updateUserModal .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(221,51,51,.45);
}

#updateUserModal .btn-default{
  border-radius: 12px;
  padding: 10px 22px;
  font-weight: 700;
  border: 1px solid rgba(15,23,42,.12);
}

/* Mobile adaptation */
@media (max-width: 768px){
  #updateUserModal .modal-body{
    padding: 22px 18px;
  }

  #updateUserModal .modal-header,
  #updateUserModal .modal-footer{
    padding: 18px;
  }

  #updateUserModal .modal-title{
    font-size: 20px;
  }
}
/* Supprimer bloc annulation abonnement */
#updateUserModal .abonnementInfo2{
  display: none !important;
}
/* ==========================================
   RESERVER MODAL — ULTRA PREMIUM v2
   (sans toucher HTML)
   ========================================== */

#reserverModal .modal-dialog{
  max-width: 820px;
  width: calc(100% - 24px);
}

#reserverModal .modal-content{
  border-radius: 26px;
  border: none;
  overflow: hidden;
  box-shadow: 0 50px 140px rgba(15,23,42,.40);
  background: #ffffff;
}

/* Header plus "app" */
#reserverModal .modal-header{
  padding: 26px 34px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, #ffffff, #fbfbfd);
}

#reserverModal .modal-title{
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -.4px;
  color: #0f172a;
}

#reserverModal .close{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: #ffffff;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  transition: .18s ease;
}

#reserverModal .close:hover{
  transform: rotate(90deg) translateY(-1px);
  box-shadow: 0 12px 25px rgba(15,23,42,.12);
}

/* Body */
#reserverModal .modal-body{
  padding: 28px 34px 30px;
  background: #f8fafc;
}

/* Alerte premium (moins "bootstrap") */
#reserverModal .alert.alert-danger{
  border-radius: 18px;
  border: 1px solid rgba(221,51,51,.22);
  background: linear-gradient(135deg, rgba(221,51,51,.10), rgba(221,51,51,.04));
  color: #9f1d1d;
  font-weight: 700;
  line-height: 1.45;
  padding: 14px 16px;
  box-shadow: 0 10px 26px rgba(221,51,51,.10);
}

/* Bloc coût (si visible) */
#reserverModal #costCourt{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 12px 14px;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(15,23,42,.08);
}

/* ==========================================
   Choix joueurs : radios en "cards"
   ========================================== */

#reserverModal #choixNombreJoueurs{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Colonnes bootstrap -> on neutralise juste pour garder le grid clean */
#reserverModal #choixNombreJoueurs > .col-md-6{
  width: auto !important;
  float: none !important;
}

/* Card label */
#reserverModal #choixNombreJoueurs label{
  display: block;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -.1px;
}

/* Radio custom (mais simple) */
#reserverModal #choixNombreJoueurs input[type="radio"]{
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(15,23,42,.20);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: .18s ease;
}

#reserverModal #choixNombreJoueurs input[type="radio"]:checked{
  border-color: #dd3333;
  box-shadow: 0 0 0 4px rgba(221,51,51,.12);
}

#reserverModal #choixNombreJoueurs input[type="radio"]:checked::after{
  content:"";
  position:absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:#dd3333;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

/* Encapsulation visuelle de chaque option */
#reserverModal #choixNombreJoueurs .col-md-6{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 16px 16px;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  transition: .18s ease;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

@media (hover:hover){
  #reserverModal #choixNombreJoueurs .col-md-6:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(15,23,42,.12);
    border-color: rgba(221,51,51,.18);
  }
}

/* ==========================================
   Inputs joueurs : premium
   ========================================== */

#reserverModal .form-control{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 650;
  box-shadow: 0 8px 20px rgba(15,23,42,.05);
  transition: .18s ease;
}

#reserverModal .form-control:focus{
  border-color: #dd3333;
  box-shadow: 0 0 0 3px rgba(221,51,51,.15);
  outline: none;
}

/* Explication */
#reserverModal .explicationReservation{
  margin-top: 14px;
  text-align: center;
  font-weight: 700;
  color: #64748b;
  font-style: italic;
}

/* HR plus fin */
#reserverModal hr{
  border-color: rgba(15,23,42,.08);
  margin: 22px 0;
}

/* Bouton Réserver premium */
#reserverModal #reserverNormalBtn.btn-primary{
  background: linear-gradient(135deg, #dd3333, #b72828) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 14px 34px !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  box-shadow: 0 18px 45px rgba(221,51,51,.35);
  transition: .18s ease;
}

#reserverModal #reserverNormalBtn.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(221,51,51,.45);
}

/* Mobile : plus compact + stack */
@media (max-width: 768px){
  #reserverModal .modal-header{
    padding: 18px 18px;
  }
  #reserverModal .modal-title{
    font-size: 22px;
  }
  #reserverModal .modal-body{
    padding: 18px 18px 22px;
  }
  #reserverModal #choixNombreJoueurs{
    grid-template-columns: 1fr;
  }
}
/* ==========================================
   FIX DECALAGE — reserverModal (alignement colonnes)
   ========================================== */

/* 1) Neutraliser les <br> qui cassent la grille */
#reserverModal .modal-body br{
  display: none !important;
}

/* 2) Forcer le container joueurs en grille 2 colonnes */
#reserverModal [data-role="playersContainer"]{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 14px;
}

/* 3) Les enfants bootstrap -> pas de floats / pas de largeur fixe */
#reserverModal [data-role="playersContainer"] .col-md-6{
  float: none !important;
  width: auto !important;
}

/* 4) Les wrappers "bizarres" (les div sans classe) ne doivent pas perturber */
#reserverModal [data-role="playersContainer"] > div,
#reserverModal #player3player4Container{
  display: contents !important; /* met les inputs directement dans la grille */
}

/* 5) Inputs prennent toute la largeur de leur cellule */
#reserverModal [data-role="playersContainer"] .form-control{
  width: 100% !important;
}

/* 6) Mobile : 1 colonne */
@media (max-width: 768px){
  #reserverModal [data-role="playersContainer"]{
    grid-template-columns: 1fr !important;
  }
}
/* ==========================================
   RESERVER MODAL — ALIGNEMENT PROPRE (FINAL)
   Basé sur ton HTML exact
   ========================================== */

#reserverModal .modal-body br{
  display: none !important; /* vire les <br><br> qui cassent l’alignement */
}
/* ==========================================
   FIX — Label simple/double bien aligné
   ========================================== */

#reserverModal #choixNombreJoueurs > *{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

/* Le texte prend toute la place dispo */
#reserverModal #choixNombreJoueurs label{
  flex: 1 1 auto !important;
  display: block !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* Le radio reste à droite, sans bouger */
#reserverModal #choixNombreJoueurs input[type="radio"]{
  flex: 0 0 auto !important;
  margin: 0 !important;
}
/* ==========================================================

   NEGUNDO PREMIUM — Global UI Pack (CourtAdmin)

   Accent: #dd3333

   ========================================================== */

:root{

  --negundo: #dd3333;

  --negundo-2: #b72828;

  --bg: #f6f7fb;

  --surface: #ffffff;

  --surface-2: #f8fafc;

  --text: #0f172a;

  --muted: #64748b;

  --line: rgba(15,23,42,.10);

  --line-2: rgba(15,23,42,.08);

  --r-xl: 22px;

  --r-lg: 16px;

  --r-md: 14px;

  --shadow: 0 14px 40px rgba(15,23,42,.10);

  --shadow-2: 0 30px 90px rgba(15,23,42,.20);

  --focus: 0 0 0 3px rgba(221,51,51,.18);

}

/* ---------- Page / base ---------- */

html, body{

  background: var(--bg) !important;

  color: var(--text);

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}

a{

  color: var(--text);

  text-decoration: none;

}

a:hover{ text-decoration: underline; }

/* Conteneurs “cards” génériques */

.container, .content, .page-content, .main, main{

  max-width: 1200px;

}

.panel, .card, .box, .content-box, .well{

  background: var(--surface);

  border: 1px solid var(--line-2);

  border-radius: var(--r-xl);

  box-shadow: var(--shadow);

}

/* Titres */

h1,h2,h3,.title,.page-title{

  font-weight: 900;

  letter-spacing: -.3px;

  color: var(--text);

}

/* ---------- Forms (inputs) ---------- */

.form-control,

input[type="text"],

input[type="email"],

input[type="password"],

input[type="number"],

input[type="date"],

textarea,

select{

  border-radius: var(--r-lg) !important;

  border: 1px solid var(--line) !important;

  background: var(--surface) !important;

  box-shadow: 0 8px 18px rgba(15,23,42,.05) !important;

  padding: 12px 14px !important;

  font-size: 15px !important;

  font-weight: 600 !important;

  color: var(--text) !important;

  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;

}

textarea{ resize: none; }

.form-control:focus,

input:focus,

textarea:focus,

select:focus{

  outline: none !important;

  border-color: rgba(221,51,51,.65) !important;

  box-shadow: var(--focus) !important;

}

/* Labels plus “UI” */

label{

  font-weight: 800;

  color: var(--muted);

}

/* ---------- Buttons ---------- */

.btn{

  border-radius: var(--r-lg) !important;

  font-weight: 900 !important;

  letter-spacing: .2px;

  padding: 10px 18px !important;

  border: 1px solid transparent !important;

  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;

}

.btn:hover{

  transform: translateY(-1px);

}

.btn-primary,

button.btn-primary{

  background: linear-gradient(135deg, var(--negundo), var(--negundo-2)) !important;

  border: none !important;

  color: #fff !important;

  box-shadow: 0 16px 40px rgba(221,51,51,.28) !important;

}

.btn-primary:hover{

  box-shadow: 0 22px 55px rgba(221,51,51,.40) !important;

  filter: saturate(1.04);

}

/* Boutons secondaires */

.btn-default, .btn-secondary{

  background: #fff !important;

  border: 1px solid var(--line) !important;

  color: var(--text) !important;

}

.btn-default:hover, .btn-secondary:hover{

  box-shadow: 0 14px 35px rgba(15,23,42,.10) !important;

}

/* Si CourtAdmin utilise .btn-success (ex: offrir tickets) -> rouge Negundo */

.btn-success{

  background: linear-gradient(135deg, var(--negundo), var(--negundo-2)) !important;

  border: none !important;

  color: #fff !important;

  box-shadow: 0 16px 40px rgba(221,51,51,.28) !important;

}

/* ---------- Alerts ---------- */

.alert{

  border-radius: var(--r-lg) !important;

  border: 1px solid var(--line) !important;

  box-shadow: 0 10px 26px rgba(15,23,42,.06);

  font-weight: 650;

}

.alert-danger{

  border-color: rgba(221,51,51,.22) !important;

  background: linear-gradient(135deg, rgba(221,51,51,.10), rgba(221,51,51,.04)) !important;

  color: #9f1d1d !important;

}

/* ---------- Modals (Bootbox / Bootstrap) ---------- */

.modal-dialog{

  width: calc(100% - 24px);

}

.modal-content{

  border-radius: 24px !important;

  border: none !important;

  overflow: hidden !important;

  box-shadow: var(--shadow-2) !important;

  background: var(--surface) !important;

}

.modal-header{

  padding: 22px 28px !important;

  border-bottom: 1px solid var(--line-2) !important;

  background: linear-gradient(180deg, #ffffff, #fbfbfd) !important;

}

.modal-title{

  font-weight: 950 !important;

  letter-spacing: -.3px !important;

  color: var(--text) !important;

}

.modal-body{

  padding: 22px 28px !important;

  background: var(--surface-2) !important;

}

.modal-footer{

  padding: 18px 28px !important;

  border-top: 1px solid var(--line-2) !important;

  background: #fff !important;

}

/* Close button premium */

.modal-header .close,

.bootbox-close-button.close{

  width: 38px;

  height: 38px;

  border-radius: 12px;

  border: 1px solid var(--line);

  background: #fff;

  opacity: 1 !important;

  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  transition: .18s ease;

}

.modal-header .close:hover,

.bootbox-close-button.close:hover{

  transform: rotate(90deg);

  box-shadow: 0 12px 25px rgba(15,23,42,.12);

}

/* ---------- Tabs premium ---------- */

.nav-tabs{

  border-bottom: 1px solid var(--line-2) !important;

  margin-top: 16px;

}

.nav-tabs > li > a{

  border: 1px solid transparent !important;

  border-radius: 999px !important;

  padding: 8px 14px !important;

  font-weight: 900 !important;

  color: var(--text) !important;

  background: transparent !important;

  transition: .16s ease;

}

.nav-tabs > li > a:hover{

  background: rgba(15,23,42,.04) !important;

}

.nav-tabs > li.active > a,

.nav-tabs > li.active > a:hover,

.nav-tabs > li.active > a:focus{

  background: rgba(221,51,51,.10) !important;

  color: var(--negundo) !important;

  border-color: rgba(221,51,51,.18) !important;

}
/* ==========================================================
   LOGIN PAGE — NEGUNDO PREMIUM (ciblé panel + formLogin)
   ========================================================== */

:root{
  --negundo: #dd3333;
  --negundo-2: #b72828;
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(15,23,42,.10);
  --shadow: 0 18px 55px rgba(15,23,42,.14);
  --shadow-2: 0 35px 110px rgba(15,23,42,.22);
  --r-xl: 24px;
  --r-lg: 16px;
  --focus: 0 0 0 3px rgba(221,51,51,.18);
}

/* Fond général */
body{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(221,51,51,.06), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(15,23,42,.06), transparent 55%),
              var(--bg) !important;
  color: var(--text);
}

/* Le panel de connexion (la carte) */
.panel.panel-default{
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-2) !important;
  overflow: hidden;
  background: var(--surface) !important;
}

/* Header du panel */
.panel.panel-default > .panel-heading{
  background: linear-gradient(180deg, #ffffff, #fbfbfd) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  padding: 18px 22px !important;
  font-weight: 900 !important;
  color: var(--text) !important;
}

.panel.panel-default > .panel-heading strong{
  font-weight: 950 !important;
  letter-spacing: -.2px;
}

/* Icône du titre en rouge */
.panel.panel-default > .panel-heading .fa{
  color: var(--negundo) !important;
}

/* Body spacing */
.panel.panel-default > .panel-body{
  padding: 22px !important;
  background: var(--surface) !important;
}

/* Bloc logo + bienvenue */
.panel.panel-default .club-header{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  margin-bottom: 18px;
}

/* Logo rond premium */
.panel.panel-default .club-logo{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 14px 30px rgba(15,23,42,.18);
}

/* “Bienvenue au club…” */
.panel.panel-default .club-header legend{
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--muted) !important;
  line-height: 1.15;
}
.panel.panel-default .club-header legend b{
  display: inline-block;
  margin-left: 6px;
  color: var(--text) !important;
  font-weight: 950 !important;
  letter-spacing: -.2px;
}

/* Inputs + input-group */
#formLogin .form-group label{
  font-weight: 900 !important;
  color: var(--muted) !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
}

/* Champ */
#formLogin .form-control{
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.05) !important;
  padding: 12px 14px !important;
  font-weight: 650 !important;
}

/* Focus */
#formLogin .form-control:focus{
  border-color: rgba(221,51,51,.65) !important;
  box-shadow: var(--focus) !important;
  outline: none !important;
}

/* Input group addon (enveloppe / lock / eye) */
#formLogin .input-group-addon{
  border-radius: 14px 0 0 14px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  background: #ffffff !important;
  color: var(--muted) !important;
}

#formLogin .input-group-addon .fa{
  opacity: .95;
}

/* Quand il y a addon à droite (eye), arrondis */
#formLogin .input-group .form-control{
  border-left: 0 !important;
}
#formLogin .input-group-addon#togglePwd{
  border-left: 0 !important;
  border-radius: 0 14px 14px 0 !important;
  cursor: pointer;
}
#formLogin .input-group-addon#togglePwd:hover{
  color: var(--negundo) !important;
}

/* Bouton login (même si inline style margin-bottom) */
#formLogin .btn.btn-primary.btn-block{
  background: linear-gradient(135deg, var(--negundo), var(--negundo-2)) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 13px 18px !important;
  font-weight: 950 !important;
  box-shadow: 0 18px 50px rgba(221,51,51,.30) !important;
  letter-spacing: .2px;
}
#formLogin .btn.btn-primary.btn-block:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(221,51,51,.42) !important;
}

/* Mini actions (Contact / Créer / MDP perdu) */
#formLogin .mini-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Boutons xs premium */
#formLogin .mini-actions .btn.btn-default.btn-xs{
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  background: #fff !important;
  padding: 7px 12px !important;
  font-weight: 900 !important;
  font-size: 12px;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  transition: .16s ease;
}
#formLogin .mini-actions .btn.btn-default.btn-xs:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(15,23,42,.10);
  border-color: rgba(221,51,51,.25) !important;
}
#formLogin .mini-actions .fa{
  color: var(--negundo) !important;
}

/* Le gros message d’accueil (alert-warning) => carte lisible */
#formLogin .alert.alert-warning{
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  color: #334155 !important;
  box-shadow: 0 14px 35px rgba(15,23,42,.08);
  padding: 16px 18px !important;
}

/* Typo interne de l'alert (lisibilité) */
#formLogin .alert.alert-warning p,
#formLogin .alert.alert-warning li{
  line-height: 1.55;
}

/* HR plus fin */
#formLogin hr{
  border-color: rgba(15,23,42,.08) !important;
}

/* Mobile */
@media (max-width: 768px){
  .panel.panel-default > .panel-body{
    padding: 16px !important;
  }
  .panel.panel-default .club-header{
    flex-direction: row;
    gap: 12px;
  }
  #formLogin .mini-actions{
    justify-content: flex-start;
  }
}
/* ==========================================================
   LOGIN — PREMIUM POLISH (Negundo) — FINAL TOUCH
   (ciblé sur panel Connexion + formLogin)
   ========================================================== */

:root{
  --negundo: #dd3333;
  --negundo-2: #b72828;
  --text: #0f172a;
  --muted: #667085;
  --line: rgba(15,23,42,.10);
  --shadow: 0 18px 55px rgba(15,23,42,.14);
}

/* 1) Header "Connexion" plus clean */
.panel.panel-default > .panel-heading{
  padding: 14px 18px !important;
  font-size: 18px !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}
.panel.panel-default > .panel-heading strong{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.panel.panel-default > .panel-heading .fa{
  color: var(--negundo) !important;
}

/* 2) Carte globale un peu plus "app" */
.panel.panel-default{
  border-radius: 22px !important;
  box-shadow: var(--shadow) !important;
}

/* 3) Bloc logo + bienvenue : plus contrasté + moins haut */
.panel.panel-default .club-header{
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff, #f6f7fb) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 14px 30px rgba(15,23,42,.08) !important;
}
.panel.panel-default .club-logo{
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.14) !important;
}

/* 4) Labels plus premium (déjà OK mais un peu plus net) */
#formLogin label{
  font-size: 12px !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
  color: var(--muted) !important;
}

/* 5) Input group : plus compact, mieux aligné */
#formLogin .input-group-addon{
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  color: #64748b !important;
}
#formLogin .form-control{
  border: 1px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.05) !important;
  font-weight: 750 !important;
}
#togglePwd{
  cursor: pointer;
}
#togglePwd:hover{
  color: var(--negundo) !important;
}

/* 6) Bouton principal : moins haut, plus “premium” */
#formLogin .btn.btn-primary.btn-block{
  padding: 12px 16px !important;
  border-radius: 18px !important;
  font-weight: 950 !important;
  box-shadow: 0 18px 48px rgba(221,51,51,.28) !important;
}

/* 7) Mini actions : meilleure grille + boutons plus fins */
#formLogin .mini-actions{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  justify-content: stretch !important;
  text-align: left !important; /* override inline text-align:right */
}
#formLogin .mini-actions a.btn{
  width: 100%;
  text-align: center;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.06) !important;
}
#formLogin .mini-actions a.btn .fa{
  color: var(--negundo) !important;
}

/* Mot de passe perdu : prend la ligne entière */
#formLogin .mini-actions a[href="#forgottenModal"]{
  grid-column: 1 / -1;
}

/* 8) Bloc info (alert warning) => card plus douce + moins massive */
#formLogin .alert.alert-warning{
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.06) !important;
  padding: 14px 16px !important;
}
#formLogin .alert.alert-warning p{
  margin: 0 0 10px 0 !important;
}
#formLogin .alert.alert-warning p:last-child{
  margin-bottom: 0 !important;
}

/* 9) Mobile : resserrer le tout */
@media (max-width: 768px){
  .panel.panel-default > .panel-body{
    padding: 16px !important;
  }
  #formLogin .btn.btn-primary.btn-block{
    padding: 12px 14px !important;
  }
}
/* ==========================================================
   ADMIN HOME — PREMIUM DASHBOARD (Negundo)
   À coller TOUT EN BAS de css.css
   ========================================================== */

:root{
  --negundo: #dd3333;
  --negundo-2: #b72828;
  --text: #0f172a;
  --muted: #667085;
  --line: rgba(15,23,42,.10);
  --card: #ffffff;
  --bg: #f6f7fb;
  --shadow: 0 18px 55px rgba(15,23,42,.14);
  --shadow-soft: 0 10px 30px rgba(15,23,42,.08);
  --r: 18px;
}

/* Fond global plus premium */
body{
  background: radial-gradient(900px 500px at 20% 0%, rgba(221,51,51,.08), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(15,23,42,.06), transparent 55%),
              var(--bg) !important;
  color: var(--text);
}

/* Panels bootstrap -> cards */
.panel, .panel-default{
  border-radius: 22px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: var(--shadow-soft) !important;
  overflow: hidden;
}

.panel-heading{
  background: #fff !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  padding: 14px 18px !important;
  font-weight: 900 !important;
}

/* Le petit “bandeau” en haut (infos / hotline) : plus discret */
.topbar, .navbar, .header, .page-header{
  box-shadow: none !important;
}

/* Champ de recherche (barre au-dessus des tuiles) */
input[type="search"], .search input, .form-control{
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.05) !important;
}

/* Petits compteurs (disciplines / courts / abonnements) -> pills clean */
.badge, .label, .count, .stats span, .stats .item{
  border-radius: 999px !important;
}
.stats, .statsBar, .resume, .summary{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.stats *{
  font-weight: 800;
}

/* =============== TUILES (menu) ===============
   On cible large : boutons/liens dans panel-body
   (car ton admin est une grille de "cards")
*/
.panel-body a,
.panel-body .btn,
.panel-body .thumbnail,
.panel-body .well{
  border-radius: 18px !important;
}

/* Tuiles : look carte premium */
.panel-body a.btn,
.panel-body a.thumbnail,
.panel-body a.tile,
.panel-body a.menuItem,
.panel-body a[class*="menu"],
.panel-body a{
  /* si certaines pages ont des liens textuels, on évite de tout casser */
  text-decoration: none !important;
}

/* Ciblage principal : les gros “carrés” cliquables */
.panel-body a.btn,
.panel-body a.thumbnail,
.panel-body a.tile,
.panel-body .menu a,
.panel-body .adminMenu a,
.panel-body a[class*="tile"],
.panel-body a[class*="menu"]{
  background: linear-gradient(180deg, #ffffff, #f7f8fb) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.07) !important;
  padding: 18px 16px !important;
  display: block;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Hover premium */
@media (hover:hover){
  .panel-body a.btn:hover,
  .panel-body a.thumbnail:hover,
  .panel-body a.tile:hover,
  .panel-body .menu a:hover,
  .panel-body .adminMenu a:hover,
  .panel-body a[class*="tile"]:hover,
  .panel-body a[class*="menu"]:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow) !important;
    border-color: rgba(221,51,51,.20) !important;
  }
}

/* Icônes des tuiles -> Negundo */
.panel-body a i.fa,
.panel-body a .fa{
  color: var(--negundo) !important;
  opacity: .95;
}

/* Titres des tuiles */
.panel-body a{
  color: var(--text) !important;
  font-weight: 900;
}

/* Si le libellé est dans un <small> ou sous-texte */
.panel-body a small,
.panel-body a .muted,
.panel-body a .sub{
  color: var(--muted) !important;
  font-weight: 700;
}

/* Boutons globaux */
.btn-primary{
  background: linear-gradient(135deg, var(--negundo), var(--negundo-2)) !important;
  border: none !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 18px 48px rgba(221,51,51,.25) !important;
}
.btn-default, .btn-success, .btn-info{
  border-radius: 16px !important;
}

/* Responsive : tuiles plus compactes */
@media (max-width: 900px){
  .panel-body a.btn,
  .panel-body a.thumbnail,
  .panel-body a.tile,
  .panel-body a[class*="tile"],
  .panel-body a[class*="menu"]{
    padding: 14px 12px !important;
  }
}
/* ==========================================================
   ADMIN DASH — PREMIUM (FORCE) + TEST VISUEL
   ========================================================== */

:root{
  --negundo:#dd3333;
  --negundo2:#b72828;
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#667085;
  --line:rgba(15,23,42,.10);
  --shadow:0 16px 45px rgba(15,23,42,.14);
  --shadowSoft:0 10px 28px rgba(15,23,42,.08);
  --r:18px;
}

/* ✅ TEST: si tu vois ce petit badge en bas à droite, le CSS est bien chargé */
body::after{
  content:"CSS PREMIUM ADMIN ✓";
  position:fixed;
  right:10px; bottom:10px;
  z-index:999999;
  background:rgba(17,24,39,.85);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  pointer-events:none;
}

/* Fond global */
body{
  background: radial-gradient(900px 500px at 20% 0%, rgba(221,51,51,.08), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(15,23,42,.06), transparent 55%),
              var(--bg) !important;
  color:var(--text) !important;
}

/* Panel Bootstrap => carte */
.panel, .panel-default, .panel-body, .panel-heading{
  border-color: rgba(15,23,42,.08) !important;
}
.panel{
  border-radius: 22px !important;
  box-shadow: var(--shadowSoft) !important;
  overflow:hidden;
}
.panel-heading{
  background:#fff !important;
  padding:14px 18px !important;
  font-weight:900 !important;
}

/* Barre recherche (souvent un input dans le header du dashboard) */
.panel input[type="text"],
.panel input[type="search"],
.panel .form-control{
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.05) !important;
}

/* --------------------------
   🧱 TUILES : ciblage “large”
   (marche même si ce ne sont pas des <a>)
   -------------------------- */

/* 1) Les cases de la grille : souvent des colonnes Bootstrap */
.panel-body .row > [class*="col-"]{
  padding: 10px !important;
}

/* 2) La tuile peut être directement dans la colonne, ou un enfant unique */
.panel-body .row > [class*="col-"] > *,
.panel-body .row > [class*="col-"] > * > *{
  /* On ne veut pas tout casser : on n'applique le style qu'aux blocs "tuile" */
}

/* 3) Ciblage typique : un bloc cliquable avec icône FontAwesome */
.panel-body .row > [class*="col-"] > div,
.panel-body .row > [class*="col-"] > a,
.panel-body .row > [class*="col-"] > button,
.panel-body .row > [class*="col-"] > div[onclick],
.panel-body .row > [class*="col-"] > a[onclick],
.panel-body .row > [class*="col-"] > div:has(.fa),
.panel-body .row > [class*="col-"] > a:has(.fa){
  background: linear-gradient(180deg, #fff, #f7f8fb) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.07) !important;
  padding: 18px 16px !important;
  text-decoration: none !important;
  color: var(--text) !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Hover */
@media (hover:hover){
  .panel-body .row > [class*="col-"] > div:hover,
  .panel-body .row > [class*="col-"] > a:hover,
  .panel-body .row > [class*="col-"] > button:hover,
  .panel-body .row > [class*="col-"] > div[onclick]:hover,
  .panel-body .row > [class*="col-"] > a[onclick]:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow) !important;
    border-color: rgba(221,51,51,.20) !important;
  }
}

/* Icônes tuiles */
.panel-body .fa{
  color: var(--negundo) !important;
  opacity: .95;
}

/* Texte tuiles (souvent un <div> ou <span>) */
.panel-body .row > [class*="col-"] *{
  font-weight: 800;
}

/* Boutons */
.btn-primary{
  background: linear-gradient(135deg, var(--negundo), var(--negundo2)) !important;
  border: none !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 18px 48px rgba(221,51,51,.25) !important;
}
/* ==========================================================
   ADMIN DASH — cible réelle : .menuItem
   ========================================================== */

:root{
  --negundo:#dd3333;
  --negundo2:#b72828;
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#667085;
  --line:rgba(15,23,42,.10);
  --shadow:0 18px 50px rgba(15,23,42,.12);
  --shadow2:0 26px 70px rgba(15,23,42,.16);
  --r:18px;
}

/* fond */
body{
  background: radial-gradient(900px 500px at 20% 0%, rgba(221,51,51,.08), transparent 55%),
              radial-gradient(900px 500px at 90% 10%, rgba(15,23,42,.06), transparent 55%),
              var(--bg) !important;
}

/* grille : si les menuItem sont dans un container */
.menuContainer{
  display:flex !important;
  flex-wrap:wrap !important;
  gap: 14px !important;
  align-items: stretch !important;
}

/* la tuile */
.menuItem{
  background: linear-gradient(180deg, #fff, #f7f8fb) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;

  padding: 18px 16px !important;
  min-width: 180px;              /* ajuste si besoin */
  flex: 1 1 220px;               /* responsive */
  display:flex !important;
  align-items:center !important;
  gap: 12px !important;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* hover */
@media (hover:hover){
  .menuItem:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow2) !important;
    border-color: rgba(221,51,51,.20) !important;
  }
}

/* icône */
.menuItem > .fa{
  color: var(--negundo) !important;
  font-size: 22px !important;
  opacity: .95;
  width: 28px;
  text-align:center;
}

/* lien = texte de la tuile */
.menuItem a{
  color: var(--text) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  letter-spacing: .1px;
}

/* focus clavier */
.menuItem a:focus-visible{
  outline:none !important;
  box-shadow: 0 0 0 3px rgba(221,51,51,.18) !important;
  border-radius: 10px;
}

/* petit "chevron" discret à droite (look premium) */
.menuItem::after{
  content:"›";
  margin-left:auto;
  color: rgba(15,23,42,.35);
  font-size: 22px;
  font-weight: 900;
}

/* mobile : tuiles plus compactes */
@media (max-width: 768px){
  .menuItem{
    min-width: 140px;
    flex: 1 1 calc(50% - 14px);
    padding: 14px 12px !important;
  }
  .menuItem a{ font-size: 14px !important; }
  .menuItem > .fa{ font-size: 20px !important; }
}
/* ==========================================================
   ADMIN DASH — PATCH (annule le flex + chevron, rendu premium propre)
   ========================================================== */

:root{
  --negundo:#dd3333;
  --text:#0f172a;
  --muted:#667085;
}

/* 1) on NE TOUCHE PAS au conteneur/grille : on annule mon .menuContainer */
.menuContainer{
  display: block !important;
}

/* 2) la tuile : on revient en block clean (sans flex) */
.menuItem{
  display: block !important;
  position: relative !important;

  background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.10) !important;

  padding: 18px 16px !important;
  min-height: 92px !important;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* on enlève mon chevron ajouté (ça doublonnait avec le tien) */
.menuItem::after{
  content: none !important;
}

/* 3) icône + texte : rendu “carte” centré */
.menuItem > .fa{
  display: block !important;
  text-align: center !important;
  color: var(--negundo) !important;
  font-size: 22px !important;
  margin: 4px 0 10px !important;
}

/* le lien prend toute la carte et centre le texte */
.menuItem a{
  display: block !important;
  text-align: center !important;
  color: var(--text) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

/* hover premium */
@media (hover:hover){
  .menuItem:hover{
    transform: translateY(-2px) !important;
    box-shadow: 0 24px 60px rgba(15,23,42,.14) !important;
    border-color: rgba(221,51,51,.20) !important;
  }
}

/* 4) mobile : plus compact */
@media (max-width: 768px){
  .menuItem{
    padding: 14px 12px !important;
    min-height: 80px !important;
  }
  .menuItem a{ font-size: 13px !important; }
  .menuItem > .fa{ font-size: 20px !important; }
}
/* ==========================================================
   ADMIN DASH — FIX CATA (remet une grille de tuiles premium)
   ========================================================== */

:root{
  --negundo:#dd3333;
  --text:#0f172a;
}

/* 1) FORCE la grille sur la page admin */
.menuContainer{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(140px, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;

  /* au cas où un ancien CSS mettait du padding/margin chelou */
  padding: 8px !important;
  margin: 0 !important;
}

/* responsive */
@media (max-width: 1400px){
  .menuContainer{ grid-template-columns: repeat(4, minmax(140px, 1fr)) !important; }
}
@media (max-width: 992px){
  .menuContainer{ grid-template-columns: repeat(3, minmax(140px, 1fr)) !important; }
}
@media (max-width: 768px){
  .menuContainer{ grid-template-columns: repeat(2, minmax(140px, 1fr)) !important; }
}
@media (max-width: 420px){
  .menuContainer{ grid-template-columns: 1fr !important; }
}

/* 2) La tuile */
.menuItem{
  /* annule le mode “ligne” */
  width: auto !important;
  float: none !important;
  clear: none !important;

  /* look premium */
  background: linear-gradient(180deg,#ffffff 0%, #f7f8fb 100%) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.10) !important;

  min-height: 110px !important;
  padding: 18px 14px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}

/* enlève un éventuel chevron ou pseudo élément injecté par un ancien CSS */
.menuItem::before,
.menuItem::after{
  content: none !important;
}

/* 3) Icône */
.menuItem > .fa{
  color: var(--negundo) !important;
  font-size: 24px !important;
  margin: 0 !important;
}

/* 4) Lien */
.menuItem a{
  color: var(--text) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  text-align: center !important;
  line-height: 1.1 !important;
}

/* Hover premium */
@media (hover:hover){
  .menuItem:hover{
    transform: translateY(-2px) !important;
    box-shadow: 0 24px 60px rgba(15,23,42,.14) !important;
    border-color: rgba(221,51,51,.22) !important;
  }
}

ChatGPT a dit :

Réflexion durant 34s
/* =========================
   BASE À NE PAS TOUCHER
   ========================= */
div.planning .fa.fa-exclamation-circle,
div.planning .fa.fa-exclamation-triangle {
  color: green !important;
}

div.zclosed[data-disciplineid="36"] {
  display: none;
}

@media (max-width: 640px) {
  div.planning [data-disciplineid="36"] div.hour {
    font-size: 1.3em !important;
    left: 15px !important;
    top: 5px !important;
  }

  div.cell.discipline36 {
    display: flex;
  }

  div.cell.discipline36 div.planningItem {
    display: none;
  }

  div.row[data-disciplineid="36"] {
    width: 33%;
  }
}

/* ==========================================================
   THEME PREMIUM (Negundo) — CLEAN (sans doublons)
   ========================================================== */

/* ---------- TOKENS (1 seule fois) ---------- */
:root {
  --p-surface: #ffffff;
  --p-surface-2: #f7f8fb;
  --p-text: #0f172a;
  --p-muted: #667085;

  --p-radius: 14px;
  --p-radius-sm: 10px;

  --p-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  --p-shadow-2: 0 18px 50px rgba(15, 23, 42, 0.14);

  --p-accent: #dd3333;
  --p-accent-2: #b72828;

  --p-focus: 0 0 0 3px rgba(221, 51, 51, 0.22);

  --ui-line: rgba(15, 23, 42, 0.08);

  /* widget vars (final) */
  --ca-primary: #dd3333;
  --ca-primary-2: #b72828;

  /* aliases (au cas où) */
  --primary: #dd3333;
  --primary-color: #dd3333;
  --brand-primary: #dd3333;
  --accent: #dd3333;

  /* admin */
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --muted: #667085;
  --line: rgba(15, 23, 42, 0.10);
  --line-2: rgba(15, 23, 42, 0.08);
  --r-xl: 24px;
  --r-lg: 16px;
  --r-md: 14px;
  --shadow: 0 18px 55px rgba(15, 23, 42, 0.14);
  --shadow-2: 0 35px 110px rgba(15, 23, 42, 0.22);
  --focus: 0 0 0 3px rgba(221, 51, 51, 0.18);
}

/* Variables sur conteneurs widget */
div.planning,
div#planning,
.planning,
.ca,
.ca-root,
.ca-widget {
  --ca-primary: #dd3333 !important;
  --ca-primary-2: #b72828 !important;

  --primary: #dd3333 !important;
  --primary-color: #dd3333 !important;
  --brand-primary: #dd3333 !important;
  --accent: #dd3333 !important;
}

/* Fallback boutons */
div.planning .btn-primary,
.ca .btn-primary,
.ca-widget .btn-primary {
  background: #dd3333 !important;
  border-color: #dd3333 !important;
}

/* =========================
   PLANNING — rendu global
   ========================= */
div.planning {
  color: var(--p-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

div.planning .row {
  background: transparent;
}

div.planning .cell {
  background: var(--p-surface);
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--p-radius-sm);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

/* En-tête colonne */
div.planning .cell .header,
div.planning .cell .courtName,
div.planning .cell .titleCourt,
div.planning .cell > .title {
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  background: #fff !important;
  border-bottom: 1px solid var(--ui-line);
}

/* Cartes de créneaux */
div.planning .planningItem {
  position: relative;
  background: linear-gradient(180deg, var(--p-surface), var(--p-surface-2));
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--p-radius);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
  will-change: transform;
}

/* Liseré accent premium */
div.planning .planningItem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--p-accent), var(--p-accent-2));
  opacity: 0.85;
}

@media (hover: hover) {
  div.planning .planningItem:hover {
    transform: translateY(-2px);
    box-shadow: var(--p-shadow-2);
    filter: saturate(1.03);
  }
}

/* Typo planning */
div.planning .hour {
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--p-text);
}

div.planning .title,
div.planning .planningItem .title {
  font-weight: 800;
  color: var(--p-text);
}

div.planning .sub,
div.planning .planningItem .sub,
div.planning .meta {
  color: var(--p-muted);
}

div.planning .fa {
  opacity: 0.92;
}

/* Focus clavier */
div.planning a:focus-visible,
div.planning button:focus-visible,
div.planning [tabindex]:focus-visible,
div.planning [role="tab"]:focus-visible {
  outline: none !important;
  box-shadow: var(--p-focus) !important;
  border-radius: 12px;
}

/* États */
div.planning .is-full,
div.planning .full,
div.planning [data-status="full"] {
  opacity: 0.78;
  filter: grayscale(0.15);
}

div.planning .is-closed,
div.planning .closed,
div.planning [data-status="closed"] {
  opacity: 0.58;
}

/* =========================
   RÉSERVÉ (busy)
   ========================= */
div.planning.busy {
  border-radius: var(--p-radius) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.15) !important;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

div.planning.busy * {
  color: #ffffff !important;
}

div.planning.busy .fa-bolt {
  color: #ffd400 !important;
}

@media (hover: hover) {
  div.planning.busy:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.25) !important;
  }
}

/* =========================
   LIBRE (free) — version finale
   Fond inchangé + liseré uniquement
   - Creuse (AntiqueWhite) : liseré AntiqueWhite
   - Pleine (SandyBrown)   : liseré #dd3333
   ========================= */
div.planning.free {
  color: #374151 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 14px !important;
  position: relative;
  padding-left: 12px !important; /* place pour le liseré */
}

div.planning.free::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.18);
  opacity: 0.9;
}

/* Creuse */
div.planning.free[data-color="AntiqueWhite"]::before,
div.planning.free[style*="AntiqueWhite"]::before {
  background: AntiqueWhite !important;
  opacity: 1 !important;
}

/* Pleine */
div.planning.free[data-color="SandyBrown"]::before,
div.planning.free[style*="SandyBrown"]::before {
  background: #dd3333 !important;
  opacity: 1 !important;
}

@media (hover: hover) {
  div.planning.free:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.10) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
  }
}

/* =========================
   MOBILE — badge heure LIBRE
   (uniquement dans la grille planning)
   ========================= */
@media (max-width: 768px) {
  div.planning div.row.zfree {
    position: relative !important;
  }

  div.planning div.row.zfree > div.hour {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    background: rgba(0, 0, 0, 0.70) !important;
    color: #fff !important;

    padding: 1px 5px !important;
    border-radius: 4px !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    z-index: 10 !important;

    box-shadow: none !important;
    pointer-events: none !important;
  }

  div.planning div.row.zfree > div.hour i {
    font-size: 8px !important;
    margin-right: 2px !important;
  }

  div.planning div.row.zfree > div.planning.free {
    padding-top: 10px !important;
  }
}

/* =========================
   LÉGENDE / PILLS
   ========================= */
.creneauxContainer,
.filters,
.filterBar,
.legend,
.legendContainer {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.creneauxContainer > *,
.filters a,
.filters button,
.filters span,
.filterBar a,
.filterBar button,
.filterBar span,
.legend a,
.legend button,
.legend span,
.legendContainer a,
.legendContainer button,
.legendContainer span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  color: #111827;
  background: #ffffff;
  text-decoration: none !important;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease,
    border-color 0.12s ease;
}

@media (hover: hover) {
  .creneauxContainer > *:hover,
  .filters a:hover,
  .filters button:hover,
  .filters span:hover,
  .filterBar a:hover,
  .filterBar button:hover,
  .filterBar span:hover,
  .legend a:hover,
  .legend button:hover,
  .legend span:hover,
  .legendContainer a:hover,
  .legendContainer button:hover,
  .legendContainer span:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  }
}

/* Légende creuse */
.creneauxContainer > div[style*="AntiqueWhite"],
.creneauxContainer > div[style*="antiquewhite"] {
  background: AntiqueWhite !important;
  color: #374151 !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}

/* Légende pleine */
.creneauxContainer > div[style*="SandyBrown"],
.creneauxContainer > div[style*="sandybrown"] {
  background: #dd3333 !important;
  color: #ffffff !important;
  border-color: rgba(221, 51, 51, 0.22) !important;
}

.creneauxContainer .active,
.creneauxContainer .selected,
.filters .active,
.filters .selected,
.filterBar .active,
.filterBar .selected,
.legend .active,
.legend .selected {
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.14);
}

.creneauxContainer a:focus-visible,
.creneauxContainer button:focus-visible,
.filters a:focus-visible,
.filters button:focus-visible,
.filterBar a:focus-visible,
.filterBar button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(221, 51, 51, 0.18) !important;
}

/* =========================
   RESERVER MODAL — ULTRA PREMIUM (final)
   ========================= */
div.text_header_reservation.text-center.alert.alert-info {
  display: none !important;
}

#reserverModal .modal-dialog {
  max-width: 820px;
  width: calc(100% - 24px);
}

#reserverModal .modal-content {
  border-radius: 26px;
  border: none;
  overflow: hidden;
  box-shadow: 0 50px 140px rgba(15, 23, 42, 0.40);
  background: #ffffff;
}

#reserverModal .modal-header {
  padding: 26px 34px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, #ffffff, #fbfbfd);
}

#reserverModal .modal-title {
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.4px;
  color: #0f172a;
}

#reserverModal .close {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: #ffffff;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  transition: 0.18s ease;
}

#reserverModal .close:hover {
  transform: rotate(90deg) translateY(-1px);
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.12);
}

#reserverModal .modal-body {
  padding: 28px 34px 30px;
  background: #f8fafc;
}

/* Neutralise les <br> parasites */
#reserverModal .modal-body br {
  display: none !important;
}

#reserverModal .alert.alert-danger {
  border-radius: 18px;
  border: 1px solid rgba(221, 51, 51, 0.22);
  background: linear-gradient(135deg, rgba(221, 51, 51, 0.10), rgba(221, 51, 51, 0.04));
  color: #9f1d1d;
  font-weight: 700;
  line-height: 1.45;
  padding: 14px 16px;
  box-shadow: 0 10px 26px rgba(221, 51, 51, 0.10);
}

#reserverModal #costCourt {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 12px 14px;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

/* choix joueurs */
#reserverModal #choixNombreJoueurs {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#reserverModal #choixNombreJoueurs > .col-md-6 {
  width: auto !important;
  float: none !important;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 16px 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  transition: 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (hover: hover) {
  #reserverModal #choixNombreJoueurs > .col-md-6:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    border-color: rgba(221, 51, 51, 0.18);
  }
}

#reserverModal #choixNombreJoueurs label {
  flex: 1 1 auto !important;
  margin: 0 !important;
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.1px;
  line-height: 1.25 !important;
  display: block !important;
}

#reserverModal #choixNombreJoueurs input[type="radio"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(15, 23, 42, 0.20);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: 0.18s ease;
}

#reserverModal #choixNombreJoueurs input[type="radio"]:checked {
  border-color: #dd3333;
  box-shadow: 0 0 0 4px rgba(221, 51, 51, 0.12);
}

#reserverModal #choixNombreJoueurs input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dd3333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* inputs joueurs */
#reserverModal .form-control {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 650;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  transition: 0.18s ease;
}

#reserverModal .form-control:focus {
  border-color: #dd3333;
  box-shadow: 0 0 0 3px rgba(221, 51, 51, 0.15);
  outline: none;
}

#reserverModal .explicationReservation {
  margin-top: 14px;
  text-align: center;
  font-weight: 700;
  color: #64748b;
  font-style: italic;
}

#reserverModal hr {
  border-color: rgba(15, 23, 42, 0.08);
  margin: 22px 0;
}

/* bouton réserver */
#reserverModal #reserverNormalBtn.btn-primary {
  background: linear-gradient(135deg, #dd3333, #b72828) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 14px 34px !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  box-shadow: 0 18px 45px rgba(221, 51, 51, 0.35);
  transition: 0.18s ease;
}

#reserverModal #reserverNormalBtn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(221, 51, 51, 0.45);
}

@media (max-width: 768px) {
  #reserverModal .modal-header {
    padding: 18px 18px;
  }
  #reserverModal .modal-title {
    font-size: 22px;
  }
  #reserverModal .modal-body {
    padding: 18px 18px 22px;
  }
  #reserverModal #choixNombreJoueurs {
    grid-template-columns: 1fr;
  }
}

/* =========================
   ABONNEMENT MODAL — PRICING (final)
   ========================= */
#abonnementModal .modal-dialog {
  max-width: 980px;
  width: calc(100% - 24px);
}

#abonnementModal .modal-content {
  border-radius: 22px;
  border: none;
  overflow: hidden;
  box-shadow: 0 40px 110px rgba(15, 23, 42, 0.35);
  background: #ffffff;
}

#abonnementModal .modal-header {
  padding: 28px 36px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

#abonnementModal .modal-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #0f172a;
}

#abonnementModal .close {
  font-size: 22px;
  opacity: 0.35;
  transition: 0.2s ease;
}

#abonnementModal .close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

#abonnementModal .modal-body {
  padding: 32px 36px 18px;
  background: #f8fafc;
}

#abonnementModal .nav-tabs {
  border-bottom: none;
  display: inline-flex;
  background: #ffffff;
  padding: 6px;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  margin: 0 0 26px;
}

#abonnementModal .nav-tabs > li {
  margin: 0;
}

#abonnementModal .nav-tabs > li > a {
  border: none !important;
  border-radius: 999px !important;
  font-weight: 800;
  color: #64748b !important;
  padding: 10px 18px;
  transition: 0.2s ease;
}

#abonnementModal .nav-tabs > li.active > a {
  background: linear-gradient(135deg, #dd3333, #b72828) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(221, 51, 51, 0.30);
}

/* Fix tabs bootstrap: hide/show propre */
#abonnementModal .tab-content > .tab-pane {
  display: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#abonnementModal .tab-content > .tab-pane.active,
#abonnementModal .tab-content > .tab-pane.active.in {
  display: block !important;
}

#abonnementModal .tab-content h2 {
  margin: 10px 0 14px !important;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.2px;
}

/* Cards */
#abonnementModal .tab-pane .chooseAbonnement {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;

  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 18px 18px;
  margin-bottom: 14px;

  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  cursor: pointer;

  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease,
    filter 0.18s ease;
  overflow: hidden;
}

#abonnementModal .chooseAbonnement:last-child {
  margin-bottom: 0 !important;
}

#abonnementModal .tab-pane .chooseAbonnement::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.14);
  opacity: 0.65;
}

@media (hover: hover) {
  #abonnementModal .tab-pane .chooseAbonnement:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.14);
    border-color: rgba(221, 51, 51, 0.22);
    filter: saturate(1.02);
  }
}

#abonnementModal .tab-pane .chooseAbonnement > div:first-child {
  font-weight: 900;
  font-size: 15px;
  color: #0f172a;
  letter-spacing: -0.1px;
  line-height: 1.25;
}

#abonnementModal .tab-pane .chooseAbonnement > div:last-child {
  text-align: right;
  min-width: 120px;
  color: #dd3333 !important;
  font-weight: 800;
}

#abonnementModal .tab-pane .chooseAbonnement b {
  font-size: 20px;
  font-weight: 950;
  color: #dd3333 !important;
}

#abonnementModal .tab-pane .chooseAbonnement > div:last-child > div:last-child {
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: #64748b;
}

/* Badge "Le plus vendu" — data-id 2 et 21 (final) */
#abonnementModal .chooseAbonnement[data-id="2"],
#abonnementModal .chooseAbonnement[data-id="21"] {
  padding-top: 32px;
  border-color: rgba(221, 51, 51, 0.30);
  box-shadow: 0 18px 45px rgba(221, 51, 51, 0.12);
}

#abonnementModal .chooseAbonnement[data-id="2"]::before,
#abonnementModal .chooseAbonnement[data-id="21"]::before {
  background: #dd3333 !important;
  opacity: 1 !important;
}

#abonnementModal .chooseAbonnement[data-id="2"]::after,
#abonnementModal .chooseAbonnement[data-id="21"]::after {
  content: "Le plus vendu";
  position: absolute;
  top: 8px;
  right: 18px;

  background: linear-gradient(135deg, #dd3333, #b72828);
  color: #ffffff;

  padding: 5px 12px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.3px;

  box-shadow: 0 8px 22px rgba(221, 51, 51, 0.35);
}

#abonnementModal .modal-footer {
  padding: 22px 36px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

#abonnementModal .btn-default {
  border-radius: 12px;
  padding: 10px 20px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  font-weight: 800;
}

#abonnementModal .btn-default:hover {
  background: #f1f5f9;
}

#abonnementModal.fade .modal-dialog {
  transform: translateY(34px);
  transition: 0.25s ease;
}

#abonnementModal.in .modal-dialog {
  transform: translateY(0);
}

@media (max-width: 768px) {
  #abonnementModal .modal-body {
    padding: 22px 16px 18px;
  }
  #abonnementModal .modal-header,
  #abonnementModal .modal-footer {
    padding: 18px 16px;
  }
  #abonnementModal .modal-title {
    font-size: 20px;
  }
  #abonnementModal .tab-pane .chooseAbonnement {
    border-radius: 16px;
    padding: 14px 14px;
  }
  #abonnementModal .tab-pane .chooseAbonnement b {
    font-size: 18px;
  }
}

/* =========================
   TICKETS HISTORY MODAL
   ========================= */
#ticketsHistoryModal .modal-dialog {
  max-width: 1000px;
  width: calc(100% - 24px);
}

#ticketsHistoryModal .modal-content {
  border-radius: 22px;
  border: none;
  overflow: hidden;
  box-shadow: 0 40px 110px rgba(15, 23, 42, 0.35);
  background: #ffffff;
}

#ticketsHistoryModal .modal-header {
  padding: 26px 34px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

#ticketsHistoryModal .modal-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #0f172a;
}

#ticketsHistoryModal .modal-title i {
  color: #dd3333;
  margin-right: 8px;
}

#ticketsHistoryModal .close {
  font-size: 22px;
  opacity: 0.35;
  transition: 0.2s ease;
}

#ticketsHistoryModal .close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

#ticketsHistoryModal .modal-body {
  padding: 24px 34px;
  background: #f8fafc;
  max-height: 65vh;
  overflow-y: auto;
}

#ticketsHistoryModal .modal-body::-webkit-scrollbar {
  width: 6px;
}

#ticketsHistoryModal .modal-body::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.2);
  border-radius: 999px;
}

#ticketsHistoryModal .ticketItem.header {
  display: grid;
  grid-template-columns: 160px 1fr 1fr 1fr 1fr;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;

  padding: 14px 18px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  margin-bottom: 10px;
}

#ticketsHistoryModal .ticketItem:not(.header) {
  display: grid;
  grid-template-columns: 160px 1fr 1fr 1fr 1fr;
  align-items: center;

  background: #ffffff;
  padding: 16px 18px;
  border-radius: 14px;
  margin-bottom: 10px;

  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);

  transition: 0.18s ease;
}

@media (hover: hover) {
  #ticketsHistoryModal .ticketItem:not(.header):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
    border-color: rgba(221, 51, 51, 0.25);
  }
}

#ticketsHistoryModal .ticketItem > div:first-child {
  font-weight: 700;
  color: #0f172a;
}

#ticketsHistoryModal .ticketItem > div:nth-child(2),
#ticketsHistoryModal .ticketItem > div:nth-child(3) {
  font-weight: 800;
  color: #dd3333;
}

#ticketsHistoryModal .ticketItem > div:nth-child(4) {
  font-weight: 700;
  color: #334155;
}

#ticketsHistoryModal .ticketItem > div:nth-child(5) {
  font-weight: 600;
  color: #64748b;
}

#ticketsHistoryModal .modal-footer {
  padding: 20px 34px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

#ticketsHistoryModal .btn-default {
  border-radius: 12px;
  padding: 10px 22px;
  font-weight: 700;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
}

#ticketsHistoryModal .btn-default:hover {
  background: #f1f5f9;
}

/* =========================
   OFFRIR TICKETS MODAL
   ========================= */
#offrirTicketsModal .modal-dialog {
  max-width: 720px;
  width: calc(100% - 24px);
}

#offrirTicketsModal .modal-content {
  border-radius: 22px;
  border: none;
  overflow: hidden;
  box-shadow: 0 40px 110px rgba(15, 23, 42, 0.35);
  background: #ffffff;
}

#offrirTicketsModal .modal-header {
  padding: 26px 34px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

#offrirTicketsModal .modal-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #0f172a;
}

#offrirTicketsModal .close {
  font-size: 22px;
  opacity: 0.35;
  transition: 0.2s ease;
}

#offrirTicketsModal .close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

#offrirTicketsModal .modal-body {
  padding: 30px 34px 20px;
  background: #f8fafc;
}

#offrirTicketsModal .modal-body > div:first-child {
  font-size: 15px;
  font-weight: 600;
  color: #334155;
  line-height: 1.6;
}

#offrirTicketsModal .modal-body b {
  font-size: 22px;
  font-weight: 900;
  color: #dd3333;
  background: rgba(221, 51, 51, 0.08);
  padding: 4px 10px;
  border-radius: 10px;
}

#offrirTicketsModal .form-group {
  margin-bottom: 18px;
}

#offrirTicketsModal label {
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  margin-bottom: 6px;
}

#offrirTicketsModal .form-control {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  transition: 0.18s ease;
}

#offrirTicketsModal .form-control:focus {
  border-color: #dd3333;
  box-shadow: 0 0 0 3px rgba(221, 51, 51, 0.15);
  outline: none;
}

#offrirTicketsModal .modal-footer {
  padding: 22px 34px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  text-align: right;
}

#offrirTicketsModal .btn-success {
  background: linear-gradient(135deg, #dd3333, #b72828) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 30px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  box-shadow: 0 14px 35px rgba(221, 51, 51, 0.35);
  transition: 0.2s ease;
}

#offrirTicketsModal .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(221, 51, 51, 0.45);
}

/* =========================
   UPDATE USER MODAL
   ========================= */
#updateUserModal .modal-dialog {
  max-width: 900px;
  width: calc(100% - 24px);
}

#updateUserModal .modal-content {
  border-radius: 24px;
  border: none;
  overflow: hidden;
  box-shadow: 0 45px 120px rgba(15, 23, 42, 0.35);
  background: #ffffff;
}

#updateUserModal .modal-header {
  padding: 28px 36px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

#updateUserModal .modal-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #0f172a;
}

#updateUserModal .close {
  font-size: 22px;
  opacity: 0.35;
  transition: 0.2s ease;
}

#updateUserModal .close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

#updateUserModal .modal-body {
  padding: 30px 36px 20px;
  background: #f8fafc;
}

/* Supprimer bloc annulation abonnement (final) */
#updateUserModal .abonnementInfo2 {
  display: none !important;
}

#photoContainer {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px dashed rgba(15, 23, 42, 0.15) !important;
  padding: 16px 18px !important;
  transition: 0.2s ease;
}

#photoContainer:hover {
  border-color: #dd3333 !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

#photoContainer img {
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
  transition: 0.2s ease;
}

#photoContainer:hover img {
  transform: scale(1.05);
}

#updateUserModal .form-group {
  margin-bottom: 18px;
}

#updateUserModal label {
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  margin-bottom: 6px;
}

#updateUserModal .form-control {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  transition: 0.18s ease;
}

#updateUserModal .form-control:focus {
  border-color: #dd3333;
  box-shadow: 0 0 0 3px rgba(221, 51, 51, 0.15);
  outline: none;
}

#updateUserModal textarea.form-control {
  resize: none;
}

#updateUserModal input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  margin-right: 6px;
  position: relative;
  cursor: pointer;
  transition: 0.2s ease;
}

#updateUserModal input[type="radio"]:checked {
  border-color: #dd3333;
}

#updateUserModal input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #dd3333;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#updateUserModal .modal-footer {
  padding: 22px 36px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

#updateUserModal .btn-primary {
  background: linear-gradient(135deg, #dd3333, #b72828) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 32px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  box-shadow: 0 14px 35px rgba(221, 51, 51, 0.35);
  transition: 0.2s ease;
}

#updateUserModal .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(221, 51, 51, 0.45);
}

#updateUserModal .btn-default {
  border-radius: 12px;
  padding: 10px 22px;
  font-weight: 700;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

@media (max-width: 768px) {
  #updateUserModal .modal-body {
    padding: 22px 18px;
  }
  #updateUserModal .modal-header,
  #updateUserModal .modal-footer {
    padding: 18px;
  }
  #updateUserModal .modal-title {
    font-size: 20px;
  }
}

/* =========================
   ADMIN — base propre
   ========================= */
html,
body {
  background: radial-gradient(1200px 600px at 20% 0%, rgba(221, 51, 51, 0.06), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(15, 23, 42, 0.06), transparent 55%),
    var(--bg) !important;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container,
.content,
.page-content,
.main,
main {
  max-width: 1200px;
}

.panel,
.card,
.box,
.content-box,
.well,
.panel.panel-default {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}

h1,
h2,
h3,
.title,
.page-title {
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--text);
}

/* inputs */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

textarea {
  resize: none;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: rgba(221, 51, 51, 0.65) !important;
  box-shadow: var(--focus) !important;
}

label {
  font-weight: 800;
  color: var(--muted);
}

/* buttons */
.btn {
  border-radius: var(--r-lg) !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px;
  padding: 10px 18px !important;
  border: 1px solid transparent !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary,
button.btn-primary,
.btn-success {
  background: linear-gradient(135deg, #dd3333, #b72828) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 16px 40px rgba(221, 51, 51, 0.28) !important;
}

.btn-primary:hover,
.btn-success:hover {
  box-shadow: 0 22px 55px rgba(221, 51, 51, 0.40) !important;
  filter: saturate(1.04);
}

.btn-default,
.btn-secondary {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}

.btn-default:hover,
.btn-secondary:hover {
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.10) !important;
}

/* alerts */
.alert {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  font-weight: 650;
}

.alert-danger {
  border-color: rgba(221, 51, 51, 0.22) !important;
  background: linear-gradient(135deg, rgba(221, 51, 51, 0.10), rgba(221, 51, 51, 0.04)) !important;
  color: #9f1d1d !important;
}

/* modals (global) */
.modal-dialog {
  width: calc(100% - 24px);
}

.modal-content {
  border-radius: 24px !important;
  border: none !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-2) !important;
  background: var(--surface) !important;
}

.modal-header {
  padding: 22px 28px !important;
  border-bottom: 1px solid var(--line-2) !important;
  background: linear-gradient(180deg, #ffffff, #fbfbfd) !important;
}

.modal-title {
  font-weight: 950 !important;
  letter-spacing: -0.3px !important;
  color: var(--text) !important;
}

.modal-body {
  padding: 22px 28px !important;
  background: var(--surface-2) !important;
}

.modal-footer {
  padding: 18px 28px !important;
  border-top: 1px solid var(--line-2) !important;
  background: #fff !important;
}

/* close button premium */
.modal-header .close,
.bootbox-close-button.close {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: 0.18s ease;
}

.modal-header .close:hover,
.bootbox-close-button.close:hover {
  transform: rotate(90deg);
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.12);
}

/* tabs (global) */
.nav-tabs {
  border-bottom: 1px solid var(--line-2) !important;
  margin-top: 16px;
}

.nav-tabs > li > a {
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  background: transparent !important;
  transition: 0.16s ease;
}

.nav-tabs > li > a:hover {
  background: rgba(15, 23, 42, 0.04) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: rgba(221, 51, 51, 0.10) !important;
  color: #dd3333 !important;
  border-color: rgba(221, 51, 51, 0.18) !important;
}

/* =========================
   LOGIN — ciblé panel + formLogin (final)
   ========================= */
.panel.panel-default > .panel-heading {
  padding: 14px 18px !important;
  font-size: 18px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  background: linear-gradient(180deg, #ffffff, #fbfbfd) !important;
  font-weight: 900 !important;
}

.panel.panel-default > .panel-heading strong {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 950 !important;
  letter-spacing: -0.2px;
}

.panel.panel-default > .panel-heading .fa {
  color: #dd3333 !important;
}

.panel.panel-default {
  border-radius: 22px !important;
  box-shadow: var(--shadow-2) !important;
  overflow: hidden;
  background: var(--surface) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.panel.panel-default > .panel-body {
  padding: 22px !important;
  background: var(--surface) !important;
}

.panel.panel-default .club-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff, #f6f7fb) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08) !important;
  margin-bottom: 18px;
}

.panel.panel-default .club-logo {
  width: 54px !important;
  height: 54px !important;
  object-fit: cover;
  border-radius: 50% !important;
  border: 3px solid #fff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14) !important;
}

.panel.panel-default .club-header legend {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--muted) !important;
  line-height: 1.15;
}

.panel.panel-default .club-header legend b {
  display: inline-block;
  margin-left: 6px;
  color: var(--text) !important;
  font-weight: 950 !important;
  letter-spacing: -0.2px;
}

#formLogin label {
  font-size: 12px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
  color: var(--muted) !important;
}

#formLogin .input-group-addon {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #64748b !important;
}

#formLogin .form-control {
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
  font-weight: 750 !important;
}

#formLogin .form-control:focus {
  border-color: rgba(221, 51, 51, 0.65) !important;
  box-shadow: var(--focus) !important;
  outline: none !important;
}

#togglePwd {
  cursor: pointer;
}

#togglePwd:hover {
  color: #dd3333 !important;
}

#formLogin .btn.btn-primary.btn-block {
  background: linear-gradient(135deg, #dd3333, #b72828) !important;
  border: none !important;
  padding: 12px 16px !important;
  border-radius: 18px !important;
  font-weight: 950 !important;
  box-shadow: 0 18px 48px rgba(221, 51, 51, 0.28) !important;
  letter-spacing: 0.2px;
}

#formLogin .btn.btn-primary.btn-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(221, 51, 51, 0.42) !important;
}

#formLogin .mini-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  justify-content: stretch !important;
  text-align: left !important;
  margin-top: 10px;
}

#formLogin .mini-actions a.btn {
  width: 100%;
  text-align: center;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  background: #fff !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06) !important;
  transition: 0.16s ease;
}

#formLogin .mini-actions a.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.10);
  border-color: rgba(221, 51, 51, 0.25) !important;
}

#formLogin .mini-actions a.btn .fa {
  color: #dd3333 !important;
}

#formLogin .mini-actions a[href="#forgottenModal"] {
  grid-column: 1 / -1;
}

#formLogin .alert.alert-warning {
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
  padding: 14px 16px !important;
  color: #334155 !important;
}

#formLogin hr {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

@media (max-width: 768px) {
  .panel.panel-default > .panel-body {
    padding: 16px !important;
  }
  #formLogin .btn.btn-primary.btn-block {
    padding: 12px 14px !important;
  }
}

/* =========================
   ADMIN DASH — menu grid (final)
   ========================= */
.menuContainer {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(140px, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  padding: 8px !important;
  margin: 0 !important;
}

@media (max-width: 1400px) {
  .menuContainer {
    grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
  }
}

@media (max-width: 992px) {
  .menuContainer {
    grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .menuContainer {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }
}

@media (max-width: 420px) {
  .menuContainer {
    grid-template-columns: 1fr !important;
  }
}

.menuItem {
  width: auto !important;
  float: none !important;
  clear: none !important;

  background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10) !important;

  min-height: 110px !important;
  padding: 18px 14px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;

  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease !important;
}

.menuItem::before,
.menuItem::after {
  content: none !important;
}

.menuItem > .fa {
  color: #dd3333 !important;
  font-size: 24px !important;
  margin: 0 !important;
}

.menuItem a {
  color: var(--text) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  text-align: center !important;
  line-height: 1.1 !important;
}

@media (hover: hover) {
  .menuItem:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14) !important;
    border-color: rgba(221, 51, 51, 0.22) !important;
  }
}
body::after{
  display:none !important;
}
/* ==========================================================

   LOGIN PREMIUM — NEGUNDO (STABLE & CLEAN)

   ========================================================== */

:root{

  --negundo:#dd3333;

  --negundo2:#b72828;

  --bg:#f4f6fa;

  --card:#ffffff;

  --text:#0f172a;

  --muted:#667085;

  --line:rgba(15,23,42,.10);

  --shadow:0 20px 60px rgba(15,23,42,.12);

}

/* Background propre, léger */

body{

  background: var(--bg) !important;

}

/* Carte principale */

.panel.panel-default{

  max-width: 460px;

  margin: 40px auto !important;

  border-radius: 24px !important;

  border: 1px solid rgba(15,23,42,.08) !important;

  box-shadow: var(--shadow) !important;

  overflow: hidden;

  background: var(--card) !important;

}

/* Header */

.panel.panel-default > .panel-heading{

  background:#ffffff !important;

  padding:18px 22px !important;

  font-weight:900 !important;

  font-size:20px !important;

  border-bottom:1px solid rgba(15,23,42,.06) !important;

}

.panel.panel-default > .panel-heading .fa{

  color: var(--negundo) !important;

}

/* Body */

.panel.panel-default > .panel-body{

  padding:24px !important;

}

/* Bloc club */

.panel.panel-default .club-header{

  display:flex;

  align-items:center;

  gap:14px;

  padding:14px;

  border-radius:18px;

  background:#f8fafc;

  border:1px solid rgba(15,23,42,.06);

  margin-bottom:20px;

}

.club-logo{

  width:60px;

  height:60px;

  border-radius:50%;

  box-shadow:0 10px 25px rgba(15,23,42,.15);

}

/* Labels */

#formLogin label{

  font-weight:800 !important;

  font-size:12px !important;

  text-transform:uppercase !important;

  letter-spacing:.6px;

  color:var(--muted) !important;

}

/* Inputs */

#formLogin .form-control{

  border-radius:16px !important;

  border:1px solid rgba(15,23,42,.12) !important;

  padding:14px 16px !important;

  font-weight:700 !important;

  box-shadow:0 8px 20px rgba(15,23,42,.05) !important;

}

#formLogin .form-control:focus{

  border-color:var(--negundo) !important;

  box-shadow:0 0 0 3px rgba(221,51,51,.15) !important;

}

/* Input group addons */

#formLogin .input-group-addon{

  border-radius:16px 0 0 16px !important;

  border:1px solid rgba(15,23,42,.12) !important;

  background:#ffffff !important;

  color:#64748b !important;

}

#togglePwd{

  border-radius:0 16px 16px 0 !important;

  cursor:pointer;

}

/* Bouton principal */

#formLogin .btn.btn-primary.btn-block{

  margin-top:10px;

  background:linear-gradient(135deg,var(--negundo),var(--negundo2)) !important;

  border:none !important;

  border-radius:20px !important;

  padding:16px !important;

  font-weight:900 !important;

  font-size:16px !important;

  box-shadow:0 20px 50px rgba(221,51,51,.30) !important;

}

#formLogin .btn.btn-primary.btn-block:hover{

  transform:translateY(-2px);

}

/* Actions secondaires */

#formLogin .mini-actions{

  display:flex !important;

  flex-direction:column;

  gap:12px;

  margin-top:18px;

}

#formLogin .mini-actions .btn{

  border-radius:16px !important;

  padding:12px !important;

  font-weight:800 !important;

  background:#ffffff !important;

  border:1px solid rgba(15,23,42,.10) !important;

  box-shadow:0 10px 25px rgba(15,23,42,.05);

}

#formLogin .mini-actions .btn .fa{

  color:var(--negundo) !important;

}

/* Message info */

#formLogin .alert{

  border-radius:18px !important;

  background:#ffffff !important;

  border:1px solid rgba(15,23,42,.08) !important;

  box-shadow:0 12px 28px rgba(15,23,42,.05);

}

/* Mobile ultra clean */

@media (max-width:768px){

  .panel.panel-default{

    margin:20px 12px !important;

  }

}
/* ==========================================================

   LOGIN — Texte Bienvenue personnalisé

   ========================================================== */

/* On cache le texte original */

.panel.panel-default .club-header legend{

  visibility: hidden;

  position: relative;

}

/* On injecte le nouveau texte avec la même écriture */

.panel.panel-default .club-header legend::after{

  content: "Bienvenue au club Negundo Sports";

  visibility: visible;

  position: absolute;

  left: 0;

  top: 0;

  font-weight: 800;

  color: inherit;

}