/* ========================================
   Quicourtou - Espace Membre
   Club Haute Saintonge Athlétisme
   Couleurs basées sur la palette Tailwind
   ======================================== */

/* === Palette Tailwind (https://tailwindcss.com/docs/colors) === */
:root {
  /* Red */
  --red-50: oklch(97.1% 0.013 17.38);
  --red-100: oklch(93.6% 0.032 17.717);
  --red-200: oklch(88.5% 0.062 18.334);
  --red-300: oklch(80.8% 0.114 19.571);
  --red-400: oklch(70.4% 0.191 22.216);
  --red-500: oklch(63.7% 0.237 25.331);
  --red-600: oklch(57.7% 0.245 27.325);
  --red-700: oklch(50.5% 0.213 27.518);
  --red-800: oklch(44.4% 0.177 26.899);
  --red-900: oklch(39.6% 0.141 25.723);
  --red-950: oklch(25.8% 0.092 26.042);

  /* Orange */
  --orange-50: oklch(98% 0.016 73.684);
  --orange-100: oklch(95.4% 0.038 75.164);
  --orange-200: oklch(90.1% 0.076 70.697);
  --orange-300: oklch(83.7% 0.128 66.29);
  --orange-400: oklch(75% 0.183 55.934);
  --orange-500: oklch(70.5% 0.213 47.604);
  --orange-600: oklch(64.6% 0.222 41.116);
  --orange-700: oklch(55.3% 0.195 38.402);
  --orange-800: oklch(47% 0.157 37.304);
  --orange-900: oklch(40.8% 0.123 38.172);
  --orange-950: oklch(26.6% 0.079 36.259);

  /* Amber */
  --amber-50: oklch(98.7% 0.022 95.277);
  --amber-100: oklch(96.2% 0.059 95.617);
  --amber-200: oklch(92.4% 0.12 95.746);
  --amber-300: oklch(87.9% 0.169 91.605);
  --amber-400: oklch(82.8% 0.189 84.429);
  --amber-500: oklch(76.9% 0.188 70.08);
  --amber-600: oklch(66.6% 0.179 58.318);
  --amber-700: oklch(55.5% 0.163 48.998);
  --amber-800: oklch(47.3% 0.137 46.201);
  --amber-900: oklch(41.4% 0.112 45.904);
  --amber-950: oklch(27.9% 0.077 45.635);

  /* Yellow */
  --yellow-50: oklch(98.7% 0.026 102.212);
  --yellow-100: oklch(97.3% 0.071 103.193);
  --yellow-200: oklch(94.5% 0.129 101.54);
  --yellow-300: oklch(90.5% 0.182 98.111);
  --yellow-400: oklch(85.2% 0.199 91.936);
  --yellow-500: oklch(79.5% 0.184 86.047);
  --yellow-600: oklch(68.1% 0.162 75.834);
  --yellow-700: oklch(55.4% 0.135 66.442);
  --yellow-800: oklch(47.6% 0.114 61.907);
  --yellow-900: oklch(42.1% 0.095 57.708);
  --yellow-950: oklch(28.6% 0.066 53.813);

  /* Lime */
  --lime-50: oklch(98.6% 0.031 120.757);
  --lime-100: oklch(96.7% 0.067 122.328);
  --lime-200: oklch(93.8% 0.127 124.321);
  --lime-300: oklch(89.7% 0.196 126.665);
  --lime-400: oklch(84.1% 0.238 128.85);
  --lime-500: oklch(76.8% 0.233 130.85);
  --lime-600: oklch(64.8% 0.2 131.684);
  --lime-700: oklch(53.2% 0.157 131.589);
  --lime-800: oklch(45.3% 0.124 130.933);
  --lime-900: oklch(40.5% 0.101 131.063);
  --lime-950: oklch(27.4% 0.072 132.109);

  /* Green */
  --green-50: oklch(98.2% 0.018 155.826);
  --green-100: oklch(96.2% 0.044 156.743);
  --green-200: oklch(92.5% 0.084 155.995);
  --green-300: oklch(87.1% 0.15 154.449);
  --green-400: oklch(79.2% 0.209 151.711);
  --green-500: oklch(72.3% 0.219 149.579);
  --green-600: oklch(62.7% 0.194 149.214);
  --green-700: oklch(52.7% 0.154 150.069);
  --green-800: oklch(44.8% 0.119 151.328);
  --green-900: oklch(39.3% 0.095 152.535);
  --green-950: oklch(26.6% 0.065 152.934);

  /* Emerald */
  --emerald-50: oklch(97.9% 0.021 166.113);
  --emerald-100: oklch(95% 0.052 163.051);
  --emerald-200: oklch(90.5% 0.093 164.15);
  --emerald-300: oklch(84.5% 0.143 164.978);
  --emerald-400: oklch(76.5% 0.177 163.223);
  --emerald-500: oklch(69.6% 0.17 162.48);
  --emerald-600: oklch(59.6% 0.145 163.225);
  --emerald-700: oklch(50.8% 0.118 165.612);
  --emerald-800: oklch(43.2% 0.095 166.913);
  --emerald-900: oklch(37.8% 0.077 168.94);
  --emerald-950: oklch(26.2% 0.051 172.552);

  /* Teal */
  --teal-50: oklch(98.4% 0.014 180.72);
  --teal-100: oklch(95.3% 0.051 180.801);
  --teal-200: oklch(91% 0.096 180.426);
  --teal-300: oklch(85.5% 0.138 181.071);
  --teal-400: oklch(77.7% 0.152 181.912);
  --teal-500: oklch(70.4% 0.14 182.503);
  --teal-600: oklch(60% 0.118 184.704);
  --teal-700: oklch(51.1% 0.096 186.391);
  --teal-800: oklch(43.7% 0.078 188.216);
  --teal-900: oklch(38.6% 0.063 188.416);
  --teal-950: oklch(27.7% 0.046 192.524);

  /* Cyan */
  --cyan-50: oklch(98.4% 0.019 200.873);
  --cyan-100: oklch(95.6% 0.045 203.388);
  --cyan-200: oklch(91.7% 0.08 205.041);
  --cyan-300: oklch(86.5% 0.127 207.078);
  --cyan-400: oklch(78.9% 0.154 211.53);
  --cyan-500: oklch(71.5% 0.143 215.221);
  --cyan-600: oklch(60.9% 0.126 221.723);
  --cyan-700: oklch(52% 0.105 223.128);
  --cyan-800: oklch(45% 0.085 224.283);
  --cyan-900: oklch(39.8% 0.07 227.392);
  --cyan-950: oklch(30.2% 0.056 229.695);

  /* Sky */
  --sky-50: oklch(97.7% 0.013 236.62);
  --sky-100: oklch(95.1% 0.026 236.824);
  --sky-200: oklch(90.1% 0.058 230.902);
  --sky-300: oklch(82.8% 0.111 230.318);
  --sky-400: oklch(74.6% 0.16 232.661);
  --sky-500: oklch(68.5% 0.169 237.323);
  --sky-600: oklch(58.8% 0.158 241.966);
  --sky-700: oklch(50% 0.134 242.749);
  --sky-800: oklch(44.3% 0.11 240.79);
  --sky-900: oklch(39.1% 0.09 240.876);
  --sky-950: oklch(29.3% 0.066 243.157);

  /* Blue */
  --blue-50: oklch(97% 0.014 254.604);
  --blue-100: oklch(93.2% 0.032 255.585);
  --blue-200: oklch(88.2% 0.059 254.128);
  --blue-300: oklch(80.9% 0.105 251.813);
  --blue-400: oklch(70.7% 0.165 254.624);
  --blue-500: oklch(62.3% 0.214 259.815);
  --blue-600: oklch(54.6% 0.245 262.881);
  --blue-700: oklch(48.8% 0.243 264.376);
  --blue-800: oklch(42.4% 0.199 265.638);
  --blue-900: oklch(37.9% 0.146 265.522);
  --blue-950: oklch(28.2% 0.091 267.935);

  /* Indigo */
  --indigo-50: oklch(96.2% 0.018 272.314);
  --indigo-100: oklch(93% 0.034 272.788);
  --indigo-200: oklch(87% 0.065 274.039);
  --indigo-300: oklch(78.5% 0.115 274.713);
  --indigo-400: oklch(67.3% 0.182 276.935);
  --indigo-500: oklch(58.5% 0.233 277.117);
  --indigo-600: oklch(51.1% 0.262 276.966);
  --indigo-700: oklch(45.7% 0.24 277.023);
  --indigo-800: oklch(39.8% 0.195 277.366);
  --indigo-900: oklch(35.9% 0.144 278.697);
  --indigo-950: oklch(25.7% 0.09 281.288);

  /* Violet */
  --violet-50: oklch(96.9% 0.016 293.756);
  --violet-100: oklch(94.3% 0.029 294.588);
  --violet-200: oklch(89.4% 0.057 293.283);
  --violet-300: oklch(81.1% 0.111 293.571);
  --violet-400: oklch(70.2% 0.183 293.541);
  --violet-500: oklch(60.6% 0.25 292.717);
  --violet-600: oklch(54.1% 0.281 293.009);
  --violet-700: oklch(49.1% 0.27 292.581);
  --violet-800: oklch(43.2% 0.232 292.759);
  --violet-900: oklch(38% 0.189 293.745);
  --violet-950: oklch(28.3% 0.141 291.089);

  /* Purple */
  --purple-50: oklch(97.7% 0.014 308.299);
  --purple-100: oklch(94.6% 0.033 307.174);
  --purple-200: oklch(90.2% 0.063 306.703);
  --purple-300: oklch(82.7% 0.119 306.383);
  --purple-400: oklch(71.4% 0.203 305.504);
  --purple-500: oklch(62.7% 0.265 303.9);
  --purple-600: oklch(55.8% 0.288 302.321);
  --purple-700: oklch(49.6% 0.265 301.924);
  --purple-800: oklch(43.8% 0.218 303.724);
  --purple-900: oklch(38.1% 0.176 304.987);
  --purple-950: oklch(29.1% 0.149 302.717);

  /* Fuchsia */
  --fuchsia-50: oklch(97.7% 0.017 320.058);
  --fuchsia-100: oklch(95.2% 0.037 318.852);
  --fuchsia-200: oklch(90.3% 0.076 319.62);
  --fuchsia-300: oklch(83.3% 0.145 321.434);
  --fuchsia-400: oklch(74% 0.238 322.16);
  --fuchsia-500: oklch(66.7% 0.295 322.15);
  --fuchsia-600: oklch(59.1% 0.293 322.896);
  --fuchsia-700: oklch(51.8% 0.253 323.949);
  --fuchsia-800: oklch(45.2% 0.211 324.591);
  --fuchsia-900: oklch(40.1% 0.17 325.612);
  --fuchsia-950: oklch(29.3% 0.136 325.661);

  /* Pink */
  --pink-50: oklch(97.1% 0.014 343.198);
  --pink-100: oklch(94.8% 0.028 342.258);
  --pink-200: oklch(89.9% 0.061 343.231);
  --pink-300: oklch(82.3% 0.12 346.018);
  --pink-400: oklch(71.8% 0.202 349.761);
  --pink-500: oklch(65.6% 0.241 354.308);
  --pink-600: oklch(59.2% 0.249 0.584);
  --pink-700: oklch(52.5% 0.223 3.958);
  --pink-800: oklch(45.9% 0.187 3.815);
  --pink-900: oklch(40.8% 0.153 2.432);
  --pink-950: oklch(28.4% 0.109 3.907);

  /* Rose */
  --rose-50: oklch(96.9% 0.015 12.422);
  --rose-100: oklch(94.1% 0.03 12.58);
  --rose-200: oklch(89.2% 0.058 10.001);
  --rose-300: oklch(81% 0.117 11.638);
  --rose-400: oklch(71.2% 0.194 13.428);
  --rose-500: oklch(64.5% 0.246 16.439);
  --rose-600: oklch(58.6% 0.253 17.585);
  --rose-700: oklch(51.4% 0.222 16.935);
  --rose-800: oklch(45.5% 0.188 13.697);
  --rose-900: oklch(41% 0.159 10.272);
  --rose-950: oklch(27.1% 0.105 12.094);

  /* Slate */
  --slate-50: oklch(98.4% 0.003 247.858);
  --slate-100: oklch(96.8% 0.007 247.896);
  --slate-200: oklch(92.9% 0.013 255.508);
  --slate-300: oklch(86.9% 0.022 252.894);
  --slate-400: oklch(70.4% 0.04 256.788);
  --slate-500: oklch(55.4% 0.046 257.417);
  --slate-600: oklch(44.6% 0.043 257.281);
  --slate-700: oklch(37.2% 0.044 257.287);
  --slate-800: oklch(27.9% 0.041 260.031);
  --slate-900: oklch(20.8% 0.042 265.755);
  --slate-950: oklch(12.9% 0.042 264.695);

  /* Gray */
  --gray-50: oklch(98.5% 0.002 247.839);
  --gray-100: oklch(96.7% 0.003 264.542);
  --gray-200: oklch(92.8% 0.006 264.531);
  --gray-300: oklch(87.2% 0.01 258.338);
  --gray-400: oklch(70.7% 0.022 261.325);
  --gray-500: oklch(55.1% 0.027 264.364);
  --gray-600: oklch(44.6% 0.03 256.802);
  --gray-700: oklch(37.3% 0.034 259.733);
  --gray-800: oklch(27.8% 0.033 256.848);
  --gray-900: oklch(21% 0.034 264.665);
  --gray-950: oklch(13% 0.028 261.692);

  /* Zinc */
  --zinc-50: oklch(98.5% 0 0);
  --zinc-100: oklch(96.7% 0.001 286.375);
  --zinc-200: oklch(92% 0.004 286.32);
  --zinc-300: oklch(87.1% 0.006 286.286);
  --zinc-400: oklch(70.5% 0.015 286.067);
  --zinc-500: oklch(55.2% 0.016 285.938);
  --zinc-600: oklch(44.2% 0.017 285.786);
  --zinc-700: oklch(37% 0.013 285.805);
  --zinc-800: oklch(27.4% 0.006 286.033);
  --zinc-900: oklch(21% 0.006 285.885);
  --zinc-950: oklch(14.1% 0.005 285.823);

  /* Neutral */
  --neutral-50: oklch(98.5% 0 0);
  --neutral-100: oklch(97% 0 0);
  --neutral-200: oklch(92.2% 0 0);
  --neutral-300: oklch(87% 0 0);
  --neutral-400: oklch(70.8% 0 0);
  --neutral-500: oklch(55.6% 0 0);
  --neutral-600: oklch(43.9% 0 0);
  --neutral-700: oklch(37.1% 0 0);
  --neutral-800: oklch(26.9% 0 0);
  --neutral-900: oklch(20.5% 0 0);
  --neutral-950: oklch(14.5% 0 0);

  /* Stone */
  --stone-50: oklch(98.5% 0.001 106.423);
  --stone-100: oklch(97% 0.001 106.424);
  --stone-200: oklch(92.3% 0.003 48.717);
  --stone-300: oklch(86.9% 0.005 56.366);
  --stone-400: oklch(70.9% 0.01 56.259);
  --stone-500: oklch(55.3% 0.013 58.071);
  --stone-600: oklch(44.4% 0.011 73.639);
  --stone-700: oklch(37.4% 0.01 67.558);
  --stone-800: oklch(26.8% 0.007 34.298);
  --stone-900: oklch(21.6% 0.006 56.043);
  --stone-950: oklch(14.7% 0.004 49.25);

  /* Mauve */
  --mauve-50: oklch(98.5% 0 0);
  --mauve-100: oklch(96% 0.003 325.6);
  --mauve-200: oklch(92.2% 0.005 325.62);
  --mauve-300: oklch(86.5% 0.012 325.68);
  --mauve-400: oklch(71.1% 0.019 323.02);
  --mauve-500: oklch(54.2% 0.034 322.5);
  --mauve-600: oklch(43.5% 0.029 321.78);
  --mauve-700: oklch(36.4% 0.029 323.89);
  --mauve-800: oklch(26.3% 0.024 320.12);
  --mauve-900: oklch(21.2% 0.019 322.12);
  --mauve-950: oklch(14.5% 0.008 326);

  /* Olive */
  --olive-50: oklch(98.8% 0.003 106.5);
  --olive-100: oklch(96.6% 0.005 106.5);
  --olive-200: oklch(93% 0.007 106.5);
  --olive-300: oklch(88% 0.011 106.6);
  --olive-400: oklch(73.7% 0.021 106.9);
  --olive-500: oklch(58% 0.031 107.3);
  --olive-600: oklch(46.6% 0.025 107.3);
  --olive-700: oklch(39.4% 0.023 107.4);
  --olive-800: oklch(28.6% 0.016 107.4);
  --olive-900: oklch(22.8% 0.013 107.4);
  --olive-950: oklch(15.3% 0.006 107.1);

  /* Mist */
  --mist-50: oklch(98.7% 0.002 197.1);
  --mist-100: oklch(96.3% 0.002 197.1);
  --mist-200: oklch(92.5% 0.005 214.3);
  --mist-300: oklch(87.2% 0.007 219.6);
  --mist-400: oklch(72.3% 0.014 214.4);
  --mist-500: oklch(56% 0.021 213.5);
  --mist-600: oklch(45% 0.017 213.2);
  --mist-700: oklch(37.8% 0.015 216);
  --mist-800: oklch(27.5% 0.011 216.9);
  --mist-900: oklch(21.8% 0.008 223.9);
  --mist-950: oklch(14.8% 0.004 228.8);

  /* Taupe */
  --taupe-50: oklch(98.6% 0.002 67.8);
  --taupe-100: oklch(96% 0.002 17.2);
  --taupe-200: oklch(92.2% 0.005 34.3);
  --taupe-300: oklch(86.8% 0.007 39.5);
  --taupe-400: oklch(71.4% 0.014 41.2);
  --taupe-500: oklch(54.7% 0.021 43.1);
  --taupe-600: oklch(43.8% 0.017 39.3);
  --taupe-700: oklch(36.7% 0.016 35.7);
  --taupe-800: oklch(26.8% 0.011 36.5);
  --taupe-900: oklch(21.4% 0.009 43.1);
  --taupe-950: oklch(14.7% 0.004 49.3);

  /* White/Black */
  --white: #fff;
  --black: #000;

  /* Typographie */
  --police-titre: 'Montserrat', 'Arial Black', sans-serif;
  --police-texte: 'Roboto', 'Helvetica Neue', sans-serif;
}

