/*
  =====================================================
  Fichier : details-animated.css
  Fonction : Styles et animations pour les éléments <details>/<summary>
             - Icône animée (📂)
             - Effet "wiggle"
             - Gestion du survol et de l’ouverture
  Auteur  : Erwan ROUJEAN - 7minutesdesciences.fr
  Version : 1.0
  Date    : 2025-11-02
  =====================================================
*/

@keyframes wiggle {
  0%, 85%, 100% { transform: rotate(0deg); }
  86% { transform: rotate(-12deg); }
  87.5% { transform: rotate(12deg); }
  89% { transform: rotate(-8deg); }
  90.5% { transform: rotate(8deg); }
  92% { transform: rotate(-4deg); }
  93.5% { transform: rotate(4deg); }
  95% { transform: rotate(0deg); }
}

#activities details {margin-top: 5px;}

/* Apparence générale du summary */
#activities details summary {
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
  transition: background .2s, box-shadow .2s;
  font-family: Oswald;
  font-weight: bold;
  font-size: 16pt;
  color: #666;
}

#exercices details summary {
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
  transition: background .2s, box-shadow .2s;
  font-family: Oswald;
  font-weight: bold;
  font-size: 14pt;
  color: #666;
}

details summary:hover {
  background: #f9f9f9;
  box-shadow: 0 0 0 2px #8ebfcc;
}

details[open] > summary {
  background: #f9f9f9;
  box-shadow: 0 0 0 2px #f0e68c;
}

/* Icône animée 📂 */
details.animated summary::before {
  content: "📂";
  font-size: 20px;
  margin-right: 6px;
  display: inline-block;
  transform-origin: center;
  animation: wiggle 4s ease-in-out infinite;
}

/* Variante petite icône */
details.animated.small > summary::before {
  font-size: 6px;
  margin-right: 0;
}

details.animated.small > summary {
  background: none !important;
  box-shadow: none !important;
  cursor: default;
}

/* Icône tournée quand ouvert */
details.animated[open] > summary::before {
  transform: rotate(180deg);
  animation: none;
}

/* Stop l'animation après interaction */
details.animated.clicked > summary::before {
  animation: none;
}