body {
  /* Vos autres styles existants... */
  background-color: var(--bg);
  color: var(--text);
  /* Ajoute un fondu doux lors du changement de thème */
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}


/* 2. Création du rayon lumineux (le Shimmer) */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  /* Il commence à l'extérieur du bouton, à gauche */
  width: 50%;
  /* Largeur du rayon lumineux */
  height: 100%;

  /* Dégradé : transparent -> blanc semi-transparent au centre -> transparent */
  background: linear-gradient(to right,
      rgba(23, 0, 9, 0.018) 0%,
      rgba(240, 179, 200, 0.365) 50%,
      rgba(12, 0, 4, 0.06) 100%);

  /* On l'incline un peu pour un effet plus dynamique et naturel */
  transform: skewX(-25deg);

  /* On lance l'animation en boucle (infinite) */
  animation: shimmer-effect 3s infinite;
}

/* 3. L'animation clé (Keyframes) */
@keyframes shimmer-effect {
  0% {
    left: -100%;
    /* Position de départ */
  }

  70% {
    left: 200%;
    /* Il traverse le bouton rapidement */
  }

  100% {
    left: 200%;
    /* Il reste caché le reste du temps pour créer une pause entre deux éclats */
  }
}

/* 4. Effet de clic (Active) */
.btn:active {
  transform: scale(0.96);
  /* Le bouton s'enfonce légèrement au clic */
}


/* =========================================================
   Effets de survol — cartes (landing et pages applicatives)
   ========================================================= */

.card:hover {
  transform: translateY(-5px);
  /* La carte se soulève légèrement */
  box-shadow: 0 10px 30px var(--brand-primary);
  /* Ombre plus prononcée */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
  /* Transition douce */
}


.public-feature-grid article:hover {
  transform: translateY(-5px);
  /* La carte se soulève légèrement */
  box-shadow: 0 10px 30px var(--brand-primary);
  /* Ombre plus prononcée */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
  /* Transition douce */
}

/* --- Bouton Dark/Light Mode --- */
.theme-toggle-btn {
  /* Utilisation de vos variables CSS */
  background-color: var(--surface-soft);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  /* Rend le bouton parfaitement rond */
  width: var(--space-10);
  /* 40px selon vos variables */
  height: var(--space-10);
  font-size: 18px;
  cursor: pointer;

  /* Centrage de l'icône */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Animations fluides */
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;

  /* Espacement si besoin par rapport aux boutons de connexion */
  margin-left: var(--space-2);
}

/* Effet au survol */
.theme-toggle-btn:hover {
  background-color: var(--surface-muted);
  color: var(--text);
  /* L'icône devient plus contrastée */
  transform: translateY(-2px);
  box-shadow: var(--shadow-subtle);
}

/* Effet au clic */
.theme-toggle-btn:active {
  transform: scale(0.95);
}

/* Optionnel : Quand on est en dark mode, on donne la couleur or au soleil */
[data-theme="dark"] #theme-icon[data-icon="sun"] {
  color: var(--brand-gold);
}

.production:hover {
  transform: translateY(-5px);
  /* La carte se soulève légèrement */
  box-shadow: 0 10px 30px var(--brand-primary-strong);
  /* Ombre plus prononcée */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  /* Transition douce */
}