/* === Reset & Base === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--police-texte);
  background-color: var(--white);
  color: var(--gray-900);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

/* === Header === */
.en-tete {
  flex-shrink: 0;
  background-color: var(--white);
  padding: 1rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}

.header-content .logo-container {
  flex: 1;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-decoration: none;
}

.logo-img {
  height: 40px;
  width: auto;
}

.logo-text h1 {
  font-family: var(--police-titre);
  font-size: 1.2rem;
  color: var(--slate-900);
  letter-spacing: 2px;
  font-weight: 700;
  margin: 0;
}

.logo-text .titre-part {
  display: inline-block;
}

.logo-text .accent {
  color: var(--blue-600);
}

/* === Navigation === */
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.nav-menu a {
  color: var(--gray-900);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
  background-color: var(--blue-600);
  color: var(--white);
}

.nav-menu .nav-logout {
  color: var(--red-600);
}

.nav-menu .nav-logout:hover {
  background-color: var(--red-600);
  color: var(--white);
}

.menu-toggle {
  display: none;
  background: none;
  border: 2px solid var(--gray-900);
  border-radius: 6px;
  cursor: pointer;
  padding: 0.5rem 0.6rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.menu-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--gray-900);
  margin: 4px 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle.active {
  background-color: var(--gray-900);
}

