/* General body style */
body {
  font-family: sans-serif;
  text-align: center;
  margin: 0;
  /* Ajout pour une meilleure compatibilité */
  -webkit-text-size-adjust: 100%; /* Safari and Chrome */
  -moz-text-size-adjust: 100%; /* Firefox */
  -ms-text-size-adjust: 100%; /* IE 10+ */
  text-size-adjust: 100%; /* Standard property */
}

/* Header Styles */
header {
  background-color: #b0b0b0;
  padding: 20px;
  text-align: center;
}

header .logo {
  display: inline-block;
  margin-right: 20px;
}

header .logo img {
  max-height: 80px;
  vertical-align: middle;
}

header h1 {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

/* Container Styles */
.container {
  display: flex;
  min-height: calc(100vh - 150px);
  /* Ajustement pour les petits écrans */
  flex-direction: row; /* Par défaut */
}

/* Sidebar Styles */
.sidebar {
  width: 340px;
  padding: 20px;
  background-color: #eee;
}

.sidebar .ad {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: white;
}

.sidebar .ad img {
  max-width: 100%;
  height: auto;
}

/* Content Styles */
.content {
  flex: 1;
  padding: 20px;
}

/* Styles pour le bouton */
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #388E3C;
}

/* Styles pour le bouton "Choose a file" */
input[type="file"] {
  /* Taille et positionnement de base de l'élément input */
  width: 200px;
  height: 50px;
  margin: 8px 0; /* Marge pour l'espacement */
  position: relative; /* Positionnement relatif pour permettre le positionnement absolu du ::before */
  overflow: hidden; /* Masquer le bouton de fichier par défaut */

  /* Suppression des styles de fond et de bordure de l'élément input */
  background-color: transparent;
  border: none;

  /* Important: Rendre l'input transparent pour afficher le pseudo-élément à la place */
  opacity: 0; /* Rend l'element invisible */
  cursor: pointer; /* Change le curseur en main pour indiquer qu'il est cliquable */
  z-index: 0; /* Input derrière le pseudo element */
}

/* Cacher le bouton de téléchargement de fichier natif (spécifique à WebKit) */
input[type="file"]::-webkit-file-upload-button {
  visibility: hidden;
}

.file-input-wrapper {
  position: relative;
  width: 200px;
  height: 50px;
  display: inline-block;
}

/* Ajoutez ces styles pour aligner les boutons */
.file-input-wrapper {
  position: relative;
  width: 200px;
  height: 50px;
  display: inline-block;
  vertical-align: middle;
  margin: 8px 0;
}

/* Ajoutez une marge à droite pour l'espacement entre les boutons */
.file-input-wrapper {
  margin-right: 10px;
}

.file-input-wrapper .file-label {
  display: block;
  background-color: #4CAF50; /* Vert */
  color: white;
  border: none;
  border-radius: 5px;
  padding: 12px 20px;
  width: 100%;
  height: 100%;
  line-height: 25px; /* Ajusté pour centrer verticalement le texte */
  text-align: center;
  cursor: pointer;
  font-weight: normal;
  font-size: 16px;
  box-sizing: border-box;
  /* Transition pour une animation fluide */
  transition: background-color 0.3s ease;
}

/* Style au survol du bouton */
.file-input-wrapper .file-label:hover {
  background-color: #45a049; /* Vert plus foncé */
}


/* Styles for the "Convert" button */
#convertButton {
  width: 200px;
  height: 50px;
  background-color: #008CBA; /* Blue */
  color: white;
  padding: 12px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
  /* Transition pour une animation fluide */
  transition: background-color 0.3s ease;
}

#convertButton:hover {
  background-color: #005f75;
}

/* Styles for the loading indicator */
#loading {
  margin-top: 20px;
  font-weight: bold;
}

/* Result Styles */
#result {
  margin-top: 20px;
}

/* Amélioration des conteneurs de texte */
.text-container {
  width: 70%;
  margin: 30px auto; /* Plus d'espacement vertical */
  background-color: #f5f5f5;
  border-radius: 10px; /* Coins plus arrondis */
  padding: 25px; /* Plus de padding intérieur */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12); /* Ombre plus subtile */
  text-align: left;
  transition: transform 0.2s ease; /* Animation légère au survol */
}

.text-container:hover {
  transform: translateY(-2px); /* Léger effet de survol */
}

.text-container h2 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #ddd; /* Ligne de séparation sous le titre */
  padding-bottom: 10px;
  margin-bottom: 15px;
}

/* Indicateur de progression */
.progress-bar {
  width: 70%;
  height: 10px;
  margin: 15px auto;
  background-color: #eee;
  border-radius: 5px;
  overflow: hidden;
  display: none; /* Caché par défaut */
}

.progress-bar-fill {
  height: 100%;
  background-color: #4CAF50;
  width: 0%;
  transition: width 0.3s ease;
}

/* Footer Styles */
footer {
  background-color: #333;
  color: white;
  padding: 50px;
  text-align: center;
}

footer nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

footer nav ul li {
  display: inline;
  /* Augmenter la marge pour espacer les liens */
  margin: 0 20px; /* Ajout de marge à gauche et à droite */
}

footer nav ul li a {
  color: white;
  text-decoration: none;
  /* Ajout de la ligne au survol */
}

footer nav ul li a:hover {
  text-decoration: underline;
}

/* Media Queries pour la responsivité */

/* Écrans plus petits que 768px (smartphones) */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Empile la sidebar et le contenu */
  }

  .sidebar {
    width: 100%; /* Prend toute la largeur */
    padding: 10px;
  }

  .content {
    padding: 10px;
  }

  .text-container {
    width: 90%; /* Prend plus de largeur */
    padding: 20px;
  }

  header {
      padding: 10px;
  }

  header h1 {
      font-size: 1.5em; /* Réduire la taille du titre */
  }

  .file-input-wrapper,
  #convertButton {
      width: 100%; /* Boutons prennent toute la largeur */
      margin-right: 0; /* Supprimer la marge à droite */
      margin-bottom: 10px; /* Ajouter une marge en dessous */
  }
}

/* Écrans entre 768px et 992px (tablettes) */
@media (min-width: 768px) and (max-width: 992px) {
    .text-container {
      width: 85%;
    }
}

/* Écrans plus grands que 992px (ordinateurs) */
@media (min-width: 992px) {
  /* Reset des styles potentiellement modifiés par les media queries précédentes */
  .container {
    flex-direction: row;
  }

  .sidebar {
    width: 340px;
  }

  .content {
    padding: 20px;
  }

  .text-container {
    width: 70%;
  }

  .file-input-wrapper,
  #convertButton {
      width: 200px;
      margin-right: 10px;
      margin-bottom: 8px;
  }
}

/* Gestion des images responsives */
img {
  max-width: 100%;
  height: auto;
}