@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary: #001932;
  --secondary: #F8C838;
  --tertiary: #B5A85B;
  --alternate: #E0E3E7;
  --primary-text: #14181B;
  --secondary-text: #57636C;
  --primary-background: #F1F4F8;
  --secondary-background: #FFFFFF;
  --accent1: rgba(75, 57, 239, 0.3);
  --accent2: rgba(57, 210, 192, 0.3);
  --accent3: rgba(238, 139, 96, 0.3);
  --accent4: #FFFFFF;
  --success: #249689;
  --warning: #F9CF58;
  --error: #FF5963;
  --info: #FFFFFF;
  --text-color: var(--primary-text);
  --text-muted: var(--secondary-text);
  --bg-color: var(--primary-background);
  --surface: var(--secondary-background);
  --border-color: var(--alternate);
  --shadow-color: rgba(0, 0, 0, 0.1);
  --font-family-headings: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display-large-size: 64px;
  --display-large-weight: 600;
  --display-large-height: 1.2;
  --display-medium-size: 44px;
  --display-medium-weight: 600;
  --display-medium-height: 1.2;
  --display-small-size: 36px;
  --display-small-weight: 600;
  --display-small-height: 1.2;
  --headline-large-size: 32px;
  --headline-large-weight: 600;
  --headline-large-height: 1.2;
  --headline-medium-size: 28px;
  --headline-medium-weight: 600;
  --headline-medium-height: 1.2;
  --headline-small-size: 24px;
  --headline-small-weight: 600;
  --headline-small-height: 1.2;
  --title-large-size: 20px;
  --title-large-weight: 600;
  --title-large-height: 1.2;
  --title-medium-size: 18px;
  --title-medium-weight: 600;
  --title-medium-height: 1.2;
  --title-small-size: 16px;
  --title-small-weight: 600;
  --title-small-height: 1.2;
  --label-large-size: 16px;
  --label-large-weight: 400;
  --label-large-height: 1.5;
  --label-medium-size: 14px;
  --label-medium-weight: 400;
  --label-medium-height: 1.5;
  --label-small-size: 12px;
  --label-small-weight: 400;
  --label-small-height: 1.5;
  --body-large-size: 16px;
  --body-large-weight: 400;
  --body-large-height: 1.5;
  --body-medium-size: 14px;
  --body-medium-weight: 400;
  --body-medium-height: 1.5;
  --body-small-size: 12px;
  --body-small-weight: 400;
  --body-small-height: 1.5;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-xxxl: 48px;
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 50%;
  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
  --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color);
  --transition-base: 0.3s ease;
  --transition-fast: 0.15s ease;
  --transition-slow: 0.5s ease;
}

html[data-theme="dark"] {
  --primary: #001932;
  --secondary: #F8C838;
  --tertiary: #B5A85B;
  --alternate: #262D34;
  --primary-text: #FFFFFF;
  --secondary-text: #95A1AC;
  --primary-background: #1D2428;
  --secondary-background: #14181B;
  --accent1: rgba(75, 57, 239, 0.3);
  --accent2: rgba(57, 210, 192, 0.3);
  --accent3: rgba(238, 139, 96, 0.3);
  --accent4: #262D34;
  --text-color: var(--primary-text);
  --text-muted: var(--secondary-text);
  --bg-color: var(--primary-background);
  --surface: var(--secondary-background);
  --border-color: var(--alternate);
  --shadow-color: rgba(0, 0, 0, 0.3);
}

* {
  transition: 
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    opacity var(--transition-base);
}