.menu-toggle.active span {
  background-color: var(--white);
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* === Main === */
main {
  flex: 1;
  width: 100%;
  overflow: hidden;
  min-height: 0;
  overscroll-behavior: none;
}

/* === Page Login === */
.page-login .en-tete {
  display: none;
}

.page-login main {
  flex: 1;
}

.login-section {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  min-height: 0;
}

/* === Cards === */
.card {
  background-color: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: clamp(1.5rem, 5vw, 2.5rem);
}

.login-container {
  width: 100%;
  max-width: 420px;
}

/* === Login Header === */
.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo {
  height: clamp(160px, 36vh, 240px);
  width: auto;
  margin-bottom: 1.5rem;
}

.login-title {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  color: var(--slate-900);
  margin-bottom: 0.5rem;
}

.login-header p {
  color: var(--gray-600);
  font-size: 0.95rem;
}

.magic-link-back {
  text-align: center;
  color: var(--gray-500);
  font-size: 0.9rem;
}

.magic-link-anchor {
  color: var(--blue-600);
  text-decoration: none;
  font-weight: 500;
}

/* === Formulaires === */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}

.form-group input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: var(--police-texte);
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  background-color: var(--white);
  color: var(--gray-900);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.form-group input:focus-visible {
  outline: none;
}

.form-group input::placeholder {
  color: var(--gray-400);
}

.form-group input:disabled {
  background-color: var(--gray-100);
  cursor: not-allowed;
}

/* === Bouton Principal === */
.bouton-principal {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-family: var(--police-titre);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--white);
  background-color: var(--blue-600);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.bouton-principal:hover:not(:disabled) {
  background-color: var(--blue-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.bouton-principal:active:not(:disabled) {
  transform: translateY(0);
}

.bouton-principal:disabled {
  background-color: var(--gray-400);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.bouton-principal:focus-visible {
  outline: 2px solid var(--blue-700);
  outline-offset: 2px;
}

/* === Alertes === */
.alert {
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.alert-error {
  background-color: var(--red-100);
  border: 1px solid var(--red-200);
  color: var(--red-800);
}

.alert-success {
  background-color: var(--emerald-100);
  border: 1px solid var(--emerald-200);
  color: var(--emerald-800);
}

/* === Footer === */
footer {
  flex-shrink: 0;
  background-color: var(--white);
  border-top: 1px solid var(--gray-100);
  padding: 1rem;
  text-align: center;
  color: var(--gray-600);
  font-size: 0.8rem;
}

/* === Dashboard === */
.welcome-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  background: linear-gradient(to bottom, var(--gray-50), var(--white));
  min-height: 0;
}

.welcome-title {
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--slate-900);
  margin-bottom: 1rem;
}

.welcome-section p {
  color: var(--gray-500);
  font-size: 1rem;
}

.member-banner {
  margin-top: 2rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
  border-radius: 12px;
  color: var(--white);
  max-width: 600px;
}

.member-banner h2 {
  font-family: var(--police-titre);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.member-banner p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
  max-width: 1200px;
}

.dashboard-grid .card {
  border-top: 4px solid var(--blue-600);
}

.dashboard-grid .card:nth-child(1) {
  border-top-color: var(--amber-400);
}

.dashboard-grid .card:nth-child(2) {
  border-top-color: var(--emerald-500);
}

.dashboard-grid .card:nth-child(3) {
  border-top-color: var(--blue-600);
}

.dashboard-grid .card h3 {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  color: var(--slate-900);
  margin-bottom: 1rem;
}

.dashboard-grid .card p {
  color: var(--gray-500);
  font-size: 0.95rem;
  line-height: 1.7;
}

.dashboard-grid a.card {
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-grid a.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* ========================================
   Dashboard Homepage
   ======================================== */

.dash-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dash-container {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
  overscroll-behavior-y: contain;
}

/* --- Stats --- */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.dash-stat-card {
  text-align: center;
  padding: 1.25rem 0.5rem;
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dash-stat-card:hover {
  border-color: var(--blue-200);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.dash-stat-value {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--blue-600);
  line-height: 1.2;
}

.dash-stat-label {
  display: block;
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Panels Grid --- */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.dash-panel {
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  border-radius: 12px;
  padding: 1.25rem;
}

.dash-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1.5px solid var(--gray-100);
}

.dash-panel-header h3 {
  font-family: var(--police-titre);
  font-size: 1rem;
  color: var(--slate-900);
  font-weight: 700;
  margin: 0;
}

.dash-panel-link {
  font-size: 0.8rem;
  color: var(--blue-600);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.dash-panel-link:hover {
  color: var(--blue-800);
}

.dash-panel-body {
  min-height: 60px;
}

.dash-empty {
  text-align: center;
  color: var(--gray-400);
  font-style: italic;
  padding: 1.5rem 0;
  font-size: 0.9rem;
}

/* --- Result Items --- */
.dash-result-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gray-50);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}

.dash-result-item:last-child {
  border-bottom: none;
}

.dash-result-item:hover {
  background-color: var(--gray-50);
  margin: 0 -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 8px;
}

.dash-result-rank {
  flex-shrink: 0;
}

.dash-result-main {
  flex: 1;
  min-width: 0;
}

.dash-result-athlete {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--slate-900);
}

.dash-result-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.125rem;
}

.dash-result-temps {
  font-family: var(--police-titre);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue-600);
  white-space: nowrap;
}

