:root{
    /* Couleurs principales */
    --background: #FAFAFA;
    --background-gradient: linear-gradient(135deg, #4760d2 0%, #5e2c91 100%);
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #673e91 100%);
    --primary-color: #667eea;
    --secondary-color: #673e91;
  
  /* Couleurs secondaires */
  --white: #ffffff;
  --secondary: #e5e7eb;
  --text-primary: #1C2736;
  --text-secondary: #666666;

  --primary:#764ba2;

  /* Surfaces */
  --bg:#0f1020;
  --bg-soft:#151735;

  /* Text */
  --text-muted:#c9cbd3;
  --text-invert:#1a1a1a;

  /* Transitions */
  --t-fast:.2s cubic-bezier(.2,.6,.2,1);
  --t-slow:.6s cubic-bezier(.2,.6,.2,1);
}

/*----------------------------------------------------*/

* {
  margin:0;
  padding:0;
  box-sizing:border-box
}

body{
  font-family:"Open Sans", sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background-attachment: fixed;
  transition: background var(--t-slow), color var(--t-fast);
  overflow-x: hidden;
}

body.community{
  background:
    radial-gradient(1200px 800px at 0% 0%, rgba(24,0,77,.55), transparent 60%),
    radial-gradient(1200px 800px at 100% 0%, rgba(99,36,141,.55), transparent 60%),
    linear-gradient(170deg, rgba(24,0,77,.9), rgba(99,36,141,.9));
}

body.professional {
  min-height: 100vh;
  background:
    var(--background-gradient)
}

/*----------------------------------------------------*/

#particles{
  position: fixed;
  inset: 0;
  z-index: -2;
}

/*----------------------------------------------------*/

.container {
  max-width: 45vw;
  margin: 0 auto;
  padding: 120px 16px 40px;
}

/*----------------------------------------------------*/

.header { 
  text-align:center;
  margin: 0 0 5vh;
}

.header h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: #FAFAFA;
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing:.2px;
  line-height:1.5;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.512);
}

.header p {
  color: #d2d4dd;
  font-size: 1.4vh;
  max-width: 670px; 
  margin: 10px auto 0;
}

/*----------------------------------------------------*/

.tab-container {
  background: var(--secondary);
  outline: 8px solid rgba(255,255,255,.25);
  border-radius: 20px;
  padding: 18px;
}

.tab-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; 
  margin-bottom: 14px;
}

.tab-button {
  font-family: "Montserrat", sans-serif;
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px; 
  font-weight: 700;
  font-size: 1.4vh;
  letter-spacing: .2px;
  color: var(--text-primary);
  background: var(--background); 
  cursor: pointer;
}

.tab-button:hover { 
  transform: translateY(-2px) 
}

.tab-button.active {
  background: #ececec;
  color: var(--text-primary);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

.tab-content { 
  display: none;
  animation: fadeIn .5s ease both 
}

.tab-content.active { 
  display: block 
}

/*----------------------------------------------------*/

.changelog-item{
  background: var(--background);
  border-radius:16px; 
  padding: 18px 16px; 
  margin: 14px 6px;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  position: relative;
}

.changelog-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 50px rgba(0,0,0,.25);
}

/*----------------------------------------------------*/

.changelog-item.latest.commu {
  border: 4px solid var(--primary-color);
}

.changelog-item.latest.pro {
  position: relative;
  padding: 1rem;
  overflow: hidden;
}

.changelog-item.latest.pro::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 5px;
  background: linear-gradient(135deg, #869cff, #8232d2);
  background-size: 300% 300%;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; 
  mask-composite: exclude; 
  pointer-events: none;
  animation: gradientMove 3s linear infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/*----------------------------------------------------*/

.changelog-header {
  display: flex;
  gap: 10px; 
  align-items: center; 
  justify-content: space-between; 
  margin-bottom: 8px;
}

.badge-update { 
  margin: 0;
  padding: 6px 12px; 
  border-radius: 50px;
  background: var(--primary-gradient);
  color: #ffffff;
}

.version { 
  font-weight: 700; 
  letter-spacing: .3px;
}

.date {
  font-size: .9rem; 
  padding: 6px 10px; 
  border-radius: 999px;
  background: var(--secondary);
}

.changelog-content ul { 
  list-style: none;
  padding-left: 15px; 
  color: var(--text-primary) 
}

.changelog-content li { 
  margin: 8px 0; 
  display: flex; 
  align-items: flex-start; 
  gap: 8px 
}

.changelog-content li.new::before {
  content: "\f055"; /* Nouveau */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #4CAF50;
  margin-right: 6px;
}

.changelog-content li.improvement::before {
  content: "\f056"; /* Amélioration */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #FF9800;
  margin-right: 6px;
}

.changelog-content li.fix::before {
  content: "\f013"; /* Correction */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #2196F3;
  margin-right: 6px;
}

/*----------------------------------------------------*/

@keyframes fadeIn{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}