@keyframes rotate-ac-unit {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* Animation progress bar circulaire - Se remplit sur 5s, puis pause 1s à 0% (total 6s) */
@keyframes progress-smooth {
  0% { background: conic-gradient(var(--primary) 0%, var(--primary-background) 0%); }
  0.833% { background: conic-gradient(var(--primary) 1%, var(--primary-background) 1%); }
  1.667% { background: conic-gradient(var(--primary) 2%, var(--primary-background) 2%); }
  2.5% { background: conic-gradient(var(--primary) 3%, var(--primary-background) 3%); }
  3.333% { background: conic-gradient(var(--primary) 4%, var(--primary-background) 4%); }
  4.167% { background: conic-gradient(var(--primary) 5%, var(--primary-background) 5%); }
  5% { background: conic-gradient(var(--primary) 6%, var(--primary-background) 6%); }
  5.833% { background: conic-gradient(var(--primary) 7%, var(--primary-background) 7%); }
  6.667% { background: conic-gradient(var(--primary) 8%, var(--primary-background) 8%); }
  7.5% { background: conic-gradient(var(--primary) 9%, var(--primary-background) 9%); }
  8.333% { background: conic-gradient(var(--primary) 10%, var(--primary-background) 10%); }
  9.167% { background: conic-gradient(var(--primary) 11%, var(--primary-background) 11%); }
  10% { background: conic-gradient(var(--primary) 12%, var(--primary-background) 12%); }
  10.833% { background: conic-gradient(var(--primary) 13%, var(--primary-background) 13%); }
  11.667% { background: conic-gradient(var(--primary) 14%, var(--primary-background) 14%); }
  12.5% { background: conic-gradient(var(--primary) 15%, var(--primary-background) 15%); }
  13.333% { background: conic-gradient(var(--primary) 16%, var(--primary-background) 16%); }
  14.167% { background: conic-gradient(var(--primary) 17%, var(--primary-background) 17%); }
  15% { background: conic-gradient(var(--primary) 18%, var(--primary-background) 18%); }
  15.833% { background: conic-gradient(var(--primary) 19%, var(--primary-background) 19%); }
  16.667% { background: conic-gradient(var(--primary) 20%, var(--primary-background) 20%); }
  17.5% { background: conic-gradient(var(--primary) 21%, var(--primary-background) 21%); }
  18.333% { background: conic-gradient(var(--primary) 22%, var(--primary-background) 22%); }
  19.167% { background: conic-gradient(var(--primary) 23%, var(--primary-background) 23%); }
  20% { background: conic-gradient(var(--primary) 24%, var(--primary-background) 24%); }
  20.833% { background: conic-gradient(var(--primary) 25%, var(--primary-background) 25%); }
  21.667% { background: conic-gradient(var(--primary) 26%, var(--primary-background) 26%); }
  22.5% { background: conic-gradient(var(--primary) 27%, var(--primary-background) 27%); }
  23.333% { background: conic-gradient(var(--primary) 28%, var(--primary-background) 28%); }
  24.167% { background: conic-gradient(var(--primary) 29%, var(--primary-background) 29%); }
  25% { background: conic-gradient(var(--primary) 30%, var(--primary-background) 30%); }
  25.833% { background: conic-gradient(var(--primary) 31%, var(--primary-background) 31%); }
  26.667% { background: conic-gradient(var(--primary) 32%, var(--primary-background) 32%); }
  27.5% { background: conic-gradient(var(--primary) 33%, var(--primary-background) 33%); }
  28.333% { background: conic-gradient(var(--primary) 34%, var(--primary-background) 34%); }
  29.167% { background: conic-gradient(var(--primary) 35%, var(--primary-background) 35%); }
  30% { background: conic-gradient(var(--primary) 36%, var(--primary-background) 36%); }
  30.833% { background: conic-gradient(var(--primary) 37%, var(--primary-background) 37%); }
  31.667% { background: conic-gradient(var(--primary) 38%, var(--primary-background) 38%); }
  32.5% { background: conic-gradient(var(--primary) 39%, var(--primary-background) 39%); }
  33.333% { background: conic-gradient(var(--primary) 40%, var(--primary-background) 40%); }
  34.167% { background: conic-gradient(var(--primary) 41%, var(--primary-background) 41%); }
  35% { background: conic-gradient(var(--primary) 42%, var(--primary-background) 42%); }
  35.833% { background: conic-gradient(var(--primary) 43%, var(--primary-background) 43%); }
  36.667% { background: conic-gradient(var(--primary) 44%, var(--primary-background) 44%); }
  37.5% { background: conic-gradient(var(--primary) 45%, var(--primary-background) 45%); }
  38.333% { background: conic-gradient(var(--primary) 46%, var(--primary-background) 46%); }
  39.167% { background: conic-gradient(var(--primary) 47%, var(--primary-background) 47%); }
  40% { background: conic-gradient(var(--primary) 48%, var(--primary-background) 48%); }
  40.833% { background: conic-gradient(var(--primary) 49%, var(--primary-background) 49%); }
  41.667% { background: conic-gradient(var(--primary) 50%, var(--primary-background) 50%); }
  42.5% { background: conic-gradient(var(--primary) 51%, var(--primary-background) 51%); }
  43.333% { background: conic-gradient(var(--primary) 52%, var(--primary-background) 52%); }
  44.167% { background: conic-gradient(var(--primary) 53%, var(--primary-background) 53%); }
  45% { background: conic-gradient(var(--primary) 54%, var(--primary-background) 54%); }
  45.833% { background: conic-gradient(var(--primary) 55%, var(--primary-background) 55%); }
  46.667% { background: conic-gradient(var(--primary) 56%, var(--primary-background) 56%); }
  47.5% { background: conic-gradient(var(--primary) 57%, var(--primary-background) 57%); }
  48.333% { background: conic-gradient(var(--primary) 58%, var(--primary-background) 58%); }
  49.167% { background: conic-gradient(var(--primary) 59%, var(--primary-background) 59%); }
  50% { background: conic-gradient(var(--primary) 60%, var(--primary-background) 60%); }
  50.833% { background: conic-gradient(var(--primary) 61%, var(--primary-background) 61%); }
  51.667% { background: conic-gradient(var(--primary) 62%, var(--primary-background) 62%); }
  52.5% { background: conic-gradient(var(--primary) 63%, var(--primary-background) 63%); }
  53.333% { background: conic-gradient(var(--primary) 64%, var(--primary-background) 64%); }
  54.167% { background: conic-gradient(var(--primary) 65%, var(--primary-background) 65%); }
  55% { background: conic-gradient(var(--primary) 66%, var(--primary-background) 66%); }
  55.833% { background: conic-gradient(var(--primary) 67%, var(--primary-background) 67%); }
  56.667% { background: conic-gradient(var(--primary) 68%, var(--primary-background) 68%); }
  57.5% { background: conic-gradient(var(--primary) 69%, var(--primary-background) 69%); }
  58.333% { background: conic-gradient(var(--primary) 70%, var(--primary-background) 70%); }
  59.167% { background: conic-gradient(var(--primary) 71%, var(--primary-background) 71%); }
  60% { background: conic-gradient(var(--primary) 72%, var(--primary-background) 72%); }
  60.833% { background: conic-gradient(var(--primary) 73%, var(--primary-background) 73%); }
  61.667% { background: conic-gradient(var(--primary) 74%, var(--primary-background) 74%); }
  62.5% { background: conic-gradient(var(--primary) 75%, var(--primary-background) 75%); }
  63.333% { background: conic-gradient(var(--primary) 76%, var(--primary-background) 76%); }
  64.167% { background: conic-gradient(var(--primary) 77%, var(--primary-background) 77%); }
  65% { background: conic-gradient(var(--primary) 78%, var(--primary-background) 78%); }
  65.833% { background: conic-gradient(var(--primary) 79%, var(--primary-background) 79%); }
  66.667% { background: conic-gradient(var(--primary) 80%, var(--primary-background) 80%); }
  67.5% { background: conic-gradient(var(--primary) 81%, var(--primary-background) 81%); }
  68.333% { background: conic-gradient(var(--primary) 82%, var(--primary-background) 82%); }
  69.167% { background: conic-gradient(var(--primary) 83%, var(--primary-background) 83%); }
  70% { background: conic-gradient(var(--primary) 84%, var(--primary-background) 84%); }
  70.833% { background: conic-gradient(var(--primary) 85%, var(--primary-background) 85%); }
  71.667% { background: conic-gradient(var(--primary) 86%, var(--primary-background) 86%); }
  72.5% { background: conic-gradient(var(--primary) 87%, var(--primary-background) 87%); }
  73.333% { background: conic-gradient(var(--primary) 88%, var(--primary-background) 88%); }
  74.167% { background: conic-gradient(var(--primary) 89%, var(--primary-background) 89%); }
  75% { background: conic-gradient(var(--primary) 90%, var(--primary-background) 90%); }
  75.833% { background: conic-gradient(var(--primary) 91%, var(--primary-background) 91%); }
  76.667% { background: conic-gradient(var(--primary) 92%, var(--primary-background) 92%); }
  77.5% { background: conic-gradient(var(--primary) 93%, var(--primary-background) 93%); }
  78.333% { background: conic-gradient(var(--primary) 94%, var(--primary-background) 94%); }
  79.167% { background: conic-gradient(var(--primary) 95%, var(--primary-background) 95%); }
  80% { background: conic-gradient(var(--primary) 96%, var(--primary-background) 96%); }
  80.833% { background: conic-gradient(var(--primary) 97%, var(--primary-background) 97%); }
  81.667% { background: conic-gradient(var(--primary) 98%, var(--primary-background) 98%); }
  82.5% { background: conic-gradient(var(--primary) 99%, var(--primary-background) 99%); }
  83.333% { background: conic-gradient(var(--primary) 100%, var(--primary-background) 100%); }
  83.334% { background: conic-gradient(var(--primary) 0%, var(--primary-background) 0%); }
  100% { background: conic-gradient(var(--primary) 0%, var(--primary-background) 0%); }
}

.progress-circle {
  width: 22.5px;
  height: 22.5px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) 0%, var(--primary-background) 0%);
  animation: progress-smooth 6s linear infinite;
  animation-play-state: paused;
  position: relative;
}

.progress-circle::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 17.5px;
  height: 17.5px;
  border-radius: 50%;
  background: var(--primary-background);
}

.rotating-ac-unit {
  animation: rotate-ac-unit 0.5s ease-in infinite;
  animation-play-state: paused;
}