.dash-result-epreuve {
  font-size: 0.8rem;
  color: var(--gray-500);
  font-weight: 400;
}

.dash-result-course {
  font-size: 0.75rem;
  color: var(--gray-400);
}

.dash-result-date {
  font-size: 0.75rem;
  color: var(--gray-400);
  white-space: nowrap;
  flex-shrink: 0;
}

.dash-result-place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 5px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 0.75rem;
}

.dash-result-place.place-1 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: var(--white);
}

.dash-result-place.place-2 {
  background: linear-gradient(135deg, #d1d5db, #9ca3af);
  color: var(--white);
}

.dash-result-place.place-3 {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: var(--white);
}

.dash-result-place.place-other {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* --- Inscription Items --- */
.dash-insc-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gray-50);
}

.dash-insc-item:last-child {
  border-bottom: none;
}

.dash-insc-main {
  flex: 1;
  min-width: 0;
}

.dash-insc-athlete {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--slate-900);
}

.dash-insc-meta {
  font-size: 0.8rem;
  color: var(--gray-500);
}

.dash-insc-epreuve {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  background: var(--blue-50);
  border-radius: 4px;
  color: var(--blue-600);
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 0.375rem;
}

.dash-insc-date {
  font-size: 0.75rem;
  color: var(--gray-400);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Panel Footer --- */
.dash-panel-footer {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1.5px solid var(--gray-100);
}

.dash-panel-footer-link {
  font-size: 0.8rem;
  color: var(--blue-600);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.dash-panel-footer-link:hover {
  color: var(--blue-800);
}

/* --- Dashboard Responsive --- */
@media (max-width: 768px) {
  .dash-container {
    padding: 1rem;
  }

  .dash-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .dash-stat-value {
    font-size: 1.35rem;
  }

  .dash-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .dash-stat-value {
    font-size: 1.15rem;
  }

  .dash-stat-label {
    font-size: 0.7rem;
  }

  .dash-result-item,
  .dash-insc-item {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
}

/* === Responsive === */
@media (max-width: 768px) {
  .en-tete {
    padding: 0.75rem;
  }

  .nav-menu {
    display: none;
    background-color: var(--white);
    border-top: 1px solid var(--gray-200);
  }

  .nav-menu.active {
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
  }

  .nav-menu a {
    padding: 0.875rem 1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--gray-100);
  }

  .nav-menu a:last-child {
    border-bottom: none;
  }

  .nav-menu a:hover {
    background-color: var(--blue-600);
    color: var(--white);
  }

  .menu-toggle {
    display: block;
    flex-shrink: 0;
  }

  .welcome-section {
    padding: 1rem;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .login-section {
    padding: 1rem;
  }

  .login-container.card {
    padding: 1.25rem;
  }

  .login-logo {
    height: 160px;
  }

  .form-group input {
    padding: 0.75rem;
  }

  .bouton-principal {
    padding: 0.875rem 1.5rem;
  }

  .logo-text h1 {
    font-size: 1rem;
  }
}

/* ========================================
   Performance Pages
   ======================================== */

/* --- Layout --- */
.perf-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.perf-container {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
  overscroll-behavior-y: contain;
}

/* --- Page Header (recherche back link) --- */
.perf-page-header {
  margin-bottom: 1rem;
}

.back-link {
  color: var(--blue-600);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: var(--blue-800);
}

/* --- Mobile Bar (hidden on desktop) --- */
.perf-mobile-bar {
  display: none;
  margin-bottom: 1rem;
  text-align: center;
}

.perf-mobile-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.perf-mobile-filter-btn.active {
  border-color: var(--blue-600);
  background-color: var(--blue-50);
  color: var(--blue-600);
}

/* --- Search Row (recherche page) --- */
.perf-search-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.perf-search-row input {
  flex: 1;
  padding: 0.625rem 1rem;
  font-size: 1rem;
  font-family: var(--police-texte);
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  background-color: var(--white);
  color: var(--gray-900);
  transition: border-color 0.2s ease;
}

.perf-search-row input:focus {
  outline: none;
  border-color: var(--blue-600);
}

.perf-search-row .perf-mobile-filter-btn {
  display: none;
}

/* --- Filters Card --- */
.perf-filters {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
}

.perf-filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.perf-search {
  display: flex;
  gap: 0.5rem;
}

.perf-search input {
  flex: 1;
  padding: 0.625rem 1rem;
  font-size: 1rem;
  font-family: var(--police-texte);
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  background-color: var(--white);
  color: var(--gray-900);
  transition: border-color 0.2s ease;
}

.perf-search input:focus {
  outline: none;
  border-color: var(--blue-600);
}

.perf-search-toggle {
  display: none;
}

/* --- Controls Row --- */
.perf-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.perf-club-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.perf-club-toggle input[type="checkbox"] {
  display: none;
}

.toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  background-color: var(--gray-300);
  border-radius: 10px;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.perf-club-toggle input:checked + .toggle-track {
  background-color: var(--blue-600);
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: var(--white);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.perf-club-toggle input:checked + .toggle-track .toggle-thumb {
  transform: translateX(16px);
}

.toggle-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-700);
}

.perf-controls select,
.perf-filters select {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: var(--police-texte);
  border: 1.5px solid var(--gray-200);
  border-radius: 6px;
  background-color: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.perf-controls select:focus,
.perf-filters select:focus {
  outline: none;
  border-color: var(--blue-600);
}

/* --- Stats KPIs --- */
.perf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-item {
  text-align: center;
  padding: 1rem 0.5rem;
  background: var(--gray-50);
  border-radius: 10px;
}

.stat-value {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.2;
}

.stat-label {
  display: block;
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Top Performances --- */
.perf-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.perf-title {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  color: var(--slate-900);
  font-weight: 700;
}

.perf-top-link {
  font-size: 0.85rem;
  color: var(--blue-600);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.perf-top-link:hover {
  color: var(--blue-800);
}

.perf-top {
  margin-bottom: 2rem;
}

.perf-top-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.perf-top-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  border-radius: 12px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  text-align: center;
}

.perf-top-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--gray-200);
}

.top-card-rank {
  font-family: var(--police-titre);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gray-400);
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}

.perf-top-card.rank-1 .top-card-rank {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: var(--white);
}

.perf-top-card.rank-2 .top-card-rank {
  background: linear-gradient(135deg, #d1d5db, #9ca3af);
  color: var(--white);
}

.perf-top-card.rank-3 .top-card-rank {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: var(--white);
}

.top-card-body {
  flex: 1;
  min-width: 0;
}

.top-card-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--slate-900);
}

.top-card-time {
  font-family: var(--police-titre);
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-600);
  margin-top: 0.125rem;
}

.top-card-event {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
}

.top-card-course {
  font-size: 0.8rem;
  color: var(--gray-400);
  margin-top: 0.125rem;
}

/* --- Results Table --- */
.perf-results {
  margin-bottom: 1.5rem;
}

.perf-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.perf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.perf-table thead {
  border-bottom: 2px solid var(--gray-100);
}

.perf-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.perf-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}

.perf-table th[data-sort]:hover {
  color: var(--gray-800);
}

.perf-table th[data-sort] .sort-arrow {
  font-size: 0.65rem;
  margin-left: 4px;
  opacity: 0.3;
}

.perf-table th[data-sort].sort-asc .sort-arrow::after {
  content: '▲';
  opacity: 1;
}

.perf-table th[data-sort].sort-desc .sort-arrow::after {
  content: '▼';
  opacity: 1;
}

.perf-table td {
  padding: 0.75rem 1rem;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-50);
}

.perf-table tbody tr:hover {
  background-color: var(--gray-50);
}

.perf-empty {
  text-align: center;
  color: var(--gray-400);
  padding: 2rem;
  font-style: italic;
  grid-column: 1 / -1;
}

/* --- Place Badges --- */
.place-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: var(--white);
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.8rem;
}

.place-silver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  background: linear-gradient(135deg, #d1d5db, #9ca3af);
  color: var(--white);
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.8rem;
}

.place-bronze {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  background: linear-gradient(135deg, #d97706, #b45309);
  color: var(--white);
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.8rem;
}

.place-fourth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  background: var(--gray-200);
  color: var(--gray-600);
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
}

.place-neutral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  background: var(--gray-100);
  color: var(--gray-500);
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.8rem;
}

