@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Raleway:wght@300;400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');

/* ─── CSS Variables ─── */
:root {
  --bg-deep:       #070a0f;
  --bg-dark:       #0d1117;
  --bg-card:       #111820;
  --bg-card2:      #161e28;
  --border:        #1e2d3d;
  --border-bright: #2a3f57;
  --gold:          #c9a84c;
  --gold-light:    #e8c96a;
  --gold-dim:      #7a6530;
  --red:           #b52a2a;
  --red-bright:    #e03535;
  --text-primary:  #f0f2f8;
  --text-secondary:#c4d4e4;
  --text-muted:    #93acc1;
  --green:         #2ecc71;
  --steel:         #4a90c9;
  --steel-light:   #6bb3ea;
  --steel-dim:     #2c5a80;
  --purple:        #9b6fd1;
  --purple-dim:    rgba(155,111,209,.3);
  --font-display:  'Cinzel', serif;
  --font-body:     'Raleway', sans-serif;
  --font-num:      'Rajdhani', sans-serif;
  --shadow:        0 4px 30px rgba(0,0,0,0.6);
  --glow-gold:     0 0 20px rgba(201,168,76,0.25);
  --transition:    all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--gold); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--gold-light); }

img { max-width: 100%; display: block; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }

/* ─── Noise texture overlay ─── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: 0.4;
}

/* ─── Navigation ─── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(7,10,15,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo img { height: 56px; width: auto; }
.nav-logo svg { width: 56px; height: 56px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0.5rem 0.85rem;
  border-radius: 4px;
  transition: var(--transition);
}
.nav-links a:hover, .nav-links a.active {
  color: var(--gold);
  background: rgba(201,168,76,0.08);
}
.nav-cta {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim)) !important;
  color: var(--bg-deep) !important;
  font-weight: 700 !important;
  padding: 0.5rem 1.2rem !important;

  /* --- Propriétés d'alignement et de centrage --- */
  display: inline-flex !important;
  align-items: center !important;     /* Centre verticalement l'émoji et le texte */
  justify-content: center !important; /* Centre horizontalement le tout */
  gap: 0.4rem;                        /* Crée un espace propre entre l'émoji et le texte */
  line-height: 1 !important;          /* Anrule les décalages de hauteur de ligne */
}
.nav-cta:hover { filter: brightness(1.15); background: var(--gold-light) !important; }

.nav-admin {
  background: linear-gradient(135deg, var(--steel), var(--steel-dim)) !important;
  color: #fff !important;
}
.nav-admin:hover { filter: brightness(1.15); background: var(--steel-light) !important; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold);
  transition: var(--transition);
}

/* Animation croix quand le menu est ouvert */
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-hamburger {
    display: flex;
  }

  /* Le logo "latéral" peut être très large une fois mis à l'échelle par height :
     on le plafonne pour qu'il ne pousse jamais le hamburger hors de l'écran. */
  .nav-logo {
    min-width: 0;
  }
  .nav-logo img {
    height: 40px;
    max-width: 160px;
    width: auto;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem 1rem;
    gap: 0.25rem;
    border-top: 1px solid var(--border);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
  }

  .nav-cta {
    margin-top: 0.25rem;
    text-align: center;
  }
}

/* ─── Page wrapper ─── */
.page-wrapper { padding-top: 72px; }
#formulaire-adhesion { scroll-margin-top: 90px; }

/* ─── Hero ─── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-deep);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,168,76,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(181,42,42,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 20%, rgba(181,42,42,0.06) 0%, transparent 60%);
}
.hero-cards {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-card-float {
  position: absolute;
  font-size: 6rem;
  opacity: 0.04;
  animation: floatCard 20s ease-in-out infinite;
  user-select: none;
}
.hero-card-float:nth-child(1) { top: 15%; left: 8%; animation-delay: 0s; font-size: 5rem; }
.hero-card-float:nth-child(2) { top: 65%; left: 5%; animation-delay: 3s; font-size: 7rem; }
.hero-card-float:nth-child(3) { top: 20%; right: 8%; animation-delay: 6s; font-size: 8rem; }
.hero-card-float:nth-child(4) { top: 70%; right: 10%; animation-delay: 9s; font-size: 5rem; }
.hero-card-float:nth-child(5) { top: 45%; left: 50%; animation-delay: 12s; font-size: 9rem; }

@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  33% { transform: translateY(-20px) rotate(3deg); }
  66% { transform: translateY(10px) rotate(-8deg); }
}

.hero-divider {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--bg-dark));
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 2rem;
  max-width: 900px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 2px;
  margin-bottom: 1.5rem;
}
.hero-badge::before { content: '♠'; }
.hero-badge::after  { content: '♠'; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 0.3em;
}
.hero-title span {
  display: block;
  background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dim));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.hero-description {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto 2.5rem;
  line-height: 1.8;
  font-style: italic;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--bg-deep);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(201,168,76,0.35);
  color: var(--bg-deep);
  filter: brightness(1.1);
}
.btn-secondary {
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.4);
}
.btn-secondary:hover {
  background: rgba(201,168,76,0.1);
  border-color: var(--gold);
  transform: translateY(-2px);
  color: var(--gold-light);
}
.btn-red {
  background: linear-gradient(135deg, var(--red-bright), var(--red));
  color: white;
}
.btn-red:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(181,42,42,0.4);
  color: white;
  filter: brightness(1.1);
}

/* Style de base pour tous les symboles */

