/* Style général pour la page */
body {
  margin: 0; /* Supprime les marges par défaut du navigateur */
  padding: 0; /* Supprime les espacements internes par défaut */
  font-family: 'Poppins', serif; /* Police principale élégante */
  font-weight: bold; /* Texte affiché en gras */
  background-size: cover; /* L'image de fond couvre toute la zone visible */
  background-position: center; /* Centre l'image de fond */
  background-color: #000000; /* Couleur de fond si l'image ne couvre pas tout */
  height: 100vh; /* La page occupe toute la hauteur de l'écran */
  display: flex; /* Active Flexbox pour organiser les enfants */
  flex-direction: column; /* Place les éléments verticalement en colonne */
  justify-content: space-between; /* Répartit l'espace entre les éléments */
  align-items: center; /* Centre horizontalement les éléments */
  color: white; /* Couleur principale du texte */
  text-align: center; /* Centre le texte dans son conteneur */
  overflow: hidden; /* Empêche le défilement de la page */
}

/* Empêche le défilement sur tout le document */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Désactive le défilement */
  height: 100%; /* Assure que la page occupe toute la hauteur de l'écran */
  width: 100%; /* Assure que la page occupe toute la largeur de l'écran */
}
/* Superposition semi-transparente pour l'arrière-plan */
.overlay {
  position: absolute; /* Positionne par rapport à l'élément parent */
  inset: 0; /* Remplit tout l'espace disponible (top, right, bottom, left = 0) */
  background-color: rgba(0, 0, 0, 0.5); /* Fond noir semi-transparent */
  background-size: cover; /* L'image de fond couvre toute la zone visible */
  display: flex; /* Active Flexbox pour centrer les enfants */
  justify-content: center; /* Centre les enfants horizontalement */
  align-items: center; /* Centre les enfants verticalement */
}

/* Style pour le conteneur du rappel */
.rappel {
  position: fixed; /* Reste fixe à une position spécifique dans la fenêtre */
  top: 30%; /* Place le conteneur au tiers de la hauteur de l'écran */
  left: 50%; /* Centre horizontalement le conteneur */
  transform: translate(-50%, -33%); /* Ajuste pour un centrage parfait */
  line-height: 1.6; /* Définit l'espacement entre les lignes de texte */
  text-align: center; /* Centre le texte */
  font-size: 0.9em; /* Taille du texte légèrement réduite */
  padding: 40px; /* Ajoute un espace autour du contenu */
  width: 90%; /* Limite la largeur à 90% de la fenêtre */
  max-width: 700px; /* Limite la largeur maximale pour éviter un conteneur trop large */
  margin-top: -10px; /* Ajuste l'espace au-dessus du conteneur */
}

/* Style pour l'image Bismillah */
.bismillah {
  filter: brightness(0) invert(1); /* Rend l'image blanche pour un fond sombre */
  max-width: 200px; /* Limite la largeur maximale de l'image */
  margin: 0 auto; /* Centre l'image horizontalement */
  height: auto; /* Maintient les proportions de l'image */
  margin-bottom: 0px !important; /* Supprime tout espace sous l'image */
}

/* Style pour le texte principal (entouré de guillemets) */
.rappel .texte {
  margin-top: 0 !important; /* Supprime tout espace avant le texte */
  font-size: 1.4em; /* Augmente légèrement la taille du texte */
  font-style: italic; /* Texte affiché en italique */
  quotes: "«" "»"; /* Définit les guillemets français */
}

/* Ajoute les guillemets ouvrants avant le texte */
.rappel .texte:before {
  content: open-quote; /* Ajoute les guillemets français ouvrants */
}

/* Ajoute les guillemets fermants après le texte */
.rappel .texte:after {
  content: close-quote; /* Ajoute les guillemets français fermants */
}

/* Style pour la source du texte (texte en italique) */
.rappel em {
  margin-top: 0 !important; /* Supprime tout espace avant le texte */
  font-size: 0.9em; /* Réduit légèrement la taille */
  color: #dcdcdc; /* Couleur gris clair */
}

/* Style pour le logo */
.logo {
  position: fixed; /* Position fixe pour que le logo reste visible en bas */
  bottom: 40px; /* Distance entre le bas de l'écran et le logo */
  left: 50%; /* Centre le logo horizontalement */
  transform: translateX(-50%); /* Ajuste le centrage horizontalement */
  width: 40px; /* Taille fixe du logo */
}

/* Style pour le footer */
footer {
  position: fixed; /* Reste fixe à une position spécifique dans la fenêtre */
  text-align: center; /* Centre le texte du footer */
  font-family: 'Amiri', serif; /* Police élégante pour le footer */
  font-size: 0.9rem; /* Taille du texte légèrement réduite */
  color: #686767; /* Texte en blanc */
  bottom: 1px; /* Distance entre le bas de l'écran et le logo */
}