/* --- Pagination --- */
.perf-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.75rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  color: var(--gray-700);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-btn:hover {
  border-color: var(--blue-600);
  color: var(--blue-600);
}

.page-btn.active {
  background-color: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--white);
}

/* --- Bouton Secondaire --- */
.bouton-secondaire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-family: var(--police-texte);
  font-weight: 500;
  color: var(--blue-600);
  background: var(--white);
  border: 2px solid var(--blue-600);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.bouton-secondaire:hover {
  background-color: var(--blue-600);
  color: var(--white);
}

/* ========================================
   Tablet Breakpoint (max-width: 1024px)
   ======================================== */
@media (max-width: 1024px) {
  .perf-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   Mobile Breakpoint (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
  .perf-container {
    padding: 1rem;
  }

  /* Show mobile bar */
  .perf-mobile-bar {
    display: block;
  }

  /* Filter drawer collapsed by default on mobile */
  .perf-filters {
    display: none;
    margin-bottom: 0;
    border-radius: 12px;
  }

  .perf-filters.drawer-open {
    display: block;
    margin-bottom: 1rem;
  }

  /* Hide stats when filter drawer is open */
  .perf-container:has(.perf-filters.drawer-open) .perf-stats {
    display: none;
  }

  /* Show filter button in search row on recherche */
  .perf-search-row .perf-mobile-filter-btn {
    display: inline-flex;
    flex-shrink: 0;
  }

  /* Stats 2x2 grid on mobile */
  .perf-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .stat-value {
    font-size: 1.25rem;
  }

  /* Top cards single column */
  .perf-top-grid {
    grid-template-columns: 1fr;
  }

  .perf-top-card {
    padding: 0.875rem;
  }

  /* Table becomes card layout on mobile */
  .perf-table thead {
    display: none;
  }

  .perf-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    border: 1.5px solid var(--gray-100);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    background: var(--white);
    gap: 0;
    align-items: center;
  }

  .perf-table tbody tr:hover {
    background-color: var(--white);
    border-color: var(--gray-200);
  }

  .perf-table td {
    border-bottom: none;
    padding: 0;
  }

  .perf-table td.perf-empty {
    width: 100%;
    text-align: center;
    order: 0;
  }

  .perf-table td[data-label="Athlète"] {
    width: 100%;
    font-weight: 600;
    color: var(--slate-900);
    font-size: 0.95rem;
    padding-bottom: 0.25rem;
    order: 1;
    text-align: center;
  }

  .perf-table td[data-label="Temps"] {
    width: 50%;
    font-weight: 700;
    color: var(--blue-600);
    font-size: 0.95rem;
    order: 2;
    text-align: right;
    padding-right: 0.5rem;
  }

  .perf-table td[data-label="Place"] {
    width: 50%;
    order: 3;
    text-align: left;
    padding-left: 0.5rem;
  }

  .perf-table td[data-label="Course"] {
    width: 100%;
    font-size: 0.85rem;
    color: var(--gray-600);
    order: 4;
    padding-top: 0.375rem;
    text-align: center;
  }

  .perf-table td[data-label="Épreuve"] {
    width: 100%;
    font-size: 0.8rem;
    color: var(--gray-500);
    order: 5;
    text-align: center;
  }

  .perf-table td[data-label="Date"] {
    width: 100%;
    font-size: 0.75rem;
    color: var(--gray-400);
    text-align: center;
    order: 6;
    padding-top: 0.25rem;
  }

  /* Controls centered on mobile */
  .perf-controls {
    flex-direction: column;
    align-items: center;
  }

  .perf-controls select {
    width: auto;
    min-width: 200px;
  }
}

/* ========================================
   Small Mobile (max-width: 480px)
   ======================================== */
@media (max-width: 480px) {
  .perf-container {
    padding: 0.75rem;
  }

  .stat-value {
    font-size: 1.1rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }
}

/* ========================================
   Inscription Pages
   ======================================== */

/* --- Layout --- */
.insc-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.insc-container {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
  overscroll-behavior-y: contain;
}

.insc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.insc-title {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  color: var(--slate-900);
  font-weight: 700;
}

/* --- Form Card --- */
.insc-form {
  padding: 1.5rem;
}

.form-step {
  margin-bottom: 1.5rem;
}

.hidden {
  display: none !important;
}

.form-step.hidden {
  display: none;
}

.form-step-title {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  color: var(--slate-900);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gray-100);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Course List --- */
.insc-form .form-group {
  margin-bottom: 1rem;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.panel-header h2 {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  color: var(--slate-900);
  font-weight: 700;
}

.panel-header.compact {
  margin-bottom: 0.75rem;
}

.course-search-wrap {
  margin-bottom: 0.75rem;
}

.course-search-input {
  width: 100%;
  padding: 0.6rem 0.875rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-size: 1rem;
  font-family: var(--police-corps);
  color: var(--slate-900);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.course-search-input:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.course-search-input::placeholder {
  color: var(--gray-400);
}

.panel-title {
  flex: 1;
}

.selected-info {
  display: inline;
  font-size: 0.85rem;
  color: var(--gray-600);
}

.selected-info strong {
  color: var(--slate-900);
}

.epreuve-tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--blue-50);
  border-radius: 4px;
  color: var(--blue-600);
  font-size: 0.85rem;
  font-weight: 500;
}

.search-box {
  position: relative;
  margin-top: 0.5rem;
}

.search-box input {
  width: 100%;
  padding: 0.625rem 1rem 0.625rem 2.25rem;
  font-size: 1rem;
  font-family: var(--police-texte);
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  color: var(--gray-900);
  box-sizing: border-box;
}

.search-box input:focus {
  outline: none;
  border-color: var(--blue-600);
}

.search-icon {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}

.panel-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  border: 1.5px solid var(--gray-100);
  border-radius: 10px;
  background: var(--gray-50);
}

.panel-list .loading,
.panel-list .empty,
.panel-list .error {
  padding: 2rem;
  text-align: center;
  color: var(--gray-400);
  font-style: italic;
}

.panel-list .error {
  color: var(--red-600);
}

