/* Personnalisations additionnelles pour le thème Moon de reveal.js */

/* Réduction de la taille des titres et optimisation de l'espace */
.reveal h1 {
  font-size: 2em; /* Taille réduite de 2.2em à 2em */
  margin-bottom: 0.15em; /* Marge inférieure réduite */
  margin-top: 0; /* Suppression de la marge supérieure */
  padding-top: 0; /* Suppression du padding supérieur */
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 5px rgba(0, 0, 0, 0.9); /* Amélioration de la lisibilité du texte sur les images d'arrière-plan */
}

/* Positionnement du contenu plus haut dans la diapositive */
.reveal .slides section {
  padding-top: 0; /* Supprime le padding supérieur par défaut */
}

/* Ajustement global des espacements */
.reveal .slides {
  width: 95%;
  max-width: 1200px;
  height: 100%; /* Utilise toute la hauteur disponible */
  top: 0; /* Commence depuis le haut */
  font-size: 1.4rem; /* Taille de base pour assurer le bon fonctionnement des media queries */
}

/* Positionnement vertical optimisé */
.reveal.center .slides {
  margin-top: -5%; /* Remonte tout le contenu des slides */
}

/* Cartes d'activité optimisées */
.reveal .slides section .activity-card {
  border-radius: 8px;
  margin-bottom: 5px; /* Réduit de 10px à 5px */
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  overflow: hidden;
}

.reveal .slides section .activity-card p {
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7), 0 0 3px rgba(0, 0, 0, 0.8); /* Améliorez la lisibilité du texte dans les cartes d'activité */
  font-weight: 500;
}

/* Section de description avec son propre arrière-plan */
.reveal .slides section .activity-description {
  background-color: rgba(120, 81, 169, 0.35); /* Augmentation légère de l'opacité */
  padding: 10px 20px; /* Padding supérieur et inférieur réduit de 15px à 10px */
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(187, 134, 252, 0.3);
}

/* Container des informations avec arrière-plan distinct */
.reveal .slides section .activity-info-container {
  background-color: rgba(43, 21, 70, 0.8); /* Fond plus opaque pour mieux lire */
  padding: 8px 20px; /* Padding supérieur et inférieur réduit de 12px à 8px */
  border-radius: 0 0 8px 8px;
}

.reveal .slides section .activity-title {
  color: #BB86FC;
  margin-bottom: 10px;
}

/* Info des activités mieux structurées */
.reveal .slides section .activity-info {
  color: #CDB9F0;
  font-size: 0.8em;
  margin-bottom: 5px;
  display: inline-block;
  margin-right: 15px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6); /* Amélioration de la visibilité des infos d'activité */
}

/* Lien stylisé et placé entre les deux sections */
.reveal .slides section .activity-card a {
  color: #03DAC6;
  transition: all 0.3s ease;
  display: inline-block;
  margin-top: 8px;
  margin-left: 20px;
  margin-bottom: 8px;
  font-weight: 500;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6); /* Assurer la lisibilité des liens même sur des arrière-plans clairs */
}

.reveal .slides section a:hover {
  color: #3EFFF6;
  text-decoration: underline;
}

/* Style plus compact pour le corps du texte */
.reveal p {
  margin: 0.3em 0; /* Marge réduite de 0.5em à 0.3em */
  line-height: 1.35; /* Interligne réduit de 1.4 à 1.35 */
}

/* Disposition plus efficace sur mobile */
@media (max-width: 600px) {
  .reveal .slides section .activity-description,
  .reveal .slides section .activity-info-container {
    padding: 10px;
  }
}

/* Organisation horizontale des informations sur écrans larges */
@media screen and (min-width: 800px) {
  .reveal .slides section .activity-info-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }
  
  .reveal .slides section .activity-info {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-right: 20px !important;
    margin-bottom: 8px !important;
  }
}

/* Style pour le cadre informatif */
.info-box {
  background-color: rgba(3, 169, 244, 0.2); /* Bleu semi-transparent */
  border-left: 4px solid #03A9F4;
  padding: 10px;
  margin: 15px auto;
  max-width: 90%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.info-icon {
  font-size: 2.5em;
  margin-right: 15px;
  line-height: 1;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.info-content {
  font-size: 0.9em;
  color: #F0E6FF;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7); /* Amélioration de la lisibilité */
}