/* Couleurs spécifiques par type */
.icon-main { color:var(--gold); display:flex;align-items:center;justify-content:center;line-height:1; } /* Or pour le Main */
.icon-side {color:var(--gold); display:flex;align-items:center;justify-content:center;line-height:1; } /* Turquoise pour le Side */
.icon-sng  { color: #A06AB4; } /* Violet pour le Sit & Go */



.poker-icon {
    display: inline-block;
    font-size: 1.5em; /* Taille globale augmentée */
    vertical-align: middle;
    margin-right: 12px;
    line-height: 1;
}

/* Éclair (Petite Finale) */
.icon-pf {
    color:var(--gold); /* Jaune vif */
    text-shadow: 0 0 5px rgba(255, 211, 0, 0.6);
    font-size: 1.3em; /* Un peu plus petit car l'éclair est haut */
}

/* Trophée (Grande Finale) */
.icon-gf {
    color:var(--gold); /* Or orangé */
    filter: drop-shadow(0 0 3px rgba(255, 172, 51, 0.5));
    font-size: 1.6em; /* Le trophée doit imposer ! */
}

/* Optionnel : Animation de victoire pour le trophée */
.icon-gf:hover {
    transform: rotate(-10deg) scale(1.2);
    transition: transform 0.2s ease-in-out;
}

/* Optionnel : Un petit effet de lueur pour les Finales */
.icon-gf, .icon-pf {
    font-size: 1em;          /* Encore un peu plus grand pour le prestige */
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* Base des icônes admin */
.adm-icon {
    display: inline-block;
    width: 30px;         /* Largeur fixe pour aligner le texte du menu */
    font-size: 1.2rem;
    text-align: center;
    margin-right: 10px;
    vertical-align: middle;
}

/* Couleurs thématiques par section */
.icon-pique { color:var(--gold); font-size: 1.9em; } /* Noir Poker classique */
.icon-dash  { color: #3498db; } /* Bleu info */
.icon-test  { color: #9b59b6; } /* Violet "labo" */
.icon-date  { color: #e67e22; } /* Orange calendrier */
.icon-users { color: #1abc9c; } /* Turquoise membres */
.icon-news  { color: #34495e; } /* Gris journal */
.icon-mail  { color: #e74c3c; } /* Rouge alerte (pour les messages) */
.icon-star  { color: #f1c40f; } /* Jaune étoile */
.icon-food  { color: #d35400; } /* Marron/Orange appétissant */
.icon-gear  { color: #95a5a6; } /* Gris technique */


.restau-icon {
    display: inline-block;
    font-size: 1.5rem;
    margin-right: 10px;
    vertical-align: middle;
}

/* Si tu veux que les icônes utilisent la couleur du tableau $cats */
.icon-sale, .icon-drink, .icon-sweet {
    color: inherit; /* Utilise la couleur passée dans ton HTML si tu l'injectes en style */
}

/* Effet au survol du lien de menu */
.nav-link:hover .adm-icon {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}
/* Style général des icônes d'onglets */
.tab-icon {
    display: inline-block;
    font-size: 1.4em;
    margin-right: 8px;
    vertical-align: middle;
    transition: all 0.3s ease;
}

/* Couleurs spécifiques */
.icon-sd   { color: #e74c3c; } /* Rouge pour les cartes */
.icon-live { 
    color: #f1c40f; 
    text-shadow: 0 0 5px rgba(241, 196, 15, 0.5);
}
.icon-res  { color: #ffd700; } /* Or pour les trophées */
.icon-gift { color: #ff6b6b; } /* Rose/Rouge cadeau */
.icon-str  { color: #95a5a6; } /* Gris pour la mécanique/structure */

/* Animation sur l'onglet actif (si tu as une classe .active) */
.nav-tab.active .tab-icon {
    transform: scale(1.2);
    filter: brightness(1.2);
}

/* Style de base pour les icônes de sons */
.snd-icon {
    display: inline-block;
    font-size: 1.3em;
    width: 35px;
    text-align: center;
    margin-right: 12px;
    vertical-align: middle;
}

/* Couleurs par type d'événement */
.icon-start { color: #2ecc71; } /* Vert go */
.icon-lvl   { color: #f39c12; } /* Orange progression */
.icon-out   { color: #c0392b; } /* Rouge sang / élimination */
.icon-fix   { color: #7f8c8d; } /* Gris outil */
.icon-break { color: #1abc9c; } /* Turquoise détente */
.icon-alert { color: #e74c3c; } /* Rouge alerte */
.icon-war   { color: #8e44ad; } /* Violet combat */
.icon-win   { color: #f1c40f; } /* Or victoire */

.icon-live-dot {
    color: #ff0000;
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}

.icon-reg   { color: #3498db; } /* Bleu */
.icon-info  { color: #9b59b6; } /* Violet */
.icon-str   { color: #95a5a6; } /* Gris acier */
.icon-money { color: #f1c40f; } /* Or */

/* Animation de vibration au survol de la ligne */
tr:hover .snd-icon, .son-item:hover .snd-icon {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(-10deg); }
    75% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}


/* ─── Section layout ─── */
.section {
  padding: 5rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
}
.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-label {
  font-family: var(--font-body);
  font-size: clamp(1rem, 3vw, 1.8rem); /* 🔥 plus impactant */
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
  display: block;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.8rem); /* 🔥 plus impactant */
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
    letter-spacing: -0.02em; /* petit effet premium */
}
.section-title .highlight {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 1.25rem auto 0;
}

/* ─── Background sections ─── */
.section-dark { background: var(--bg-dark); }
.section-alt  { background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-deep) 100%); }

/* ─── Stats bar ─── */
.stats-bar {
  background: var(--bg-dark);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1rem 2rem;
}
.stats-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
}
.stat-item {
  background: var(--bg-dark);
  padding: 0.75rem 1.25rem;
  text-align: center;
}
.stat-number {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.2rem;
}
.stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── Cards ─── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: var(--transition);
}
.card:hover {
  border-color: var(--border-bright);
  box-shadow: var(--glow-gold);
  transform: translateY(-3px);
}
.card-header {
  background: linear-gradient(135deg, var(--bg-card2), var(--bg-card));
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.card-icon {
  width: 36px;
  height: 36px;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
}
.card-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}
.card-body { padding: 1.5rem; }

/* ─── Grid helpers ─── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* ─── Tournoi card ─── */
.tournoi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: var(--transition);
}
.tournoi-card:hover {
  border-color: var(--gold-dim);
  box-shadow: var(--glow-gold);
}
.tournoi-card-top {
  background: linear-gradient(135deg, #1a2535, #0d1420);
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.tournoi-etape {
  font-family: var(--font-num);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.tournoi-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}
.tournoi-date {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.3rem;
}
.tournoi-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
}
.badge-upcoming { background: rgba(46,204,113,0.15); color: var(--green); border: 1px solid rgba(46,204,113,0.3); }
.badge-past     { background: rgba(74,90,106,0.3); color: var(--text-muted); border: 1px solid var(--border); }
.badge-live     { background: rgba(224,53,53,0.15); color: var(--red-bright); border: 1px solid rgba(224,53,53,0.3); animation: pulse 2s infinite; }


.tournoi-info { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.tournoi-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}
.tournoi-row-label { color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }
.tournoi-row-value { color: var(--text-primary); font-weight: 600; font-family: var(--font-num); }
.tournoi-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.75rem;
}

/* ─── Encadrés "Prochains événements" (accueil) ─── */
.evenements-encadres {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 800px) {
  .evenements-encadres { grid-template-columns: 1fr 1fr; align-items: start; }
}
.encadre-event {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.encadre-event-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #1a2535, #0d1420);
  border-bottom: 1px solid var(--border);
}
.encadre-event-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 5px; flex-shrink: 0; }
.encadre-event-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}
.encadre-event-body { padding: 0 1.5rem 1.5rem; }
.encadre-event-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.75rem 1rem;
}
.encadre-event-mini-name { font-weight: 600; font-size: 0.85rem; }
.encadre-event-mini-date { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }

/* ─── Blinds table ─── */
.blinds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-num);
  font-size: 0.85rem;
}
.blinds-table th {
  background: var(--bg-card2);
  padding: 0.6rem 1rem;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.blinds-table td {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid rgba(30,45,61,0.5);
  color: var(--text-secondary);
}
.blinds-table tr:hover td { background: rgba(201,168,76,0.03); }
.blinds-table .current-level td { background: rgba(201,168,76,0.06); color: var(--gold); }

/* ─── Classement table ─── */
.rank-table {
  width: 100%;
  border-collapse: collapse;
}
.rank-table th {
  background: var(--bg-card2);
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.rank-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(30,45,61,0.4);
  font-family: var(--font-num);
  font-size: 0.9rem;
  color: var(--text-secondary);
  vertical-align: middle;
}
.rank-table tr:hover td { background: rgba(201,168,76,0.03); }
.rank-pos {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  width: 50px;
}
.rank-pos.gold  { color: #ffd700; }
.rank-pos.silver{ color: #c0c0c0; }
.rank-pos.bronze{ color: #cd7f32; }
.rank-name { font-family: var(--font-body); font-weight: 600; color: var(--text-primary); }
.rank-points { font-weight: 700; color: var(--gold); font-size: 1rem; }

/* ─── Lots / Prizes ─── */
.prizes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.prize-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.5rem;
  text-align: center;
  transition: var(--transition);
}
.prize-item.first {
  border-color: rgba(255,215,0,0.3);
  background: linear-gradient(135deg, rgba(255,215,0,0.05), var(--bg-card));
}
.prize-item.second { border-color: rgba(192,192,192,0.2); }
.prize-item.third  { border-color: rgba(205,127,50,0.2); }
.prize-pos {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.prize-item.first  .prize-pos { color: #ffd700; }
.prize-item.second .prize-pos { color: #c0c0c0; }
.prize-item.third  .prize-pos { color: #cd7f32; }
.prize-amount {
  font-family: var(--font-num);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}
.prize-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }

.notice-info-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(90deg, rgba(201,168,76,0.1) 0%, rgba(201,168,76,0.02) 100%);
    border-left: 3px solid var(--gold);
    padding: 0.85rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}

.notice-icon {
    font-size: 1.2rem;
    color: var(--gold);
    filter: drop-shadow(0 0 5px rgba(201,168,76,0.4));
}

.notice-content {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.notice-content a {
    color: var(--gold);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed var(--gold);
    transition: all 0.2s;
}

.notice-content a:hover {
    color: #fff;
    border-bottom-style: solid;
}


/* ─── Membership ─── */
.membership-box {
  background: linear-gradient(135deg, var(--bg-card2), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2.5rem;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.membership-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.membership-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}
.membership-desc {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.8;
}
.membership-price {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.25rem;
}
.membership-period { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 2rem; letter-spacing: 0.1em; }
.membership-perks {
  list-style: none;
  text-align: left;
  margin: 0 auto 2rem;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.membership-perks li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.membership-perks li::before {
  content: '♠';
  color: var(--gold);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* ─── Amounts buttons ─── */
.amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.amount-btn {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-num);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.75rem;
  border-radius: 3px;
  cursor: pointer;
  transition: var(--transition);
}
.amount-btn:hover, .amount-btn.selected {
  background: rgba(201,168,76,0.1);
  border-color: var(--gold);
  color: var(--gold);
}

/* ─── Form ─── */
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  border-radius: 3px;
  transition: var(--transition);
  outline: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--gold-dim);
  background: rgba(201,168,76,0.045);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); opacity: 0.7; }

/* Icône calendrier des champs date/datetime : trop sombre par défaut sur fond noir */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75) brightness(1.3);
  cursor: pointer;
  opacity: 0.85;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
/* Firefox : l'icône suit la couleur du texte, on force un gris clair */
input[type="date"], input[type="datetime-local"], input[type="time"] {
  color-scheme: light;
}

/* Icône calendrier des champs date/datetime : invisible sur fond sombre par défaut (Chrome/Edge) */
.form-input[type="date"],
.form-input[type="datetime-local"],
.form-input[type="time"],
.form-input[type="month"],
.form-input[type="week"] {
  color-scheme: light;
}
.form-input[type="date"]::-webkit-calendar-picker-indicator,
.form-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.form-input[type="time"]::-webkit-calendar-picker-indicator,
.form-input[type="month"]::-webkit-calendar-picker-indicator,
.form-input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75) brightness(1.4);
  cursor: pointer;
  opacity: 0.85;
}
.form-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.form-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.form-input[type="time"]::-webkit-calendar-picker-indicator:hover,
.form-input[type="month"]::-webkit-calendar-picker-indicator:hover,
.form-input[type="week"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Icône calendrier des champs date/datetime : par défaut trop sombre sur fond sombre */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(70%) brightness(1.3);
  cursor: pointer;
  opacity: 0.85;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
/* Firefox : la coloration du champ suit color-scheme */
input[type="date"], input[type="datetime-local"], input[type="time"] {
  color-scheme: light;
}
.form-textarea { resize: vertical; min-height: 130px; }
.form-select option { background: var(--bg-card); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ─── Accordion ─── */
.accordion { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-item:last-child { border-bottom: none; }
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.5rem;
  cursor: pointer;
  background: var(--bg-card);
  transition: var(--transition);
  user-select: none;
}
.accordion-header:hover { background: var(--bg-card2); }
.accordion-title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.accordion-icon {
  color: var(--gold);
  font-size: 1.2rem;
  transition: transform 0.3s;
  flex-shrink: 0;
}
.accordion-item.open .accordion-icon { transform: rotate(45deg); }
.accordion-body {
  display: none;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(201,168,76,0.02), transparent);
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.8;
  border-top: 1px solid var(--border);
}
.accordion-item.open .accordion-body { display: block; }

/* ─── Page hero (sub-pages) ─── */
.page-hero {
  padding: 5rem 2rem 3rem;
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-deep) 100%);
  border-bottom: 1px solid var(--border);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(201,168,76,0.06), transparent);
}
.page-hero-content { position: relative; z-index: 1; }
.page-hero-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.page-hero-label::before, .page-hero-label::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: var(--gold-dim);
}
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--text-primary);
}
.page-hero-sub {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-top: 0.75rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Tab system ─── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.tab-btn {
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── Communication : titres de section (sépare visuellement e-mail groupé / messages reçus) ─── */
.comm-section-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin: 0 0 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.comm-section-title:not(:first-child) { margin-top: 2rem; }

/* ─── Contact ─── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 2rem;
  align-items: start;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.contact-info-item:last-child { border-bottom: none; }
.contact-icon {
  width: 40px;
  height: 40px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
}
.contact-info-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}
.contact-info-value {
  font-size: 0.95rem;
  color: var(--text-primary);
}

/* ─── Footer ─── */
.footer {
  background: var(--bg-dark);
  border-top: 1px solid var(--border);
  padding: 3rem 2rem 1.5rem;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer-tagline {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.footer-social { display: flex; gap: 0.75rem; }
.social-btn {
  width: 36px;
  height: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: var(--transition);
  font-size: 0.9rem;
}
.social-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.08); }

.footer-col-title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links a {
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: var(--transition);
}
.footer-links a:hover { color: var(--gold); padding-left: 4px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-warning {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* ─── Notices ─── */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 3px;
  font-size: 0.88rem;
  margin-bottom: 1rem;
}
.notice-info  { background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.2); color: var(--gold); }
.notice-warn  { background: rgba(181,42,42,0.08); border: 1px solid rgba(181,42,42,0.2); color: #e07070; }
.notice-success { background: rgba(46,204,113,0.08); border: 1px solid rgba(46,204,113,0.2); color: var(--green); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablette (≤ 1024px) · Mobile (≤ 768px) · Petit mobile (≤ 480px)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tablette ─── */
@media (max-width: 1024px) {
  /* Grilles */
  .grid-3       { grid-template-columns: repeat(2, 1fr); }
  .grid-4       { grid-template-columns: repeat(2, 1fr); }
  .prizes-grid  { grid-template-columns: repeat(2, 1fr); }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: 1fr 1fr; }
  .amount-grid  { grid-template-columns: repeat(3, 1fr); }

  /* Section */
  .section { padding: 3.5rem 1.5rem; }

  /* Page hero */
  .page-hero { padding: 4rem 1.5rem 2.5rem; }

  /* Admin sidebar plus étroite */
  .admin-sidebar { width: 190px; }
  .admin-content { padding: 1.5rem; }
}

/* ─── Mobile (≤ 768px) ─── */
@media (max-width: 768px) {
  /* ── Navigation ── */
  .nav { padding: 0 1rem; height: 60px; }
  .page-wrapper { padding-top: 60px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 60px; left: 0; right: 0;
    background: rgba(7,10,15,0.98);
    border-bottom: 1px solid var(--border);
    padding: 1rem;
    gap: 0.25rem;
    z-index: 800;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .nav-links.open li { width: 100%; }
  .nav-links.open a {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    border-radius: 3px;
  }
  .nav-hamburger { display: flex; }

  /* ── Grilles → 1 colonne ── */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .prizes-grid  { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: 1fr; }
  .form-row     { grid-template-columns: 1fr; }
  .amount-grid  { grid-template-columns: repeat(2, 1fr); }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); }

  /* ── Hero ── */
  .hero-content { padding: 1.5rem; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 300px; justify-content: center; }
  .hero-card-float { display: none; } /* Masque les cartes animées sur mobile */

  /* ── Section ── */
  .section { padding: 2.5rem 1rem; }
  .section-header { margin-bottom: 2rem; }
  .page-hero { padding: 3rem 1rem 2rem; }
  .page-hero-sub { font-size: 0.88rem; }

  /* ── Cards ── */
  .card-body { padding: 1rem; }
  .card-header { padding: 1rem; }

  /* ── Tournoi cards ── */
  .tournoi-footer { flex-direction: column; gap: 0.5rem; }
  .tournoi-footer .btn { width: 100%; justify-content: center; }

  /* ── Tables ── */
  .rank-table, .blinds-table { font-size: 0.8rem; }
  .rank-table th, .rank-table td,
  .blinds-table th, .blinds-table td { padding: 0.5rem 0.6rem; }

  /* ── Notices ── */
  .notice { font-size: 0.82rem; padding: 0.75rem 1rem; }

  /* ── Tabs ── */
  .tabs { flex-wrap: wrap; }
  .tab-btn { padding: 0.65rem 0.85rem; font-size: 0.7rem; }

  /* ── Communication ── */
  .comm-section-title { font-size: 0.85rem; }
  .msg-toolbar { flex-direction: column; align-items: stretch; }
  .msg-tabs { justify-content: center; }
  .msg-card-head { flex-direction: column; align-items: flex-start; }
  .msg-card-head-right { width: 100%; justify-content: space-between; }
  .msg-reponse-actions { flex-direction: column; }
  .msg-reponse-actions .btn,
  .msg-reponse-actions .btn-xs { width: 100%; text-align: center; }
  #cartes-cible { grid-template-columns: 1fr 1fr !important; }

  /* ── Modal ── */
  .modal { margin: 0.5rem; max-height: 95vh; }
  .modal-body { padding: 1rem; }

  /* ── Footer ── */
  .footer { padding: 2rem 1rem 1rem; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* ── Contact ── */
  .contact-grid { grid-template-columns: 1fr; }

  /* ── Membership ── */
  .membership-box { padding: 1.5rem; }

  /* ── Stats bar ── */
  .stats-bar { padding: 0.85rem 1rem; }
  .stat-number { font-size: 1.35rem; }
  .stat-item { padding: 0.6rem 1rem; }

  /* Note : les règles .admin-sidebar / .admin-hamburger / .admin-sidebar-overlay
     pour le mobile ont été retirées d'ici — elles faisaient doublon avec le bloc
     "🔐 ADMIN AUTH" plus bas (~ligne 2189+) et entraient en conflit avec lui
     (inset:0 sur .admin-sidebar.open forçait top:0 et cachait la croix de
     fermeture sous le menu). Voir le bloc @media(max-width:768px) après
     "ADMIN AUTH" pour la version actuelle. */

  /* Tables admin scrollables */
  .admin-table { font-size: 0.78rem; }
  .admin-table th { padding: 0.45rem 0.6rem; font-size: 0.65rem; }
  .admin-table td { padding: 0.5rem 0.6rem; }

  /* Formulaires admin */
  .admin-card-body { padding: 1rem; }
  .admin-card-header { padding: 0.75rem 1rem; }
}

/* ─── Petit mobile (≤ 480px) ─── */
@media (max-width: 480px) {
  /* Grilles */
  .stats-grid  { grid-template-columns: repeat(2, 1fr); }
  .grid-4      { grid-template-columns: 1fr; }
  .amount-grid { grid-template-columns: repeat(2, 1fr); }
  .prizes-grid { grid-template-columns: 1fr; }

  /* Hero */
  .hero-title { font-size: clamp(2.2rem, 10vw, 3.5rem); }
  .hero-badge { font-size: 0.62rem; letter-spacing: 0.15em; }

  /* Section */
  .section { padding: 2rem 0.85rem; }

  /* Page hero */
  .page-hero { padding: 2.5rem 0.85rem 1.5rem; }
  .page-hero-title { font-size: clamp(1.6rem, 8vw, 2.5rem); }

  /* Buttons */
  .btn { font-size: 0.75rem; padding: 0.75rem 1.25rem; }

  /* Tabs */
  .tab-btn { padding: 0.65rem 0.75rem; font-size: 0.68rem; }

  /* Communication */
  #cartes-cible { grid-template-columns: 1fr !important; }

  /* Stat bar */
  .stat-number { font-size: 1.2rem; }
  .stat-label  { font-size: 0.6rem; letter-spacing: 0.08em; }
  .stat-item   { padding: 0.6rem 0.5rem; }

  /* Tournoi card */
  .tournoi-card-top { padding: 1rem; }
  .tournoi-info     { padding: 1rem; }

  /* Modal plein écran sur très petit mobile */
  .modal { margin: 0; border-radius: 0; max-height: 100vh; height: 100%; }

  /* Footer */
  .footer-grid { gap: 1.5rem; }
  .footer-bottom { font-size: 0.7rem; }

  /* Admin */
  .admin-content { padding: 0.75rem; }
  .admin-table th { display: none; }  /* Masque les en-têtes sur très petit écran */
  .admin-table td {
    display: block;
    padding: 0.35rem 0.6rem;
    border-bottom: none;
  }
  .admin-table td::before {
    content: attr(data-label);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.1rem;
  }
  .admin-table tr {
    display: block;
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0;
  }

  /* ── Étapes (admin) : carte compacte plutôt que l'empilement générique ── */
  .etapes-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .6rem;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .7rem .85rem;
    margin-bottom: .6rem;
  }
  .etapes-table tbody td {
    display: block;
    padding: 0;
    border-bottom: none;
  }
  .etapes-table tbody td::before { content: none; }
  .etapes-table .etape-col-numero { order: 1; }
  .etapes-table .etape-col-label { order: 2; flex: 1 1 110px; font-size: .9rem; }
  .etapes-table .etape-col-statut { order: 3; }
  .etapes-table .etape-col-dates.col-hide-mobile { display: block !important; order: 4; flex: 0 0 100%; font-size: .72rem; }
  .etapes-table .etape-actions { order: 5; flex: 0 0 100%; justify-content: flex-end; padding-top: .5rem; margin-top: .1rem; border-top: 1px solid var(--border); }
  .etapes-table tbody td[colspan] { flex: 1 1 100%; text-align: center; padding: 1rem 0 !important; }
}

/* ─── Touch / hover: désactive les effets hover sur mobile ─── */
@media (hover: none) {
  .card:hover       { transform: none; box-shadow: none; }
  .btn:hover        { transform: none; }
  .btn-primary:hover{ transform: none; }
  .btn-secondary:hover { transform: none; }
}

/* ─── Utilities ─── */
.text-gold    { color: var(--gold); }
.text-muted   { color: var(--text-muted); }
.text-center  { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.full-width { width: 100%; }
.separator { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* ─── Animations ─── */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Rotate Message (Mobile) ─── */
.rotate-msg {
  display: none;
  position: fixed;
  inset: 0;
  background: #070a0f;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.rotate-hint { font-size: 4rem; animation: rotateHint 2s ease-in-out infinite; }
.rotate-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 700; color: #c9a84c; letter-spacing: .15em; text-transform: uppercase; }
.rotate-sub { font-size: .85rem; color: rgba(232, 234, 240, .55); text-align: center; max-width: 260px; }
@keyframes rotateHint { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }

/* ─── Chrono Display ─── */
.chrono-clock { font-size: .6rem; color: var(--muted); margin-top: .15rem; }
.chrono-select {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  padding: .15rem .4rem;
  font-size: .65rem;
  margin-top: .2rem;
  width: 100%;
}
.chrono-btn-son {
  margin-top: .5rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: var(--muted);
  border-radius: 4px;
  padding: .25rem .6rem;
  cursor: pointer;
  font-size: .7rem;
}

/* ─── Progress Bar ─── */
.progress-bar { width: 100%; }

/* ─── Seat Draw ─── */
.seatdraw-container { width: 100%; height: 100%; overflow: hidden; padding: .6rem .75rem; display: flex; flex-direction: column; }
.seatdraw-scroll-outer { flex: 1; overflow: hidden; position: relative; }
.seatdraw-scroll-inner { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; position: absolute; width: 100%; top: 0; left: 0; }
.seatdraw-table-card { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; overflow: hidden; }
.seatdraw-table-header { background: rgba(201, 168, 76, .1); border-bottom: 1px solid rgba(201, 168, 76, .2); padding: .3rem .6rem; display: flex; justify-content: space-between; align-items: center; }
.seatdraw-table-title { font-family: 'Barlow Condensed', sans-serif; font-size: .88rem; font-weight: 900; letter-spacing: .12em; color: var(--gold); }
.seatdraw-table-count { font-size: .6rem; }
.seatdraw-table-body { padding: .25rem .4rem; }
.seatdraw-row { display: flex; align-items: center; gap: .35rem; padding: .18rem 0; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.seatdraw-row.absent { opacity: .35; }
.seatdraw-seat-num { font-size: .52rem; font-weight: 700; color: var(--muted); min-width: 18px; text-align: right; flex-shrink: 0; }
.seatdraw-presence-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.seatdraw-presence-dot.present { background: var(--green); }
.seatdraw-presence-dot.absent { background: rgba(255, 255, 255, .12); }
.seatdraw-player-name { font-size: .78rem; font-weight: 600; color: var(--text); }
.seatdraw-player-name.absent { font-weight: 400; color: var(--muted); }
.seatdraw-legend { text-align: center; margin-top: .4rem; font-size: .58rem; color: var(--muted); letter-spacing: .08em; flex-shrink: 0; }

/* ─── Chrono Normal ─── */
.chrono-center { display: contents; }
.chrono-center.hidden { display: none; }
.niveau-badge { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(.9rem, 2.5vw, 1.3rem); font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.blind-next-label { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.blind-next-values { display: flex; align-items: baseline; gap: .4rem; }
.blind-next-val { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 900; color: var(--text-primary); }
.pause-text { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 900; color: rgba(224, 53, 53, .9); letter-spacing: .12em; line-height: 1; animation: pulse 1.5s ease-in-out infinite; }
.break-label-text { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 700; color: rgba(74, 184, 216, .9); letter-spacing: .15em; margin-top: .5rem; display: none; }
.break-chrono { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(3rem, 10vw, 7rem); font-weight: 900; color: var(--orange); line-height: 1; margin-top: .3rem; display: none; }

/* ─── Classement Panel ─── */
.classement-panel-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: .35rem; margin-bottom: .4rem; }
.classement-panel-title { font-family: 'Barlow Condensed', sans-serif; font-size: .62rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.classement-panel-label { font-size: .58rem; color: var(--muted); }
.classement-scroll { max-height: 200px; overflow-y: auto; }
.classement-loading { color: var(--muted); font-size: .75rem; padding: .3rem 0; }

/* ─── Lots Panel ─── */
.lots-panel { flex-shrink: 0; }
.lots-header { font-family: 'Barlow Condensed', sans-serif; font-size: .62rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.lots-list { display: flex; flex-direction: column; gap: .25rem; }
.lot-item { display: flex; align-items: center; gap: .5rem; font-size: .75rem; }
.lot-badge { width: 22px; height: 22px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .65rem; flex-shrink: 0; }
.lot-badge.gold { background: rgba(201, 168, 76, .15); border: 1px solid rgba(201, 168, 76, .3); color: var(--gold); }
.lot-badge.silver { background: rgba(192, 192, 192, .1); border: 1px solid rgba(192, 192, 192, .25); color: #c0c0c0; }
.lot-badge.bronze { background: rgba(205, 127, 50, .1); border: 1px solid rgba(205, 127, 50, .25); color: #cd7f32; }
.lot-badge.default { background: var(--bg-card2); border: 1px solid var(--border); color: var(--text-muted); }
.lot-desc { color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Overlays ─── */
.overlay-vainqueur { display: none; position: fixed; inset: 0; z-index: 9000; background: radial-gradient(ellipse at center, #1a1200 0%, #08090c 70%); align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem; }
.vainqueur-feux { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vainqueur-content { text-align: center; position: relative; z-index: 1; }
.vainqueur-symbols { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1rem, 3vw, 1.8rem); font-weight: 700; letter-spacing: .4em; color: rgba(201, 168, 76, .7); text-transform: uppercase; margin-bottom: .75rem; }
.vainqueur-label { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(.9rem, 2.5vw, 1.4rem); font-weight: 900; letter-spacing: .3em; color: rgba(232, 234, 240, .65); text-transform: uppercase; margin-bottom: .5rem; }
.vainqueur-nom { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(3rem, 10vw, 8rem); font-weight: 900; color: var(--gold); text-shadow: 0 0 60px rgba(201, 168, 76, .4); animation: pulseVainqueur 2s ease-in-out infinite; }
.vainqueur-tournoi { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1rem, 3vw, 1.8rem); font-weight: 700; color: rgba(232, 234, 240, .75); }
@keyframes pulseVainqueur { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

.overlay-table-finale { display: none; position: fixed; inset: 0; z-index: 8000; background: rgba(0, 0, 0, .96); align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem; }
.table-finale-header { text-align: center; }
.table-finale-event { font-size: .85rem; letter-spacing: .35em; color: rgba(201, 168, 76, .7); text-transform: uppercase; margin-bottom: .5rem; }
.table-finale-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 900; color: #ffd700; text-shadow: 0 0 80px rgba(255, 215, 0, .5); letter-spacing: .12em; line-height: 1.1; }
.table-finale-sub { font-size: clamp(.8rem, 2vw, 1rem); color: rgba(255, 255, 255, .65); margin-top: .5rem; letter-spacing: .1em; }
.finale-joueurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; width: 100%; max-width: 640px; padding: 0 1.5rem; }
.table-finale-waiting { font-size: .65rem; color: rgba(232, 234, 240, .4); letter-spacing: .1em; }

.overlay-headsup { display: none; position: fixed; inset: 0; z-index: 7000; background: rgba(0, 0, 0, .92); align-items: center; justify-content: center; flex-direction: column; gap: 1rem; }
.headsup-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(3rem, 9vw, 7rem); font-weight: 900; color: var(--gold); letter-spacing: .12em; }
.headsup-sub { font-size: clamp(.9rem, 2.5vw, 1.3rem); color: rgba(255, 255, 255, .65); letter-spacing: .15em; }

/* ─── Flash Notification ─── */
.flash-row { display: flex; align-items: center; justify-content: space-between; padding: .4rem .65rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.flash-player-name { font-size: clamp(.85rem, 2vw, 1rem); color: #fff; font-weight: 600; flex: 1; text-align: left; }
.flash-chips { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.flash-chip-count { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1rem, 2.5vw, 1.3rem); font-weight: 900; color: var(--gold); letter-spacing: .06em; }
.flash-separator { font-size: .75rem; color: rgba(232, 234, 240, .7); }
.flash-points { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(.9rem, 2vw, 1.1rem); font-weight: 700; color: rgba(201, 168, 76, .7); }
.flash-content { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.3rem, 4vw, 2.2rem); font-weight: 900; color: #e03535; letter-spacing: .1em; }
.flash-sub { font-size: clamp(.75rem, 1.8vw, .88rem); color: rgba(232, 234, 240, .75); margin-bottom: .75rem; letter-spacing: .05em; }
.flash-table { width: 100%; max-width: 500px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; overflow: hidden; }
.flash-table-header { background: rgba(224, 53, 53, .12); padding: .3rem .65rem; font-size: .65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #e03535; }
.flash-table-footer { font-size: .58rem; color: rgba(232, 234, 240, .4); margin-top: .65rem; }
.flash-bar { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background: rgba(224, 53, 53, .7); transition: width 20s linear; }

/* ─── Joueurs List (Headsup) ─── */
.joueurs-row { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; background: rgba(201, 168, 76, .06); border: 1px solid rgba(201, 168, 76, .2); border-radius: 5px; }
.joueurs-seat { font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 900; color: var(--gold); min-width: 26px; text-align: center; }
.joueurs-nom { font-size: .95rem; font-weight: 700; color: #fff; }

/* ─── Admin specific ─── */
.btn-xs.btn-edit { background: rgba(201, 168, 76, .1); border: 1px solid rgba(201, 168, 76, .3); color: var(--gold); }
.btn-xs.btn-edit:hover { background: rgba(201, 168, 76, .2); }
.btn-xs.btn-view { background: rgba(74, 184, 216, .1); border: 1px solid rgba(74, 184, 216, .3); color: #4ab8d8; }
.btn-xs.btn-view:hover { background: rgba(74, 184, 216, .2); }
.btn-xs.btn-delete { background: rgba(224, 53, 53, .1); border: 1px solid rgba(224, 53, 53, .3); color: #e03535; }
.btn-xs.btn-delete:hover { background: rgba(224, 53, 53, .2); }

/* ─── Admin Sidebar ─── */
.admin-sidebar-header { padding: .5rem 1rem 1rem; border-bottom: 1px solid var(--border); margin-bottom: .5rem; }
.admin-sidebar-title { font-family: var(--font-display); font-size: .85rem; font-weight: 700; color: var(--gold); }
.admin-sidebar-item { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; font-size: .82rem; color: var(--text-secondary); transition: var(--transition); cursor: pointer; }
.admin-sidebar-item:hover { background: rgba(201, 168, 76, .05); color: var(--text-primary); }
.admin-sidebar-item.active { background: rgba(201, 168, 76, .1); color: var(--gold); border-left: 2px solid var(--gold); }
.admin-sidebar-badge { font-size: .68rem; display: flex; gap: .3rem; align-items: center; }
.admin-sidebar-sep { padding: .35rem 1rem .15rem; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); border-top: 1px solid var(--border); margin-top: .15rem; }

/* ─── TG Sidebar Item ─── */
.tg-sidebar-item { display: flex; justify-content: space-between; align-items: center; padding: .4rem 1.2rem .15rem; font-size: .82rem; color: var(--text-secondary); transition: var(--transition); cursor: pointer; }
.tg-sidebar-item:hover { background: rgba(201, 168, 76, .05); color: var(--text-primary); }
.tg-sidebar-item.active { background: rgba(201, 168, 76, .08); color: var(--gold); }

/* ─── Form extras ─── */
.form-checkbox { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; flex-shrink: 0; }
.form-radio { accent-color: var(--gold); }

/* ─── Paiement Card ─── */
.paiement-card { background: var(--bg-card2); border: 2px solid var(--border); border-radius: 4px; padding: .9rem 1rem; transition: var(--transition); cursor: pointer; }
.paiement-card.selected { background: rgba(201, 168, 76, .07); border-color: var(--gold); }
.paiement-card-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.paiement-card-icon { font-size: 1.1rem; }
.paiement-card-name { font-weight: 700; font-size: .88rem; color: var(--text-primary); }
.paiement-card-desc { font-size: .75rem; color: var(--text-muted); line-height: 1.4; }
.paiement-info { display: none; padding: 1rem 1.25rem; background: rgba(201, 168, 76, .07); border: 1px solid rgba(201, 168, 76, .2); border-radius: 3px; font-size: .84rem; color: var(--text-secondary); margin-bottom: 1.25rem; line-height: 1.6; }

/* ─── Special sections ─── */
.section-highlight { background: linear-gradient(135deg, rgba(201, 168, 76, .12), rgba(201, 168, 76, .04)); border: 2px solid var(--gold); border-radius: 10px; padding: 1.25rem 1.75rem; text-align: center; }
.section-highlight-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--gold); margin-bottom: .4rem; }
.section-highlight-price { font-family: var(--font-display); font-size: 2.5rem; font-weight: 900; color: var(--gold); }
.section-highlight-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.section-highlight-desc { font-size: .82rem; color: var(--text-muted); margin-top: .35rem; }

/* ─── Etape selector ─── */
.etape-selector { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.etape-btn { padding: .5rem 1rem; border-radius: 3px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.etape-btn.active { background: rgba(201, 168, 76, .15); border: 1px solid rgba(201, 168, 76, .4); color: var(--gold); }
.etape-btn:not(.active) { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); }
.etape-btn:hover:not(.active) { border-color: var(--gold-dim); color: var(--text-secondary); }

/* ─── Etape header ─── */
.etape-header { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 1.5rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; }
.etape-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.etape-date { color: var(--text-muted); font-size: .88rem; margin-top: .3rem; }
.etape-actions { display: flex; align-items: center; gap: .75rem; }
.etape-numero-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.7rem; padding: 0 .3rem; border-radius: 50%; background: rgba(201, 168, 76, .12); border: 1px solid rgba(201, 168, 76, .35); font-size: .85rem; }
.statut-badge { background: rgba(46, 204, 113, .1); border: 1px solid rgba(46, 204, 113, .3); color: var(--green); font-size: .72rem; font-weight: 700; letter-spacing: .1em; padding: .25rem .75rem; border-radius: 2px; white-space: nowrap; }
.statut-badge.upcoming { background: rgba(74, 184, 216, .1); border-color: rgba(74, 184, 216, .3); color: #4ab8d8; }
.statut-badge.live { background: rgba(224, 53, 53, .15); border-color: rgba(224, 53, 53, .35); color: #e03535; animation: pulse 2s infinite; }

/* ─── Etape content ─── */
.etape-content { position: relative; width: 100%; background: #08090c; border-radius: 6px; overflow: hidden; border: 1px solid rgba(201, 168, 76, .3); }
.etape-iframe { width: 100%; height: calc(100vh - 220px); min-height: 500px; border: none; display: block; }

/* ─── Tournoi info table ─── */
.tournoi-info-table { width: 100%; border-collapse: collapse; }
.tournoi-info-table tr { border-bottom: 1px solid var(--border); }
.tournoi-info-table td { padding: .55rem 0; font-size: .78rem; }
.tournoi-info-table .label { color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; width: 45%; }
.tournoi-info-table .value { font-family: var(--font-num); font-weight: 600; color: var(--text-primary); }
.tournoi-actions { margin-top: 1.25rem; display: flex; gap: .75rem; flex-wrap: wrap; }

/* ─── Live badge ─── */
.live-badge { background: rgba(224, 53, 53, .15); border: 1px solid rgba(224, 53, 53, .35); color: #e03535; font-size: .65rem; font-weight: 700; letter-spacing: .1em; }

/* ─── Menu categories ─── */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.menu-item-table { width: 100%; border-collapse: collapse; }
.menu-item-table tr { border-bottom: 1px solid var(--border); }
.menu-item-table td { padding: .6rem 1rem; font-size: .88rem; }
.menu-item-table .name { color: var(--text-primary); }
.menu-item-table .price { text-align: right; font-weight: 700; color: var(--gold); white-space: nowrap; font-size: .88rem; }

/* ─── Blind structure ─── */
.blinds-structure td { font-weight: 700; color: var(--gold); }
.blinds-structure .ante { color: var(--text-secondary); }
.blinds-structure .duration { color: var(--text-secondary); font-size: .75rem; }
.pause-row { background: rgba(0, 180, 255, .07); }
.pause-row td { text-align: center; font-size: .75rem; font-weight: 700; color: #4ab8d8; letter-spacing: .15em; text-transform: uppercase; padding: .45rem; }

/* ─── Grid helpers ─── */
.grid-2-sm { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-2-gap-sm { gap: 1.5rem; }

/* ─── Member benefits ─── */
.benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.benefit-category-label { font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin-bottom: .85rem; }
.benefit-category-label.gold { color: var(--gold); }
.benefit-category-label.blue { color: #00aaff; }
.benefit-list { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.benefit-item { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: var(--text-secondary); }
.benefit-icon { flex-shrink: 0; margin-top: .1rem; }
.benefit-icon.gold { color: var(--gold); }
.benefit-icon.blue { color: #00aaff; }
.benefit-text strong { color: var(--text-primary); }
.warning-box { margin-top: 1.5rem; padding: 1rem; background: rgba(181, 42, 42, .06); border: 1px solid rgba(181, 42, 42, .15); border-radius: 3px; font-size: .82rem; color: #e07070; line-height: 1.6; }

/* ─── Section headers ─── */
.section-header-admin { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.section-title-admin { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-primary); }

/* ─── Form sections ─── */
.form-section-title { font-family: var(--font-display); font-size: .95rem; color: var(--gold); margin-bottom: 1.1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); letter-spacing: .05em; }
.form-section-title + * { margin-top: 1.75rem; }

/* ─── Info rows ─── */
.info-row { flex-direction: column; align-items: flex-start; gap: .25rem; }
.info-label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; }
.info-value { color: var(--text-secondary); font-size: .88rem; }

/* ─── Etape card in index ─── */
.etape-date-range { font-size: .8rem; color: var(--text-muted); }

/* ─── Classement specific ─── */
.rank-cell { color: var(--text-muted); font-size: .82rem; }
.rank-cell.points { color: var(--text-muted); font-size: .78rem; }
.rank-cell.deducted { color: var(--red-bright); }

/* ─── No results ─── */
.no-results { padding: 2rem; text-align: center; color: var(--text-muted); }

/* ─── Flash card content ─── */
.flash-card-content { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.4rem, 4.5vw, 2.5rem); font-weight: 900; color: #e03535; letter-spacing: .1em; text-shadow: 0 0 30px rgba(224, 53, 53, .5); }
.flash-card-sub { font-size: clamp(.8rem, 2vw, 1rem); color: rgba(232, 234, 240, .8); margin: .5rem 0 .75rem; }
.flash-card-box { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; overflow: hidden; min-width: 240px; max-width: 360px; width: 100%; }
.flash-card-header { background: rgba(201, 168, 76, .1); padding: .3rem .6rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.flash-card-table { display: flex; justify-content: space-between; align-items: center; padding: .3rem .5rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.flash-card-table-num { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 900; letter-spacing: .1em; color: #fff; }
.flash-card-table-count { font-size: .8rem; color: rgba(232, 234, 240, .75); }

/* ─── Chip player (seatdraw) ─── */
.chip-player { display: inline-flex; align-items: center; gap: .5rem; background: var(--bg-card2); border: 1px solid var(--border); border-radius: 4px; padding: .4rem .65rem; font-size: .82rem; cursor: pointer; transition: var(--transition); }
.chip-player:hover { border-color: var(--gold-dim); }
.chip-player.present { background: rgba(46, 204, 113, .08); border-color: rgba(46, 204, 113, .3); }
.chip-player.absent { opacity: .5; }
.chip-player.excluded { background: rgba(224, 53, 53, .08); border-color: rgba(224, 53, 53, .3); opacity: .7; }
.chip-nom { font-weight: 600; color: var(--text-primary); }
.chip-exclu-icon { font-size: .65rem; }

/* ─── Table seat (seatdraw admin) ─── */
.table-seat { display: flex; align-items: center; gap: .65rem; padding: .45rem .9rem; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.table-seat.empty { opacity: .4; }
.table-seat-num { width: 22px; height: 22px; border: 1.5px dashed rgba(255, 255, 255, .2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; color: rgba(255, 255, 255, .4); flex-shrink: 0; }
.table-seat-num.filled { border: none; background: var(--gold); color: var(--bg-deep); font-weight: 700; filter: none; }
.table-seat-num.absent { filter: grayscale(80%); }
.table-seat-name { font-size: .85rem; font-weight: 600; color: #fff; }
.table-seat-name.absent { color: var(--text-muted); font-weight: 400; font-style: italic; }
.table-seat-absent-tag { font-size: .7rem; font-style: italic; font-weight: 400; }

/* ─── Seatdraw result ─── */
.tables-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.table-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.table-card-header { padding: .75rem 1.1rem; display: flex; justify-content: space-between; align-items: center; }
.table-card-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 900; letter-spacing: .05em; }
.table-card-count { background: rgba(255, 255, 255, .2); color: white; font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 10px; }
.table-card-empty { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); font-size: .7rem; padding: .2rem .55rem; border-radius: 10px; }
.table-card-body { background: #0d1117; border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px; }

/* ─── Legend ─── */
.legend { padding: .5rem 1rem .25rem; display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border); }
.legend-item { display: flex; align-items: center; gap: .4rem; font-size: .72rem; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; }
.legend-dot.inactive { background: rgba(255, 255, 255, .12); border: 1px solid var(--border); }
.legend-dot.present { background: rgba(46, 204, 113, .25); border: 1px solid rgba(46, 204, 113, .6); color: var(--green); }
.legend-dot.excluded { background: rgba(224, 53, 53, .15); border: 1px dashed rgba(224, 53, 53, .5); color: var(--red-bright); }

/* ─── Inline helpers ─── */
.text-green { color: var(--green); }
.text-red { color: var(--red-bright); }
.text-blue { color: #4ab8d8; }
.text-orange { color: var(--orange); }
.font-display { font-family: var(--font-display); }
.font-num { font-family: var(--font-num); }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-sm { gap: .5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.hidden { display: none; }
.p-sm { padding: .5rem; }
.p-md { padding: 1rem; }
.p-lg { padding: 1.5rem; }
.mt-sm { margin-top: .5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.5rem; }
.mb-sm { margin-bottom: .5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.5rem; }
.border-bottom { border-bottom: 1px solid var(--border); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select-none { user-select: none; }


/* Aligne le design des selects Bootstrap sur tes form-input personnalisés */
select.form-control {
    display: block;
    width: 100%;
    height: 38px; /* Ajuste selon la hauteur de tes autres inputs */
    padding: 0.375rem 0.75rem;
    color: var(--text-main);
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    appearance: none; /* Pour un look plus moderne */
}

/* On unifie le design des selects pour le mode sombre */
#voice-select, 
.form-group select.form-input,
.form-group select.form-control {
    background-color: var(--bg-input, #2a2a2a) !important;
    color: var(--text-main, #ffffff) !important;
    border: 1px solid var(--border-color, #444) !important;
    border-radius: 6px;
    height: 38px;
    padding: 0 10px;
    appearance: none; /* Nettoie le style système */
}

/* Fix pour les options (le menu qui se déroule) */
#voice-select option,
select.form-control option {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* On s'assure que le focus ne remette pas de blanc */
#voice-select:focus {
    outline: none;
    border-color: var(--primary-color, #007bff) !important;
}
/* ─── Hero logo ─── */
.hero-logo { height: 240px; width: auto; filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.3)); }

/* ─── Section dark ─── */

/* ─── Text colors ─── */
.text-secondary { color: var(--text-secondary); }
.font-weight-bold { font-weight: 700; }

/* ─── Etape card (index) ─── */
.etape-card.active { background: linear-gradient(135deg, rgba(201, 168, 76, .06), var(--bg-card)); border-color: rgba(201, 168, 76, .25); }
.etape-card { display: grid; grid-template-columns: 60px 1fr auto auto; align-items: center; gap: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.5rem; }
.etape-num { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; text-align: center; }
.etape-num.active { color: var(--gold); }
.etape-num.past { color: var(--text-muted); }
.etape-info-name { font-weight: 600; font-size: .95rem; }
.etape-date { font-size: .8rem; color: var(--text-muted); }

/* ─── Contact ─── */
.card-mb { margin-bottom: 1.5rem; }
.card-body-compact { padding: .5rem 1.5rem 1rem; }
.card-body-flat { padding: 0; }
.text-gold { color: var(--gold); }
.contact-icon-bold { font-weight: 700; }
.accordion-title-sm { font-size: .88rem; }
.accordion-body-sm { font-size: .85rem; }
.notice-mb { margin-bottom: 1.5rem; }
.consent-box { background: var(--bg-card2); border: 1px solid var(--border); border-radius: 3px; padding: 1rem; margin-bottom: 1.25rem; }
.consent-label { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.consent-checkbox { margin-top: 3px; accent-color: var(--gold); }
.consent-text { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
.btn-justify { justify-content: center; }

/* ─── Membres ─── */
.section-narrow { max-width: 900px; margin: 0 auto 3rem; }
.card-gold { border-color: rgba(201,168,76,0.2); background: linear-gradient(135deg, rgba(201,168,76,0.04), var(--bg-card)); }
.card-header-gold { border-bottom-color: rgba(201,168,76,0.15); }
.card-icon-lg { font-size: 1.2rem; }
.card-subtitle { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }
.text-gold-bold { color: var(--gold); font-weight: 700; }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
/*.section-label { font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin-bottom: .85rem; }*/
.section-label-gold { color: var(--gold); }
.section-label-blue { color: #00aaff; }
.list-unstyled { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.list-unstyled-lg { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.list-item { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: var(--text-secondary); }
.list-item-sm { font-size: .85rem; }
.list-bullet-gold { color: var(--gold); flex-shrink: 0; margin-top: .1rem; }
.list-bullet-blue { color: #00aaff; flex-shrink: 0; margin-top: .1rem; }
.text-small { font-size: .78rem; }
.alert-warning { margin-top: 1.5rem; padding: 1rem; background: rgba(181,42,42,0.06); border: 1px solid rgba(181,42,42,0.15); border-radius: 3px; font-size: .82rem; color: #e07070; line-height: 1.6; }
.form-narrow { max-width: 760px; margin: 0 auto; }
/*.section-title { font-family: var(--font-display); font-size: .95rem; color: var(--gold); margin-bottom: 1.1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); letter-spacing: .05em; }*/
.section-title-mt { font-family: var(--font-display); font-size: .95rem; color: var(--gold); margin: 1.75rem 0 1.1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); letter-spacing: .05em; }
.text-muted-sm { font-size: .72rem; color: var(--text-muted); margin-top: .3rem; }
.amount-grid-5 { grid-template-columns: repeat(5, 1fr); margin-bottom: 1rem; }
.paiement-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
.label-cursor { cursor: pointer; }
.radio-hidden { display: none; }
.paiement-card-dyn { background: var(--bg-card2); border: 2px solid var(--border); border-radius: 4px; padding: .9rem 1rem; transition: var(--transition); }
.paiement-card-active { border-color: var(--gold); }

/* ─── Admin News ─── */
.news-item { border-bottom: 1px solid var(--border); padding: 1.25rem 0; }
.news-item:last-child { border-bottom: none; }
.news-date { font-size: .78rem; color: var(--text-muted); }
.news-title { font-size: 1.05rem; font-weight: 700; margin: .3rem 0; }
.news-excerpt { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; }
.news-badge { font-size: .7rem; padding: .15rem .5rem; border-radius: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.badge-live { background: rgba(220,53,69,.15); color: #dc3545; }
.badge-upcoming { background: rgba(40,167,69,.15); color: #28a745; }
.badge-results { background: rgba(201,168,76,.15); color: var(--gold); }
.badge-info { background: rgba(0,123,255,.15); color: #007bff; }

/* ─── Admin News ─── */
.flex-end-mb { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }
.btn-sm { font-size: .78rem; padding: .6rem 1.2rem; }
.overflow-auto { overflow-x: auto; }
.td-title { font-weight: 600; color: var(--text-primary); }
.form-inline { display: inline; }
.td-date { font-size: .78rem; color: var(--text-muted); }
.td-actions { display: flex; gap: .4rem; }
.td-empty { text-align: center; color: var(--text-muted); padding: 2rem; }
.link-back { font-size: .8rem; color: var(--text-muted); }
.admin-card-mt { margin-top: 1rem; }
.textarea-tall { min-height: 200px; }
.label-check { display: flex; align-items: center; gap: .75rem; cursor: pointer; }
.check-gold { accent-color: var(--gold); }
.form-label-inline { margin: 0; }

/* ─── Classements ─── */
.etape-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.etape-filter-label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; line-height: 2.2; }
.etape-filter-btn { padding: .35rem .85rem; border-radius: 3px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.etape-filter-btn-active { background: rgba(201,168,76,.15); }
.notice-mb-lg { margin-bottom: 2rem; }
.td-muted-sm { color: var(--text-muted); font-size: .82rem; }
.td-muted-xs { color: var(--text-muted); font-size: .78rem; }
.empty-state { padding: 2rem; text-align: center; color: var(--text-muted); }
.etape-header { margin-bottom: 1.5rem; }
.etape-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text-primary); }
.etape-meta { font-size: .88rem; color: var(--text-muted); }

/* ─── Tournoi gestion ─── */
.tg-padding-v { padding: .4rem 0; }
.tg-section-label { padding: .4rem 1.2rem .15rem; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.tg-badge-item { font-size: .68rem; display: flex; gap: .3rem; align-items: center; }
.badge-green { color: var(--green); }
.badge-gold { color: var(--gold); }
.tg-empty { padding: 1.5rem; text-align: center; color: var(--text-muted); font-size: .82rem; }
  .live-indicator {   
background: rgba(224, 53, 53, .15); border: 1px solid rgba(224, 53, 53, .35); color: #e03535; font-size: .65rem; font-weight: 700; letter-spacing: .1em; padding: .25rem .75rem; border-radius: 2px; animation: pulse 2s infinite; align-self: center; margin-left: .5rem;      
     }

/* ─── Seatdraw ─── */
.sd-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: start; }
.sd-padding-v { padding: .4rem 0; }
.sd-section-label { padding: .35rem 1.25rem .15rem; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); border-top: 1px solid var(--border); margin-top: .15rem; }
.sd-sidebar-item { display: flex; justify-content: space-between; align-items: center; padding: .5rem 1.25rem; font-size: .8rem; text-decoration: none; }
.sd-sidebar-active { background: rgba(201,168,76,.08); color: var(--gold); }
.sd-sidebar-item-sm { font-size: .68rem; }
.sd-item-count { color: var(--green); }
.sd-item-saved { color: var(--gold); margin-left: .3rem; }
.sd-empty { padding: 1.5rem; text-align: center; color: var(--text-muted); font-size: .82rem; }
.sd-actions-bar { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: .85rem 1.25rem; margin-bottom: 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sd-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.sd-meta { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }
.sd-saved-indicator { color: var(--gold); }
.sd-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.sd-btn-sm { font-size: .75rem; padding: .45rem .9rem; }
.sd-autosave { font-size: .72rem; color: var(--green); opacity: 0; transition: opacity .4s; align-self: center; }
.sd-card-mb { margin-bottom: 1.25rem; }
.sd-card-header-actions { display: flex; align-items: center; gap: 1rem; }
.sd-count-label { font-size: .72rem; color: var(--text-muted); }
.sd-count-num { color: var(--green); font-weight: 700; }
.sd-card-actions { display: flex; gap: .4rem; }
.sd-legend { padding: .5rem 1rem .25rem; display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border); }
.sd-legend-item { display: flex; align-items: center; gap: .4rem; font-size: .72rem; }
.sd-legend-dot { width: 12px; height: 12px; border-radius: 50%; }
.sd-legend-absent { background: rgba(255,255,255,.12); border: 1px solid var(--border); }
.sd-legend-present { background: rgba(46,204,113,.25); border: 1px solid rgba(46,204,113,.6); color: var(--green); }
.sd-legend-exclu { background: rgba(224,53,53,.15); border: 1px dashed rgba(224,53,53,.5); color: var(--red-bright); }
.sd-joueurs { padding: .65rem 1rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: flex-start; }
.sd-joueur-footer { padding: .4rem 1rem .6rem; font-size: .7rem; color: var(--text-muted); }
.sd-result { display: none; }
.sd-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.sd-table-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.sd-table-header { padding: .75rem 1.1rem; display: flex; justify-content: space-between; align-items: center; }
.sd-table-num { font-family: var(--font-display); font-size: 1.05rem; font-weight: 900; letter-spacing: .05em; }
.sd-badge-w { background: rgba(255,255,255,.2); font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 10px; }
.sd-badge-empty { background: rgba(255,255,255,.1); font-size: .7rem; padding: .2rem .55rem; border-radius: 10px; }
.sd-table-body { background: #0d1117; border: 1px solid; border-top: none; border-radius: 0 0 6px 6px; }
.sd-seat { display: flex; align-items: center; gap: .65rem; padding: .45rem .9rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.sd-seat-placeholder { width: 22px; height: 22px; border: 1.5px dashed rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; color: rgba(255,255,255,.4); flex-shrink: 0; }
.sd-seat-name-placeholder { font-size: .78rem; color: rgba(255,255,255,.35); font-style: italic; }
.sd-seat-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sd-seat-name { font-size: .85rem; }
.sd-seat-absent { font-size: .7rem; font-style: italic; font-weight: 400; }
.sd-print-info { font-size: 7pt; color: #aaa; margin-top: 2pt; }

/* ─── Content narrow ─── */
.content-narrow { max-width: 860px; margin: 0 auto; }

/* ─── Hand card (regles) ─── */
.hand-card { display: grid; grid-template-columns: 50px 1fr 200px; align-items: center; gap: 1.5rem; border-radius: 4px; padding: 1.1rem 1.5rem; margin-bottom: .5rem; }
.hand-num { font-family: var(--font-display); font-size: 1.4rem; font-weight: 900; text-align: center; }
.hand-name { font-weight: 700; color: var(--text-primary); font-size: 1rem; }
.hand-desc { font-size: .82rem; color: var(--text-muted); margin-top: .2rem; }
.hand-example { font-family: var(--font-num); font-size: 1.2rem; color: var(--text-secondary); }

/* Inscription modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  transition: var(--transition);
}
.modal-close:hover { color: var(--text-primary); }
.modal-body { padding: 1.5rem; }

/* ════════════════════════════════════════════════════════════════════════════════
   📋 TOURNOI GESTION - Styles pour admin/tournoi_gestion.php
   ════════════════════════════════════════════════════════════════════════════════ */
.tg-layout { display: grid; grid-template-columns: 230px 1fr; gap: 1.5rem; align-items: start; }
.tg-sidebar { position: sticky; top: 1rem; }
.tg-sidebar-item { display: flex; justify-content: space-between; align-items: center; padding: .5rem 1.2rem; font-size: .82rem; text-decoration: none; transition: var(--transition); border-left: 3px solid transparent; }
.tg-sidebar-item:hover { background: rgba(201, 168, 76, .05); color: var(--text-primary); }
.tg-sidebar-item.active { background: rgba(201, 168, 76, .1); border-color: var(--gold); color: var(--gold); }
.tg-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; flex-wrap: wrap; }
.tg-tab { padding: .6rem 1.1rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--transition); white-space: nowrap; }
.tg-tab:hover { color: var(--text-primary); }
.tg-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

.tg-tab-more {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: inherit;
    color: var(--text-muted);   /* ← même couleur que les autres onglets */
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.tg-tab-more.open,
.tg-tab-more:hover {
    border-color: var(--gold-dim);
    color: var(--gold);
}
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 1.4s infinite; margin-left: .3rem; vertical-align: middle; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.tg-section-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 1.5rem 0 .5rem; }
.tournoi-header { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.refresh-link { font-size: .75rem; color: var(--gold); text-decoration: none; padding: .3rem .6rem; border: 1px solid var(--gold); border-radius: var(--radius); transition: var(--transition); }
.refresh-link:hover { background: var(--gold); color: var(--bg-dark); }
.pause-check { accent-color:#4ab8d8;width:14px;height:14px;cursor:pointer;flex-shrink:0; }
.pause-fields { display:flex;gap:.4rem;align-items:center; }
.pause-cell { padding:.3rem .6rem; }
.pause-toggle { display:flex;align-items:center;gap:.5rem; }
.pause-lbl { font-size:.7rem;color:#4ab8d8;font-weight:600;white-space:nowrap; }
@media(max-width: 768px) { .tg-layout { grid-template-columns: 1fr; } .tg-sidebar { position: static; } }

/* ════════════════════════════════════════════════════════════════════════════════
   🔐 ADMIN AUTH - Styles pour admin/auth.php
   ════════════════════════════════════════════════════════════════════════════════ */
/* Le body admin est centré comme le site public (sidebar + contenu
   traités comme un seul bloc, largeur totale = 220px sidebar + 1280px
   contenu). La sidebar passe de "fixed" (ancrée au bord réel de la
   fenêtre) à "sticky" (ancrée au bord du bloc centré, qui bouge avec
   lui) — elle reste visible au scroll mais fait partie du flux centré
   au lieu d'être plaquée au bord gauche de l'écran sur les grands
   écrans. Sur mobile, elle repasse en "fixed" (voir @media 768px) pour
   le tiroir coulissant. */
body.admin-body { display: flex; min-height: 100vh; max-width: 1500px; margin: 0 auto; }
.admin-sidebar { width: 220px; flex-shrink: 0; background: var(--bg-dark); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; align-self: flex-start; height: 100vh; z-index: 200; overflow-y: auto; }
.sidebar-logo { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--gold); display: flex; gap: .5rem; align-items: center; }
.sidebar-nav { flex: 1; padding: .75rem 0; }
.sidebar-item a { display: flex; align-items: center; gap: .75rem; padding: .65rem 1.5rem; font-size: .82rem; font-weight: 600; letter-spacing: .05em; color: var(--text-muted); text-decoration: none; transition: var(--transition); }
.sidebar-item a:hover, .sidebar-item.active a { background: rgba(201, 168, 76, .08); color: var(--gold); border-right: 2px solid var(--gold); }
.sidebar-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.sidebar-user { font-size: .78rem; color: var(--text-muted); margin-bottom: .5rem; }
.admin-main { flex: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
/* Topbar : bar pleine largeur (comme .nav côté public), contenu centré à
   l'intérieur sur la même largeur max que .nav-inner pour garder le même
   "body" visuel entre la partie publique et la partie admin. */
.admin-topbar { background: var(--bg-dark); border-bottom: 1px solid var(--border); }
.admin-topbar-inner { max-width: 1280px; margin: 0 auto; padding: .85rem 2rem; display: flex; justify-content: space-between; align-items: center; height: 60px; }
.admin-topbar h1 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
/* Contenu : même largeur max que le site public, centré dans l'espace
   restant à droite de la sidebar (au lieu d'être étiré pleine largeur). */
.admin-content { padding: 2rem; flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; }
.admin-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 1.5rem; }
/* Cards qui n'ont pas besoin de toute la largeur de la page sur desktop (ex: Saisons, Structures, liste News) */
.admin-card-narrow { max-width: 640px; }
.admin-card-header { background: var(--bg-card2); padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.admin-card-title { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--text-primary); }
.admin-card-body { padding: 1.5rem; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.admin-table th { background: var(--bg-card2); padding: .6rem 1rem; text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.admin-table td { padding: .65rem 1rem; border-bottom: 1px solid rgba(30, 45, 61, .4); color: var(--text-secondary); vertical-align: middle; }
.admin-table tr:hover td { background: rgba(201, 168, 76, .02); }
.btn-xs { padding: .3rem .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; border-radius: 2px; border: 1px solid; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; transition: var(--transition); text-decoration: none; }
.btn-edit { background: rgba(201, 168, 76, .1); border-color: rgba(201, 168, 76, .3); color: var(--gold); }
.btn-edit:hover { background: rgba(201, 168, 76, .2); }
.btn-delete { background: rgba(181, 42, 42, .1); border-color: rgba(181, 42, 42, .3); color: var(--red-bright); }
.btn-delete:hover { background: rgba(181, 42, 42, .2); }
.btn-view { background: rgba(74, 90, 106, .2); border-color: var(--border); color: var(--text-secondary); }
.badge-ok { background: rgba(46, 204, 113, .1); border: 1px solid rgba(46, 204, 113, .3); color: var(--green); padding: .2rem .6rem; border-radius: 2px; font-size: .68rem; font-weight: 700; }
.badge-warn { background: rgba(201, 168, 76, .1); border: 1px solid rgba(201, 168, 76, .3); color: var(--gold); padding: .2rem .6rem; border-radius: 2px; font-size: .68rem; font-weight: 700; }
.badge-err { background: rgba(181, 42, 42, .1); border: 1px solid rgba(181, 42, 42, .3); color: var(--red-bright); padding: .2rem .6rem; border-radius: 2px; font-size: .68rem; font-weight: 700; }

/* ─── Toolbar admin + menu déroulant (technique des 3 points) ───
   Boutons de taille uniforme pour les barres d'action admin
   (ex: seatdraw). Ne pas utiliser .btn ici : trop grand / majuscules,
   pensé pour les CTA de la page publique. ─────────────────────── */
.sd-toolbar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .85rem 1.1rem;
  margin-bottom: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}
.sd-toolbar-info { font-size: .78rem; color: var(--text-muted); }
.sd-toolbar-info strong { color: #fff; }
.badge-saved { color: var(--gold); margin-left: .35rem; }
.sd-toolbar-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.sd-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 34px;
  padding: 0 .9rem;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.sd-btn:hover { background: rgba(255, 255, 255, .09); }
.sd-btn-primary { background: rgba(201, 168, 76, .16); border-color: rgba(201, 168, 76, .5); color: var(--gold); }
.sd-btn-primary:hover { background: rgba(201, 168, 76, .26); }
.sd-btn-icon { width: 34px; padding: 0; justify-content: center; font-size: 1.05rem; line-height: 1; }

.sd-lock-badge {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 .85rem;
  font-size: .74rem;
  color: var(--red-bright);
  background: rgba(181, 42, 42, .1);
  border: 1px solid rgba(181, 42, 42, .3);
  border-radius: 4px;
}

/* Bouton scindé : action principale + variante via la flèche */
.sd-split { position: relative; display: inline-flex; }
.sd-split .sd-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
.sd-split-caret { width: 26px; padding: 0; justify-content: center; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Menu déroulant générique (technique des 3 points) */
.sd-menu { position: relative; display: inline-flex; }
.sd-dropdown {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
  z-index: 250; /* > .admin-sidebar (200) pour ne pas être recouvert sur PC */
  overflow: hidden;
  display: none;
}
.sd-dropdown.open { display: block; }
/* Basculé en JS quand le menu déborderait à gauche de l'écran (voir positionDropdown) */
.sd-dropdown--align-left { left: 0; right: auto; }
.sd-dropdown-item {
  display: block;
  padding: .6rem .95rem;
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.sd-dropdown-item:hover { background: rgba(201, 168, 76, .1); }
.sd-dropdown-item.danger { color: var(--red-bright); }
.sd-dropdown-item.active { color: var(--gold); font-weight: 700; }
.sd-dropdown-divider { height: 1px; background: var(--border); margin: .3rem 0; }
.sd-dropdown-label {
  padding: .4rem .95rem .2rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── Toolbar filtres — page membres ─── */
.mb-toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}


/* ─── Admin tabs ─── */
.admin-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-tab {
  display: inline-block;
  padding: .75rem 1.1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Menu déroulant "⋮" d'onglets secondaires (réutilisable) ───
   Utilisé par tournoi_gestion.php (.tg-*) et parametres.php (.pg-*) :
   même comportement, préfixes distincts par page pour éviter tout conflit. */
.admin-more-wrap {
  position: relative;
  display: inline-flex;
}
.admin-more-btn {
  display: inline-flex;
  align-items: center;
  border: none !important;
  background: transparent !important;
  padding: .75rem .7rem;
  cursor: pointer;
  color: var(--text-muted);
}
.admin-more-btn:hover,
.admin-more-btn.open,
.admin-more-btn.active {
  color: var(--gold);
}
.admin-more-icon { font-size: 1rem; letter-spacing: 1px; }
.admin-more-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin-left: .3rem;
  vertical-align: middle;
}
.admin-more-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 190px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  padding: .35rem;
  z-index: 250;
  flex-direction: column;
  gap: .1rem;
  animation: adminMoreFadeSlide .16s ease;
}
.admin-more-dropdown--open { display: flex; }
.admin-more-dropdown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
  transition: var(--transition);
}
.admin-more-dropdown-item:hover { color: var(--text-primary); background: rgba(201, 168, 76, .08); }
.admin-more-dropdown-item.active { color: var(--gold); background: rgba(201, 168, 76, .1); }
@keyframes adminMoreFadeSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Alignement calculé dynamiquement en JS (voir positionAdminMoreDropdown)
   pour garantir que le menu reste toujours visible, mobile comme PC. */
.admin-more-dropdown--align-left { right: auto; left: 0; }

/* ─── News list (remplace le tableau) ─── */
.news-list { }
.news-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid rgba(30, 45, 61, .4);
}
.news-list-row:last-child { border-bottom: none; }
.news-list-row:hover { background: rgba(201, 168, 76, .02); }
.news-list-main { flex: 1; min-width: 0; }
.news-list-title { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .3rem; font-size: .88rem; }
.news-list-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.news-list-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
@media(max-width:768px) {
  .admin-sidebar { display: none; position: fixed; top: 0; left: 0; bottom: 0; height: auto; }
  .admin-content { padding: 1rem; }
  .admin-topbar-inner { padding: .75rem 1rem; height: auto; }
  .admin-card-narrow { max-width: none; }

  /* Hamburger visible */
  .admin-hamburger { display: flex !important; flex-direction: column; justify-content: center; gap: 5px;
    background: none; border: none; cursor: pointer; padding: .25rem; }
  .admin-hamburger span { display: block; width: 20px; height: 2px; background: var(--gold); border-radius: 1px; }

  /* Sidebar overlay (mobile slide-in) */
  .admin-sidebar.open { display: flex !important; }
  .admin-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 199; }
  .admin-sidebar-overlay.open { display: block; }

  /* Masquer des colonnes de tableau selon la page */
  .col-hide-mobile { display: none !important; }

  /* Dashboard : blocs côte à côte → empilés */
  .dashboard-grid { grid-template-columns: 1fr !important; }

  /* Étapes édition : 2 colonnes → 1 colonne */
  .etapes-edit-grid { grid-template-columns: 1fr !important; }

  /* Paramètres : grilles → 1 colonne */
  .params-grid-2 { grid-template-columns: 1fr !important; }
  .params-grid-3 { grid-template-columns: 1fr !important; }

  /* Onglets : padding réduit sur mobile */
  .admin-tab { padding: .55rem .65rem; font-size: .72rem; letter-spacing: .04em; }
  .admin-more-btn { padding: .55rem .5rem; }

  /* Tables admin : padding réduit */
  .admin-table th, .admin-table td { padding: .45rem .6rem; font-size: .78rem; }
}

/* ═══════════════════════════════════════════════════════════════
   RICH NEWS EDITOR — admin/news.php
   ═══════════════════════════════════════════════════════════════ */

/* ─── Layout éditeur / preview ─── */
.editor-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 0;
}
@media (max-width: 1100px) { .editor-wrap { grid-template-columns: 1fr; } }

/* ─── Barre d'outils ─── */
.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 8px 10px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  align-items: center;
}
.tb-group { display: flex; gap: 2px; align-items: center; }
.tb-sep   { width: 1px; height: 22px; background: var(--border-bright); margin: 0 4px; }

.tb-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  border-radius: 3px;
  width: 28px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: var(--transition);
  flex-shrink: 0;
  font-family: var(--font-body);
  padding: 0;
}
.tb-btn:hover  { background: rgba(201,168,76,.1); color: var(--gold); border-color: var(--border-bright); }
.tb-btn.active { background: rgba(201,168,76,.18); color: var(--gold); border-color: rgba(201,168,76,.4); }
.tb-btn svg    { width: 13px; height: 13px; }

.tb-select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 11px;
  height: 26px;
  cursor: pointer;
  font-family: var(--font-body);
  outline: none;
}
.tb-select:focus { border-color: var(--gold-dim); }

/* Boutons couleur rapide */
.tb-color-swatch {
  width: 16px; height: 16px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  background: none;
  display: inline-block;
}
.tb-color-swatch:hover { border-color: rgba(255,255,255,.5); transform: scale(1.15); }

/* Picker couleur natif */
.tb-color-wrap { position: relative; display: inline-flex; }
.tb-color-btn {
  width: 28px; height: 26px;
  border-radius: 3px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.tb-color-btn span { font-size: 11px; font-weight: 700; color: var(--text-secondary); line-height: 1; font-family: var(--font-body); }
.tb-color-indicator { width: 18px; height: 3px; border-radius: 1px; }
.tb-color-input {
  position: absolute; opacity: 0;
  width: 100%; height: 100%;
  top: 0; left: 0; cursor: pointer;
}

/* ─── Zone éditeur contenteditable ─── */
.rich-editor {
  min-height: 300px;
  max-height: 500px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0 0 4px 4px;
  padding: 14px 16px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.75;
  outline: none;
  transition: border-color .2s;
}
.rich-editor:focus { border-color: var(--gold-dim); box-shadow: 0 0 0 3px rgba(201,168,76,.08); }
.rich-editor img   { max-width: 100%; border-radius: 4px; margin: 6px 0; display: block; }
.rich-editor h2    { font-family: var(--font-display); color: var(--gold); font-size: 1.3rem; margin: 1rem 0 .4rem; }
.rich-editor h3    { font-family: var(--font-display); color: var(--text-primary); font-size: 1.1rem; margin: .85rem 0 .3rem; }
.rich-editor h4    { font-family: var(--font-body); color: var(--text-secondary); font-size: .95rem; font-weight: 700; margin: .7rem 0 .25rem; }
.rich-editor blockquote { border-left: 3px solid var(--gold-dim); padding: .5rem 1rem; margin: .75rem 0; color: var(--text-secondary); font-style: italic; background: rgba(201,168,76,.04); }
.rich-editor pre   { background: var(--bg-card2); border: 1px solid var(--border); border-radius: 3px; padding: .75rem 1rem; font-family: monospace; font-size: .82rem; overflow-x: auto; margin: .75rem 0; color: var(--text-secondary); }
.rich-editor a     { color: var(--gold); text-decoration: underline; }
.rich-editor ul,
.rich-editor ol    { padding-left: 1.5rem; margin: .5rem 0; color: var(--text-secondary); }
.rich-editor hr    { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

/* YouTube iframe responsive dans l'éditeur */
.rich-editor .yt-frame-wrap {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
  border-radius: 4px; margin: 10px 0;
}
.rich-editor .yt-frame-wrap iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* Galerie multi-images dans l'éditeur */
.rich-editor .img-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.rich-editor .img-gallery img { margin: 0; width: 100%; height: 90px; object-fit: cover; }

/* ─── Zone de dépôt ─── */
.drop-zone {
  border: 2px dashed var(--border-bright);
  border-radius: 4px;
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 6px;
  transition: var(--transition);
  cursor: pointer;
  background: var(--bg-card2);
}
.drop-zone:hover { border-color: var(--gold-dim); color: var(--text-secondary); }
.drop-zone.drag-over { border-color: var(--gold); background: rgba(201,168,76,.05); color: var(--gold); }
.drop-zone-icon { font-size: 1.3rem; margin-bottom: 3px; }

/* Barre de progression upload */
.upload-progress { display: none; height: 3px; background: var(--bg-card2); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.upload-progress-bar { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 2px; transition: width .3s; width: 0%; }

/* ─── Panneau preview ─── */
.preview-panel {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.preview-header {
  background: var(--bg-card);
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.preview-dot { width: 8px; height: 8px; border-radius: 50%; }
.preview-body {
  padding: 16px;
  flex: 1;
  overflow-y: auto;
  max-height: 560px;
}

/* Rendu card tel qu'affiché sur index.php */
.preview-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: var(--transition);
}
.preview-card-header {
  background: linear-gradient(135deg, var(--bg-card2), var(--bg-card));
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.preview-card-icon { font-size: 1.1rem; flex-shrink: 0; }
.preview-card-title { font-family: var(--font-body); font-size: .92rem; font-weight: 700; color: var(--text-primary); }
.preview-card-body {
  padding: 1rem 1.25rem;
  color: var(--text-secondary);
  font-size: .85rem;
  line-height: 1.7;
}
.preview-card-body img { max-width: 100%; border-radius: 4px; margin: 5px 0; }
.preview-card-body .yt-frame-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 4px; margin: 7px 0; }
.preview-card-body .yt-frame-wrap iframe { position: absolute; top:0; left:0; width:100%; height:100%; border:0; }
.preview-card-body .img-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); gap: 5px; margin: 7px 0; }
.preview-card-body .img-gallery img { margin: 0; width: 100%; height: 70px; object-fit: cover; }
.preview-card-date { padding: 6px 1.25rem 10px; color: var(--text-muted); font-size: .7rem; border-top: 1px solid var(--border); }

/* Repli de l'aperçu sur mobile : ces éléments n'ont aucun effet sur desktop
   (la checkbox est cachée, la flèche ne s'affiche que sous 768px) */
.preview-toggle-checkbox { display: none; }
.preview-toggle-arrow { display: none; margin-left: auto; font-size: .65rem; color: var(--text-muted); transition: transform .2s; }

/* ─── Galerie picker modal ─── */
.gallery-picker {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.88); z-index: 9999;
  align-items: center; justify-content: center;
}
.gallery-picker.open { display: flex; }
.gallery-picker-inner {
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  padding: 20px;
  width: 90%;
  max-width: 660px;
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.gallery-picker-title {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gallery-picker-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.gallery-picker-close:hover { color: var(--text-primary); }

.gallery-mode-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.gallery-mode-tab {
  background: var(--bg-card2); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 3px;
  padding: 4px 10px; font-size: .75rem; cursor: pointer;
  transition: var(--transition); font-family: var(--font-body);
}
.gallery-mode-tab.active { background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.4); color: var(--gold); font-weight: 700; }

.gallery-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.gallery-thumb {
  border-radius: 3px; overflow: hidden;
  cursor: pointer; border: 2px solid transparent;
  transition: border-color .15s; position: relative;
}
.gallery-thumb:hover  { border-color: var(--gold-dim); }
.gallery-thumb.selected { border-color: var(--gold); }
.gallery-thumb img { width: 100%; height: 72px; object-fit: cover; display: block; }
.gallery-thumb-check {
  position: absolute; top: 3px; right: 3px;
  background: var(--gold); color: var(--bg-deep);
  border-radius: 50%; width: 16px; height: 16px;
  display: none; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.gallery-thumb.selected .gallery-thumb-check { display: flex; }

.gallery-action-row {
  display: flex; gap: 8px; margin-top: 14px;
  justify-content: flex-end; align-items: center;
}
.gallery-selection-info { font-size: .78rem; color: var(--text-muted); margin-right: auto; }

/* ─── Éditeur d'actus : adaptation mobile ─── */
@media (max-width: 768px) {
  /* Toolbar : au lieu de wrapper sur 4-5 lignes (illisible), elle défile horizontalement comme sur Gmail/Notion mobile */
  .rich-toolbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 10px; }
  .rich-toolbar::-webkit-scrollbar { display: none; }
  .tb-group { flex-shrink: 0; }
  .tb-sep { flex-shrink: 0; }
  .tb-select { flex-shrink: 0; font-size: 16px; padding: 4px 8px; } /* 16px = évite le zoom auto iOS au tap */
  /* Cibles tactiles agrandies (28px → 34px, plus faciles à toucher du doigt) */
  .tb-btn { width: 34px; height: 34px; }
  .tb-color-btn { width: 34px; height: 34px; }
  .tb-color-swatch { width: 20px; height: 20px; }
  /* Éditeur : moins de hauteur imposée, la page défile normalement */
  .rich-editor { min-height: 220px; max-height: 380px; font-size: 16px; } /* 16px = évite le zoom auto iOS au tap */
  .preview-card-title { font-size: .88rem; }

  /* Aperçu repliable : replié par défaut pour raccourcir le formulaire,
     un tap sur l'en-tête le déplie (pur CSS, aucun JS) */
  .preview-header-toggle { cursor: pointer; }
  .preview-toggle-arrow { display: inline-block; }
  .preview-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .preview-toggle-checkbox:checked ~ .preview-panel .preview-body {
    max-height: 340px;
    padding-top: 16px;
    padding-bottom: 16px;
    overflow-y: auto;
  }
  .preview-toggle-checkbox:checked ~ .preview-panel .preview-toggle-arrow {
    transform: rotate(180deg);
  }
  /* Galerie : vignettes plus petites pour en montrer plus sans scroller à l'infini */
  .gallery-picker-inner { width: 94%; padding: 14px; }
  .gallery-picker-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
  .gallery-thumb img { height: 60px; }
  /* Liste des actus : les actions passent sous le titre plutôt que de l'écraser */
  .news-list-row { flex-wrap: wrap; }
  .news-list-actions { width: 100%; justify-content: flex-end; margin-top: .5rem; }
  /* Formulaires : les champs de date/case à cocher gardent une largeur pleine et lisible */
  input[name="publish_at"] { max-width: 100% !important; }

  /* Boutons principaux (+ Nouvelle Actualité / Enregistrer) : pleine largeur,
     plus faciles à toucher et plus lisibles qu'un petit bouton perdu à droite */
  .flex-end-mb { justify-content: stretch; }
  .flex-end-mb .btn { width: 100%; justify-content: center; }
  #news-form > button[type="submit"] { width: 100%; }

  /* Modale galerie : la ligne d'actions (info + Annuler + Insérer) passe
     à la ligne plutôt que de comprimer le texte de sélection */
  .gallery-action-row { flex-wrap: wrap; row-gap: .5rem; }
  .gallery-selection-info { margin-right: 0; width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════
   PAGE NEWS PUBLIQUE — news.php (frontend)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hero news ─── */
.news-hero {
  padding: 5rem 2rem 3.5rem;
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-deep) 100%);
  border-bottom: 1px solid var(--border);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.news-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(201,168,76,.06), transparent);
}
.news-hero-content { position: relative; z-index: 1; }

/* ─── Grid des cards news ─── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1024px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .news-grid { grid-template-columns: 1fr; } }

/* ─── Card news enrichie ─── */
.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}
.news-card:hover {
  border-color: var(--border-bright);
  transform: translateY(-3px);
  box-shadow: var(--shadow), var(--glow-gold);
}

/* Vignette image si la news contient une image */
.news-card-thumb {
  width: 100%; height: 160px;
  object-fit: cover;
  display: block;
}
.news-card-thumb-placeholder {
  height: 8px;
  background: linear-gradient(90deg, var(--gold-dim), rgba(201,168,76,.1));
}

.news-card-body { padding: 1.25rem 1.25rem 1rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.news-card-meta { display: flex; align-items: center; gap: .5rem; }
.news-card-date {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
  font-family: var(--font-body);
}
.news-card-title {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}
.news-card:hover .news-card-title { color: var(--gold-light); }
.news-card-excerpt {
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
}
.news-card-read {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-dim);
  margin-top: .25rem; transition: var(--transition);
}
.news-card:hover .news-card-read { color: var(--gold); gap: .5rem; }

/* ─── Page détail d'une news ─── */
.news-detail-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}
.news-detail-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; color: var(--text-muted);
  margin-bottom: 2rem; transition: var(--transition);
  text-decoration: none;
}
.news-detail-back:hover { color: var(--gold); }

.news-detail-meta { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.news-detail-date {
  font-size: .72rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold);
}
.news-detail-sep { color: var(--border-bright); }

.news-detail-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 1.5rem;
}

/* Séparateur doré sous le titre */
.news-detail-divider {
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-bottom: 2rem;
}

/* Contenu HTML riche de la news */
.news-detail-content {
  color: var(--text-secondary);
  font-size: .96rem;
  line-height: 1.85;
}
.news-detail-content p    { margin-bottom: 1rem; }
.news-detail-content h2   { font-family: var(--font-display); color: var(--gold); font-size: 1.35rem; font-weight: 700; margin: 1.75rem 0 .6rem; }
.news-detail-content h3   { font-family: var(--font-display); color: var(--text-primary); font-size: 1.1rem; font-weight: 700; margin: 1.4rem 0 .5rem; }
.news-detail-content h4   { color: var(--text-primary); font-size: .95rem; font-weight: 700; margin: 1rem 0 .35rem; }
.news-detail-content img  {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  display: block;
  margin: 1.25rem auto;
  border-radius: 4px;
  border: 1px solid var(--border);
  object-fit: contain;
}
.news-detail-content a    { color: var(--gold); border-bottom: 1px dashed var(--gold-dim); }
.news-detail-content a:hover { color: var(--gold-light); border-bottom-color: var(--gold); }
.news-detail-content blockquote {
  border-left: 3px solid var(--gold-dim);
  padding: .65rem 1.25rem;
  margin: 1rem 0;
  color: var(--text-secondary);
  font-style: italic;
  background: rgba(201,168,76,.04);
  border-radius: 0 3px 3px 0;
}
.news-detail-content pre {
  background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: 3px; padding: 1rem; overflow-x: auto;
  font-family: monospace; font-size: .84rem;
  color: var(--text-secondary); margin: 1rem 0;
}
.news-detail-content ul,
.news-detail-content ol  { padding-left: 1.5rem; margin: .75rem 0; }
.news-detail-content li  { margin-bottom: .3rem; }
.news-detail-content hr  { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }

/* YouTube iframe responsive */
.news-detail-content .yt-frame-wrap,
.news-card-body .yt-frame-wrap {
  position: relative; padding-bottom: 56.25%; height: 0;
  overflow: hidden; border-radius: 4px; margin: 1rem 0;
}
.news-detail-content .yt-frame-wrap iframe,
.news-card-body .yt-frame-wrap iframe {
  position: absolute; top:0; left:0; width:100%; height:100%; border:0;
}

/* Filet de sécurité : iframe "brut" (sans wrapper .yt-frame-wrap), ex. anciennes news */
.news-detail-content iframe,
.news-card-body iframe {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 4px;
  margin: 1rem 0;
}

/* Galerie dans la page détail */
.news-detail-content .img-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px; margin: 1rem 0;
}
.news-detail-content .img-gallery img { margin: 0; width: 100%; height: 110px; object-fit: cover; }

/* ─── Navigation entre les news ─── */
.news-nav {
  display: flex; justify-content: space-between;
  gap: 1rem; margin-top: 3rem;
  padding-top: 2rem; border-top: 1px solid var(--border);
}
.news-nav-link {
  display: flex; flex-direction: column; gap: .25rem;
  text-decoration: none; max-width: 45%;
}
.news-nav-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.news-nav-title { font-size: .88rem; color: var(--text-secondary); transition: var(--transition); line-height: 1.4; }
.news-nav-link:hover .news-nav-title { color: var(--gold); }
.news-nav-link.next { text-align: right; }

/* ─── Empty state ─── */
.news-empty {
  text-align: center; padding: 4rem 2rem;
  color: var(--text-muted);
}
.news-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
.news-empty-text { font-size: .92rem; }

/* ─── Pagination ─── */
.news-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: .4rem; margin-top: 3rem;
}
.news-page-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 3px; font-size: .82rem; font-weight: 700;
  color: var(--text-muted); text-decoration: none;
  transition: var(--transition);
}
.news-page-btn:hover   { border-color: var(--gold-dim); color: var(--gold); }
.news-page-btn.active  { background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.4); color: var(--gold); }
.news-page-btn.disabled { opacity: .35; pointer-events: none; }

/* ─── Etape card — responsive mobile ─── */
@media (max-width: 600px) {
  .etape-card {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    padding: 0.85rem 1rem;
    gap: 0.5rem 0.75rem;
  }
  /* Numéro : occupe la ligne 1, colonne 1 */
  .etape-num {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.1rem;
  }
  /* Nom + date : ligne 1, colonne 2 */
  .etape-info {
    grid-column: 2;
    grid-row: 1;
  }
  /* Badge statut : ligne 2, colonne 1+2 côté gauche */
  .etape-card > .badge,
  .etape-card > [class*="badge"] {
    grid-column: 1 / 2;
    grid-row: 2;
    justify-self: start;
  }
  /* Bouton action (Résultats / S'inscrire) : ligne 2, colonne 2 côté droit */
  .etape-card > .btn,
  .etape-card > span[style*="width:80px"] {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    font-size: 0.68rem !important;
    padding: 0.3rem 0.7rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE MESSAGES DE CONTACT — admin/messages.php (responsive mobile)
   ═══════════════════════════════════════════════════════════════ */

/* Le bloc droit de l'en-tête (date, ✓ Lu, badge répondu, Répondre, 🗑)
   n'avait pas de flex-wrap : sur petit écran les boutons débordaient
   du cadre au lieu de passer à la ligne. */
.msg-card-head-right {
  flex-wrap: wrap;
  row-gap: .4rem;
}
.msg-card-head-left {
  min-width: 0;
}
.msg-card-head-left > div {
  min-width: 0;
}

/* Un peu plus de relief pour que la carte se détache bien du fond,
   quelle que soit la taille d'écran */
.msg-card {
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

@media (max-width: 640px) {
  /* Barre "Tous / Non lus" + "Tout marquer comme lu" : on empile
     proprement plutôt que de laisser le bouton se coller aux onglets */
  .msg-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .msg-tabs {
    justify-content: center;
  }

  /* Un peu moins de padding horizontal sur mobile pour équilibrer
     le rendu (le padding desktop vient du style inline, d'où le !important) */
  .msg-card-head {
    padding: .75rem 1rem !important;
  }
  .msg-card-body {
    padding: .85rem 1rem !important;
  }

  /* En-tête de chaque message : nom/email au-dessus, infos+actions
     en dessous, sur toute la largeur */
  .msg-card-head {
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
  }
  .msg-card-head-left,
  .msg-card-head-right {
    width: 100%;
  }
  .msg-card-head-right {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Nom + e-mail de l'expéditeur : on repasse en colonne pour éviter
     que l'adresse e-mail (souvent longue) ne pousse hors du cadre */
  .msg-card-head-left {
    align-items: flex-start;
  }
  .msg-card-head-left > div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
  }
  .msg-card-head-left > div > span:last-child {
    margin-left: 0 !important;
  }

  /* Ligne d'infos (date / répondu) */
  .msg-card-meta {
    justify-content: flex-start;
  }

  /* Barre d'actions : détachée visuellement comme un vrai "footer"
     de carte, boutons pleine largeur et de taille égale — plus
     agréable à toucher et plus lisible qu'une rangée d'icônes tassées */
  .msg-card-actions {
    width: 100%;
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid var(--border);
  }
  .msg-card-actions .btn-xs {
    flex: 1;
    justify-content: center;
    padding: .5rem .5rem;
    font-size: .76rem;
  }

  /* Cartes de destinataires (Tous / Actifs / Payé…) : une seule colonne
     pour des zones de tap plus grandes */
  #cartes-cible {
    grid-template-columns: 1fr !important;
  }

  /* Sélecteur multiple de membres : police un peu réduite */
  #select-membres {
    font-size: .8rem;
  }

  /* Boutons Envoyer / Annuler du panneau de réponse : pleine largeur,
     empilés, plus faciles à toucher */
  .msg-reponse-actions {
    flex-direction: column;
  }
  .msg-reponse-actions .btn,
  .msg-reponse-actions button {
    width: 100%;
    justify-content: center;
  }

  /* Overlay "envoi en cours" : marges réduites sur petit écran */
  #overlay-envoi-mail {
    padding: 1.25rem !important;
  }
}
/* ════════════════════════════════════════════════════════════════════════════════
   🗓️ CALENDRIER - Styles pour admin/calendrier.php
   ════════════════════════════════════════════════════════════════════════════════ */
.cal-nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; gap:1rem; flex-wrap:wrap; }
.cal-nav-title { font-family:var(--font-display); font-size:1.3rem; color:var(--gold); text-transform:capitalize; }
.cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.cal-weekday { text-align:center; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); padding:.4rem 0; }

/* Cases à taille fixe, quel que soit le nombre/longueur des événements :
   le nombre du jour reste fixe en haut, la liste des événements scrolle
   si besoin dans une zone de hauteur constante. */
.cal-cell { background:var(--bg-card); border:1px solid var(--border); border-radius:4px; height:132px; padding:.4rem; display:flex; flex-direction:column; gap:.25rem; overflow:hidden; position:relative; }
.cal-cell.empty { background:transparent; border-color:transparent; }
.cal-cell.has-event::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--cal-accent, transparent); }
.cal-cell.today { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; background:linear-gradient(180deg, rgba(201,168,76,.10), rgba(201,168,76,.02) 60%); }
.cal-day-num { flex-shrink:0; font-family:var(--font-num); font-size:1.15rem; font-weight:700; color:var(--text-secondary); display:flex; justify-content:space-between; align-items:center; margin-bottom:.15rem; }
.cal-cell.today .cal-day-num span { display:flex; align-items:center; justify-content:center; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--gold); color:var(--bg-deep); font-weight:900; }
.cal-day-events { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:.25rem; }
.cal-day-events::-webkit-scrollbar { width:4px; }
.admin-body .cal-cell:not(.empty) { cursor: pointer; }
.admin-body .cal-cell:not(.empty):hover { border-color: var(--border-bright); }
.admin-body .cal-cell:not(.empty)::after {
  content: '+';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--text-muted);
  opacity: .10;
  pointer-events: none;
}
.admin-body .cal-cell.has-event::after { display: none; }
.cal-event { flex-shrink:0; width:100%; font-size:.68rem; padding:.2rem .35rem; border-radius:3px; line-height:1.3; text-decoration:none; display:flex; align-items:flex-start; gap:.3rem; min-width:0; font-family:inherit; text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none; }

/* Logos plus grands et lisibles (calendrier + légende) */
.cal-event-icon { width:20px; height:20px; object-fit:contain; border-radius:2px; flex-shrink:0; }
.cal-legend-icon { width:20px; height:20px; object-fit:contain; border-radius:2px; }
.cal-legend-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }

/* Texte affiché sur 2 lignes maximum si trop long, avec "…" au-delà
   (la case garde une hauteur fixe : cal-day-events scrolle si besoin). */
.cal-event-txt { overflow:hidden; min-width:0; display:flex; align-items:flex-start; gap:.3rem; flex:1; }
.cal-event-txt-inner { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; word-break:break-word; overflow-wrap:anywhere; min-width:0; line-height:1.25; }
.cal-event-heure { flex-shrink:0; font-variant-numeric:tabular-nums; opacity:.75; font-weight:600; }
.cal-detail-row { display:flex; gap:.5rem; padding:.4rem 0; border-bottom:1px solid var(--border); font-size:.85rem; }
.cal-detail-row strong { color:var(--text-muted); min-width:110px; flex-shrink:0; }
.cal-detail-row span { word-break:break-word; }
.cal-event-live { background:rgba(74,144,201,.15); color:var(--steel-light); border:1px solid rgba(74,144,201,.35); }
.cal-event-live:hover { background:rgba(74,144,201,.25); color:var(--steel-light); }
.cal-event-online { background:rgba(201,168,76,.12); color:var(--gold); border:1px solid rgba(201,168,76,.3); }
.cal-event-online.cal-event-caenpoker { background:rgba(74,144,201,.15); color:var(--steel-light); border-color:rgba(74,144,201,.35); }
.cal-event-online.cal-event-winamax_club { background:rgba(201,168,76,.12); color:var(--gold); border-color:rgba(201,168,76,.3); }
.cal-event-online.cal-event-winamax { background:rgba(224,53,53,.15); color:var(--red-bright); border-color:rgba(224,53,53,.35); }
.cal-event-online.cal-event-autre { background:rgba(155,111,209,.15); color:var(--purple); border-color:var(--purple-dim); }
.cal-event:hover { filter:brightness(1.15); }
.cal-day-dots { display:none; }
.cal-dot-icon { width:15px; height:15px; object-fit:contain; border-radius:2px; flex-shrink:0; }

@media (max-width: 768px) {
  .cal-grid { gap:4px; }
  .cal-cell { height:60px; padding:.3rem; gap:.15rem; }
  .cal-weekday { font-size:.62rem; padding:.25rem 0; }
  .cal-day-num { font-size:.92rem; margin-bottom:0; }
  .admin-body .cal-cell:not(.empty)::after { font-size:1.4rem; }
  .cal-nav-title { font-size:1.05rem; }

  /* Sur mobile : pastilles de couleur à la place de la liste détaillée
     (trop dense sur petit écran) ; clic n'importe où dans la case = popup liste. */
  .cal-day-events { display:none; }
  .cal-day-dots { display:flex; flex-wrap:wrap; align-items:center; gap:4px; flex:1; min-height:16px; }
}