.list-item {
  display: flex;
  flex-direction: column;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item:hover {
  background-color: var(--blue-50);
}

.list-item-main {
  font-weight: 600;
  color: var(--slate-900);
  font-size: 0.95rem;
}

.list-item-meta {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 0.125rem;
}

.insc-form-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.insc-form-grid .form-row {
  margin-bottom: 0;
}

.insc-form-grid .bouton-principal {
  margin-top: 1.5rem;
}

.wizard-panel {
  display: none;
}

.wizard-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  color: var(--gray-700);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.back-btn:hover {
  border-color: var(--blue-600);
  color: var(--blue-600);
  background: var(--blue-50);
}

.bouton-accompagnateur {
  width: 100%;
  margin-top: 1rem;
  padding: 0.875rem 1.5rem;
  font-size: 0.9rem;
  font-family: var(--police-texte);
  font-weight: 500;
  color: var(--gray-700);
  background: var(--white);
  border: 2px dashed var(--gray-300);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bouton-accompagnateur:hover {
  border-color: var(--amber-500);
  color: var(--amber-700);
  background: var(--amber-50);
}

.accomp-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  background: var(--amber-100);
  border-radius: 4px;
  color: var(--amber-700);
  font-size: 0.75rem;
  font-weight: 500;
}

.row-accompagnateur td {
  background-color: var(--amber-50);
}

.bouton-athlete {
  width: 100%;
  margin-top: 1rem;
  padding: 0.875rem 1.5rem;
  font-size: 0.95rem;
  font-family: var(--police-texte);
  font-weight: 600;
  color: var(--white);
  background: var(--blue-600);
  border: 2px solid var(--blue-600);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bouton-athlete:hover {
  background: var(--blue-700);
  border-color: var(--blue-700);
}

.athlete-tag {
  background: var(--blue-100);
  color: var(--blue-700);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* --- Modal --- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.modal-icon-danger {
  background: var(--red-100);
  color: var(--red-600);
}

.modal-icon-error {
  background: var(--amber-100);
  color: var(--amber-600);
}

.modal-title {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  color: var(--slate-900);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.modal-message {
  font-size: 0.9rem;
  color: var(--gray-600);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.modal-btn {
  padding: 0.625rem 1.5rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--police-texte);
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.modal-btn-cancel {
  background: var(--gray-100);
  color: var(--gray-700);
}

.modal-btn-cancel:hover {
  background: var(--gray-200);
}

.modal-btn-confirm {
  background: var(--red-600);
  color: var(--white);
}

.modal-btn-confirm:hover {
  background: var(--red-700);
}

.modal-btn-error {
  background: var(--blue-600);
  color: var(--white);
}

.modal-btn-error:hover {
  background: var(--blue-700);
}

.course-list,
.epreuve-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  border: 1.5px solid var(--gray-100);
  border-radius: 10px;
  background: var(--gray-50);
}

.course-list .loading,
.epreuve-list .loading,
.course-list .empty,
.epreuve-list .empty,
.course-list .error,
.epreuve-list .error {
  padding: 2rem;
  text-align: center;
  color: var(--gray-400);
  font-style: italic;
}

.course-list .error,
.epreuve-list .error {
  color: var(--red-600);
}

.course-item,
.epreuve-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.course-item:last-child,
.epreuve-item:last-child {
  border-bottom: none;
}

.course-item:hover,
.epreuve-item:hover {
  background-color: var(--blue-50);
}

.course-item.selected,
.epreuve-item.selected {
  background-color: var(--blue-100);
}

.course-info,
.epreuve-info {
  flex: 1;
  min-width: 0;
}

.course-nom,
.epreuve-nom {
  font-weight: 600;
  color: var(--slate-900);
  font-size: 0.95rem;
}

.course-meta,
.epreuve-meta {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 0.125rem;
}

.course-arrow,
.epreuve-arrow {
  color: var(--gray-300);
  font-size: 1.25rem;
  margin-left: 0.5rem;
  transition: color 0.15s ease, transform 0.15s ease;
}

.course-item:hover .course-arrow,
.epreuve-item:hover .epreuve-arrow {
  color: var(--blue-600);
  transform: translateX(4px);
}

/* --- Selected Display --- */
.selected-course,
.selected-epreuve {
  padding: 1rem;
  background: var(--blue-50);
  border-radius: 8px;
  margin-bottom: 1rem;
  border-left: 4px solid var(--blue-600);
}

.selected-course strong,
.selected-epreuve strong {
  display: block;
  color: var(--slate-900);
  margin-bottom: 0.25rem;
}

.selected-course span,
.selected-epreuve span {
  font-size: 0.85rem;
  color: var(--gray-600);
}

.epreuve-label {
  color: var(--blue-600);
  font-weight: 500;
}

/* --- Success Message --- */
.success-message {
  text-align: center;
  padding: 2rem;
}

.success-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--emerald-400), var(--emerald-600));
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1rem;
}

.success-message h2 {
  font-family: var(--police-titre);
  font-size: 1.25rem;
  color: var(--slate-900);
  margin-bottom: 0.5rem;
}

.success-message p {
  color: var(--gray-600);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* --- Filters --- */
.insc-filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  flex-wrap: wrap;
}

.insc-filters .insc-search-wrapper {
  flex: 1;
  min-width: 200px;
}

.insc-filters .bouton-principal {
  width: auto;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  text-decoration: none;
  font-size: 0.875rem;
}

.insc-filters .form-row {
  grid-template-columns: 1fr 1fr;
}

.insc-filters select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: var(--police-texte);
  border: 1.5px solid var(--gray-200);
  border-radius: 6px;
  background-color: var(--white);
  color: var(--gray-700);
  cursor: pointer;
}

.insc-filters select:focus {
  outline: none;
  border-color: var(--blue-600);
}

/* --- Stats --- */
.insc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.insc-stats .stat-item {
  padding: 1rem;
}

.insc-stats .stat-value {
  font-size: 1.75rem;
}

.insc-stats .stat-label {
  font-size: 0.85rem;
}

/* --- Results Table --- */
.insc-results {
  margin-bottom: 1.5rem;
}

.insc-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.insc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.insc-table thead {
  border-bottom: 2px solid var(--gray-100);
}

.insc-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.insc-table td {
  padding: 0.75rem 1rem;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-50);
}

.insc-table tbody tr:hover {
  background-color: var(--gray-50);
}

.insc-empty {
  text-align: center;
  color: var(--gray-400);
  padding: 2rem;
  font-style: italic;
}

/* --- Delete Button --- */
.btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: var(--red-100);
  color: var(--red-600);
  font-size: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-delete::after {
  content: '×';
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -2px;
}

.btn-delete:hover {
  background: var(--red-600);
  color: var(--white);
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
  .insc-container {
    padding: 1rem;
  }

  .insc-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .insc-filters .form-row {
    grid-template-columns: 1fr;
  }

  .insc-filters {
    flex-wrap: nowrap;
  }

  .insc-filters .insc-search-wrapper {
    min-width: 0;
  }

  .insc-filters .bouton-principal {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  .insc-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .insc-stats .stat-value {
    font-size: 1.25rem;
  }

  .insc-stats .stat-label {
    font-size: 0.8rem;
  }

  /* Table becomes card layout */
  .insc-table thead {
    display: none;
  }

  .insc-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    border: 1.5px solid var(--gray-100);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    background: var(--white);
    align-items: center;
    gap: 0.25rem;
    position: relative;
  }

  .insc-table tbody tr:hover {
    background-color: var(--white);
  }

  .insc-table td {
    border-bottom: none;
    padding: 0.25rem 0;
  }

  .insc-table td[data-label="Athlète"] {
    width: 100%;
    font-weight: 600;
    color: var(--slate-900);
    font-size: 1rem;
    order: 1;
    text-align: center;
  }

  .insc-table td[data-label="Course"] {
    width: 100%;
    font-size: 0.9rem;
    color: var(--gray-600);
    order: 2;
    text-align: center;
  }

  .insc-table td[data-label="Date"] {
    width: 100%;
    font-size: 0.8rem;
    color: var(--gray-400);
    order: 3;
    text-align: center;
  }

  .insc-table td[data-label=""] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    order: 0;
    padding: 0;
  }

  .insc-table td.insc-empty {
    width: 100%;
    text-align: center;
  }

  .insc-table tr:has(.insc-empty) {
    justify-content: center;
  }

  .course-list,
  .epreuve-list {
    min-height: 120px;
  }
}

@media (max-width: 480px) {
  .insc-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .bouton-principal,
  .form-actions .bouton-secondaire {
    width: 100%;
  }
}

/* ========================================
   Inscription Wizard
   ======================================== */

.insc-container:has(.insc-wizard) {
  overflow: hidden;
}

.insc-wizard {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  padding: 0 1rem;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  position: relative;
  z-index: 1;
}

.wizard-step .step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--gray-200);
  color: var(--gray-500);
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--police-titre);
  transition: all 0.3s ease;
  position: relative;
}

.wizard-step.active .step-num {
  background-color: var(--blue-600);
  color: var(--white);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.wizard-step .step-label {
  font-size: 0.75rem;
  color: var(--gray-400);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.wizard-step.active .step-label {
  color: var(--blue-600);
}

.wizard-step.completed .step-num {
  background-color: var(--emerald-500);
  color: var(--white);
}

.wizard-step.completed .step-label {
  color: var(--emerald-600);
}

.wizard-connector {
  flex: 1;
  height: 3px;
  background-color: var(--gray-200);
  border-radius: 2px;
  margin: 0 0.5rem;
  position: relative;
  top: -0.5rem;
  overflow: hidden;
}

.wizard-connector-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.wizard-steps > :nth-child(2) .wizard-connector-fill {
  background: linear-gradient(90deg, var(--emerald-500), var(--blue-600));
}

.wizard-steps > :nth-child(4) .wizard-connector-fill {
  background: linear-gradient(90deg, var(--emerald-500), var(--blue-600));
}

.wizard-steps:has([data-step="3"].active) > :nth-child(2) .wizard-connector-fill,
.wizard-steps:has([data-step="3"].completed) > :nth-child(2) .wizard-connector-fill {
  background: var(--emerald-500);
}

.wizard-content {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wizard-panel {
  display: none;
}

.wizard-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#panel-1 .panel-header {
  flex-direction: column;
  align-items: stretch;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.panel-header.compact {
  margin-bottom: 0.75rem;
}

.panel-header h2 {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  color: var(--slate-900);
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

.panel-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.selected-info {
  display: inline;
  font-size: 0.85rem;
  color: var(--gray-600);
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  color: var(--gray-700);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.back-btn:hover {
  border-color: var(--blue-600);
  color: var(--blue-600);
}

.search-box {
  position: relative;
  margin-top: 0.75rem;
}

.search-box input {
  width: 100%;
  padding: 0.625rem 1rem 0.625rem 2.5rem;
  font-size: 1rem;
  font-family: var(--police-texte);
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  background-color: var(--white);
  color: var(--gray-900);
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.search-box input:focus {
  outline: none;
  border-color: var(--blue-600);
}

.search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}

.panel-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  border: 1.5px solid var(--gray-100);
  border-radius: 10px;
  background: var(--gray-50);
}

.panel-list .loading,
.panel-list .empty,
.panel-list .error {
  padding: 2rem;
  text-align: center;
  color: var(--gray-400);
  font-style: italic;
}

.panel-list .error {
  color: var(--red-600);
}

.list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item:hover {
  background-color: var(--blue-50);
}

.list-item-main {
  font-weight: 600;
  color: var(--slate-900);
  font-size: 0.95rem;
  text-align: center;
}

.list-item-meta {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
  text-align: center;
}

.meta-date {
  color: var(--blue-600);
  font-weight: 500;
}

.meta-sep {
  color: var(--gray-300);
}

.meta-ville {
  color: var(--gray-600);
}

.meta-dept {
  color: var(--gray-400);
  font-size: 0.75rem;
}

.insc-form-grid {
  padding-top: 0.5rem;
}

.autocomplete-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 220px;
  overflow-y: auto;
  z-index: 100;
  margin-top: 4px;
}

.autocomplete-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--slate-800);
  border-bottom: 1px solid var(--gray-100);
  transition: background-color 0.15s ease;
}

.autocomplete-item:first-child {
  border-radius: 10px 10px 0 0;
}

.autocomplete-item:last-child {
  border-bottom: none;
  border-radius: 0 0 10px 10px;
}

.autocomplete-item:only-child {
  border-radius: 10px;
}

.autocomplete-item:hover {
  background-color: var(--blue-50);
}

.epreuve-tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background-color: var(--blue-50);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--blue-600);
}

.epreuve-tag.accompagnateur-tag {
  background-color: var(--amber-100);
  color: var(--amber-700);
}

.success-content {
  text-align: center;
  padding: 2rem 1rem;
}

.success-content .success-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--emerald-400), var(--emerald-600));
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1rem;
}

.success-content h2 {
  font-family: var(--police-titre);
  font-size: 1.25rem;
  color: var(--slate-900);
  margin-bottom: 0.5rem;
}

.success-content p {
  color: var(--gray-600);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.success-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.insc-search-wrapper {
  position: relative;
}

.insc-search {
  width: 100%;
  padding: 0.625rem 1rem 0.625rem 2.5rem !important;
  font-size: 1rem;
  border: 1.5px solid var(--gray-200) !important;
  border-radius: 8px;
  box-sizing: border-box;
}

.insc-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}

/* Wizard mobile */
@media (max-width: 768px) {
  .wizard-step .step-label {
    font-size: 0.65rem;
  }

  .wizard-step .step-num {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .panel-list {
    min-height: 120px;
  }

  .panel-title {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .panel-title h2 {
    white-space: normal;
  }

  .selected-info {
    text-align: center;
  }
}

/* ========================================
   Create Course / Epreuve Forms
   ======================================== */

.bouton-creer {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-family: var(--police-texte);
  font-weight: 600;
  color: var(--emerald-600);
  background: var(--white);
  border: 2px dashed var(--emerald-400);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bouton-creer:hover {
  border-color: var(--emerald-600);
  color: var(--emerald-700);
  background: var(--emerald-50);
}

.create-form {
  margin-top: 0.75rem;
  padding: 1.25rem;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
}

.create-form-hidden {
  display: none !important;
}

.create-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.create-form .form-group {
  margin-bottom: 0;
}

.create-form .form-group input,
.create-form .form-group select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  font-family: var(--police-texte);
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  background-color: var(--white);
  color: var(--gray-900);
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.create-form .form-group input:focus,
.create-form .form-group select:focus {
  outline: none;
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.create-form .form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--gray-600);
  margin-bottom: 0.375rem;
}

.create-form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.create-form-actions .bouton-principal {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  background-color: var(--emerald-500);
}

.create-form-actions .bouton-principal:hover:not(:disabled) {
  background-color: var(--emerald-600);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.create-form-actions .bouton-secondaire {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

.btn-toggle-optional {
  grid-column: 1 / -1;
  background: none;
  border: 1px dashed var(--gray-300);
  color: var(--gray-500);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-family: var(--police-texte);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.btn-toggle-optional:hover {
  color: var(--emerald-600);
  border-color: var(--emerald-300);
}

.create-form-optional {
  display: contents;
}

.create-form-optional-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .create-form-grid {
    grid-template-columns: 1fr;
  }

  .create-form-actions {
    flex-direction: column;
  }

  .create-form-actions .bouton-principal,
  .create-form-actions .bouton-secondaire {
    width: 100%;
  }
}

/* ========================================
   Calendrier Page
   ======================================== */

.cal-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cal-container {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
  overscroll-behavior-y: contain;
}

.cal-filter-bar {
  position: relative;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}

.cal-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.cal-filter-toggle:hover {
  border-color: var(--blue-300);
  background: var(--blue-50);
}

.cal-filter-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-900);
}

.cal-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--red-600);
  color: var(--white);
}

.cal-filter-arrow {
  font-size: 0.7rem;
  color: var(--gray-400);
  transition: transform 0.15s ease;
}

.cal-filter-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 320px;
  max-height: 400px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cal-filter-search {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-bottom: 1px solid var(--gray-100);
  font-size: 1rem;
  color: var(--slate-900);
  background: var(--gray-50);
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.cal-filter-search:focus {
  background: var(--white);
}

.cal-filter-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--gray-100);
}

.cal-filter-action-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--blue-600);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.cal-filter-action-btn:hover {
  text-decoration: underline;
}

.cal-filter-list {
  overflow-y: auto;
  max-height: 240px;
  padding: 0.25rem 0;
}

.cal-filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--gray-700);
  transition: background 0.1s ease;
}

.cal-filter-item:hover {
  background: var(--gray-50);
}

.cal-filter-item input[type="checkbox"] {
  accent-color: var(--red-600);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cal-filter-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--gray-400);
  font-size: 0.85rem;
}

.cal-filter-apply {
  margin: 0;
  padding: 0.75rem;
  background: var(--red-600);
  color: var(--white);
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}

.cal-filter-apply:hover {
  background: var(--red-700);
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.cal-title {
  font-family: var(--police-titre);
  font-size: 1.25rem;
  color: var(--slate-900);
  font-weight: 700;
  min-width: 200px;
  text-align: center;
}

.cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
  color: var(--gray-700);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cal-nav-btn:hover {
  border-color: var(--blue-600);
  color: var(--blue-600);
  background: var(--blue-50);
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: 0.5rem;
}

.cal-weekdays span {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.5rem 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 2rem;
}

.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  border-radius: 10px;
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  transition: all 0.15s ease;
}

.cal-day.empty {
  background: transparent;
  border-color: transparent;
}

.cal-day-num {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-700);
}

.cal-day.today .cal-day-num {
  background: var(--blue-600);
  color: var(--white);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-day-dot {
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--blue-600);
  color: var(--white);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.cal-day.has-course {
  cursor: pointer;
  border-color: var(--blue-200);
  background: var(--blue-50);
}

.cal-day.has-course:hover {
  border-color: var(--blue-400);
  background: var(--blue-100);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cal-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: var(--gray-400);
  font-style: italic;
}

.cal-list {
  max-width: 640px;
  margin: 0 auto;
  padding-top: 1rem;
  border-top: 1.5px solid var(--gray-100);
}

.cal-list-heading {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}

.cal-list-sep {
  width: 1px;
  height: 28px;
  background: var(--gray-200);
  flex-shrink: 0;
}

.cal-list-empty {
  text-align: center;
  padding: 2rem;
  color: var(--gray-400);
  font-style: italic;
}

.cal-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 0.875rem 1.5rem;
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  border-radius: 14px;
  transition: all 0.15s ease;
  max-width: 520px;
  margin: 0 auto 0.5rem;
}

.cal-list-item:hover {
  border-color: var(--blue-200);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.cal-list-date {
  font-weight: 700;
  color: var(--red-600);
  font-size: 0.8rem;
  white-space: nowrap;
  min-width: 76px;
  text-align: right;
  letter-spacing: 0.02em;
}

.cal-list-body {
  flex: 1;
  min-width: 0;
}

.cal-list-nom {
  font-weight: 600;
  color: var(--slate-900);
  font-size: 0.9rem;
}

.cal-list-meta {
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-top: 0.15rem;
}

.cal-modal-box {
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cal-modal-title {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  color: var(--slate-900);
  font-weight: 700;
  margin: 0;
}

.cal-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cal-modal-close:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

.cal-modal-body {
  text-align: left;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.cal-modal-courses {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cal-modal-course-item {
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--gray-100);
  border-radius: 10px;
}

.cal-modal-course-nom {
  font-weight: 600;
  color: var(--slate-900);
}

.cal-modal-course-lieu {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 0.125rem;
}

.cal-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gray-50);
  font-size: 0.9rem;
  color: var(--gray-700);
}

.cal-detail-label {
  font-weight: 600;
  color: var(--gray-500);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cal-detail-epreuves {
  padding: 0.75rem 0;
}

.cal-epreuve-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.cal-epreuve-tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--blue-50);
  border-radius: 6px;
  color: var(--blue-600);
  font-size: 0.8rem;
  font-weight: 500;
}

.cal-detail-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--blue-600);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
}

.cal-detail-link:hover {
  color: var(--blue-800);
}

@media (max-width: 768px) {
  .cal-container {
    padding: 1rem;
  }

  .cal-grid {
    gap: 2px;
  }

  .cal-day {
    min-height: 48px;
    border-radius: 6px;
  }

  .cal-day-num {
    font-size: 0.8rem;
  }

  .cal-day-dot {
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
  }

  .cal-header {
    gap: 1rem;
  }

  .cal-title {
    font-size: 1.1rem;
    min-width: 160px;
  }
}

/* ========================================
   Athlete Profile Page
   ======================================== */

.ath-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ath-container {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
  overscroll-behavior-y: contain;
  position: relative;
}

.ath-page-header {
  margin-bottom: 1rem;
}

.ath-profile-header {
  margin-bottom: 1.5rem;
}

.ath-profile-name {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.ath-search-row {
  margin-bottom: 1rem;
}

.ath-search-row input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: var(--police-texte);
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  background-color: var(--white);
  color: var(--gray-900);
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.ath-search-row input:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.ath-autocomplete {
  display: none;
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
}

.ath-autocomplete-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
  transition: background-color 0.15s ease;
}

.ath-autocomplete-item:last-child {
  border-bottom: none;
}

.ath-autocomplete-item:hover {
  background-color: var(--blue-50);
}

.ath-autocomplete-name {
  font-weight: 600;
  color: var(--slate-900);
  font-size: 0.95rem;
}

.ath-autocomplete-meta {
  font-size: 0.8rem;
  color: var(--gray-500);
}

.ath-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.ath-section-title {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  color: var(--slate-900);
  font-weight: 700;
  margin-bottom: 0;
}

.ath-link {
  color: var(--blue-600);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.ath-link:hover {
  color: var(--blue-800);
  text-decoration: underline;
}

.ath-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ath-season-select {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-family: var(--police-texte);
  border: 1.5px solid var(--gray-200);
  border-radius: 6px;
  background-color: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.ath-season-select:focus {
  outline: none;
  border-color: var(--blue-600);
}

.ath-email-season {
  margin-bottom: 1rem;
}

.ath-email-season .cal-email-duration-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-700);
}

.ath-email-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue-600);
  background: var(--white);
  border: 1.5px solid var(--blue-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.ath-email-btn:hover {
  background: var(--blue-50);
  border-color: var(--blue-400);
}

.ath-email-modal-body {
  padding: 0 1.5rem 1.5rem;
}

.ath-email-desc {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.5;
}

#ath-email-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#ath-email-input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  color: var(--slate-900);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}

#ath-email-input:focus {
  border-color: var(--blue-400);
}

.ath-email-submit {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  background: var(--red-600);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.ath-email-submit:hover {
  background: var(--red-700);
}

.ath-email-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ath-email-feedback {
  margin-top: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
}

.ath-email-success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.ath-email-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.ath-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ath-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.ath-table thead {
  border-bottom: 2px solid var(--gray-100);
}

.ath-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.ath-table td {
  padding: 0.75rem 1rem;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-50);
}

.ath-table tbody tr:hover {
  background-color: var(--gray-50);
}

.ath-empty {
  text-align: center;
  color: var(--gray-400);
  padding: 2rem;
  font-style: italic;
}

.ath-empty-state {
  text-align: center;
  padding: 3rem 2rem;
}

.ath-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.ath-empty-state h2 {
  font-family: var(--police-titre);
  font-size: 1.25rem;
  color: var(--slate-900);
  margin-bottom: 0.5rem;
}

.ath-empty-state p {
  color: var(--gray-500);
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .ath-container {
    padding: 1rem;
  }

  .ath-stats {
    gap: 0.75rem;
  }

  .ath-stats .stat-value {
    font-size: 1.25rem;
  }

  .ath-history-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .ath-season-select {
    width: 100%;
  }

  .ath-email-btn {
    width: 100%;
    justify-content: center;
  }

  #ath-email-form {
    flex-direction: column;
  }

  .ath-table thead {
    display: none;
  }

  .ath-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    border: 1.5px solid var(--gray-100);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    background: var(--white);
    align-items: center;
  }

  .ath-table tbody tr:hover {
    background-color: var(--white);
  }

  .ath-table td {
    border-bottom: none;
    padding: 0;
  }

  .ath-table td[data-label="Course"] {
    width: 100%;
    font-weight: 600;
    color: var(--slate-900);
    font-size: 0.95rem;
    order: 1;
    text-align: center;
  }

  .ath-table td[data-label="Épreuve"] {
    width: 100%;
    font-size: 0.85rem;
    color: var(--gray-600);
    order: 2;
    text-align: center;
  }

  .ath-table td[data-label="Temps"] {
    width: 50%;
    font-weight: 700;
    color: var(--blue-600);
    font-size: 0.95rem;
    order: 3;
    text-align: right;
    padding-right: 0.5rem;
  }

  .ath-table td[data-label="Place"] {
    width: 50%;
    order: 4;
    text-align: left;
    padding-left: 0.5rem;
  }

  .ath-table td[data-label="Date"] {
    width: 100%;
    font-size: 0.75rem;
    color: var(--gray-400);
    text-align: center;
    order: 5;
    padding-top: 0.25rem;
  }
}

@media (max-width: 480px) {
  .ath-history-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ========================================
   Error Pages
   ======================================== */

.page-error {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.page-error main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-section {
  text-align: center;
  padding: 2rem;
}

.error-logo {
  height: clamp(120px, 30vh, 180px);
  width: auto;
  margin-bottom: 1.5rem;
}

.error-code {
  font-family: var(--police-titre);
  font-size: clamp(5rem, 15vw, 8rem);
  font-weight: 900;
  color: var(--gray-100);
  line-height: 1;
  letter-spacing: -4px;
  margin-bottom: 0.5rem;
}

.error-title {
  font-family: var(--police-titre);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: var(--slate-900);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.error-message {
  color: var(--gray-500);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

.error-btn {
  display: inline-block;
  padding: 0.875rem 2rem;
  font-size: 0.9rem;
  font-family: var(--police-titre);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--white);
  background-color: var(--blue-600);
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.error-btn:hover {
  background-color: var(--blue-700);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

@media (max-width: 480px) {
  .error-section {
    padding: 1rem;
  }

  .error-logo {
    height: 100px;
  }

  .error-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
  }
}

.cal-export-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.cal-export-row .cal-filter-bar {
  flex: none;
  margin-bottom: 0;
}

.cal-email-duration {
  margin-bottom: 1rem;
}

.cal-email-duration-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-700);
}

.cal-email-select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--slate-900);
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.cal-email-select:focus {
  border-color: var(--blue-400);
}

.cal-email-form-field input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  color: var(--slate-900);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}

.cal-email-form-field input[type="email"]:focus {
  border-color: var(--blue-400);
}

.cal-email-submit-full {
  width: 100%;
  margin-top: 0.5rem;
}

/* === Loader overlay === */
.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.loader-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.loader-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
  animation: loader-pulse 1.2s ease-in-out infinite;
}

.loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--blue-600);
  border-radius: 50%;
  animation: loader-spin 0.8s linear infinite;
}

.loader-text {
  margin-top: 1rem;
  font-family: var(--police-titre);
  font-size: 0.95rem;
  color: var(--gray-400);
  letter-spacing: 1px;
}

@keyframes loader-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}