/* Style général */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f9;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    min-height: 100vh;
}

/* Titre */
h1 {
    font-size: 2.5em;
    color: #d35400;
    margin-bottom: 20px;
}

/* Conteneur des slides */
#slides {
    width: 90%;
    max-width: 800px;
    margin-bottom: 20px;
}

.slide {
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    position: relative;
}

/* Conteneur des contenus dans les slides */
.content-container {
    display: flex;
    flex-direction: column;
}

/* Conteneur pour les images */
.image-container {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.image-container input {
    margin-top: 5px;
}

/* Boutons dans les slides */
.add-content,
.add-image {
    background-color: #3498db; /* Couleur bleue */
    color: white;
    border: none;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.delete-slide {
    background-color: #e74c3c; /* Couleur rouge */
    color: white;
    border: none;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.add-content:hover,
.add-image:hover,
.delete-slide:hover {
    opacity: 0.9;
}


.add-content,
.add-image,
.delete-slide,
.generate-button {
    font-family: 'Arial', sans-serif; /* Définir la police pour les boutons */
    font-size: 16px; /* Taille de la police pour les boutons */
    /* Autres styles... */
}

/* Style pour les inputs et textarea */
input[type="text"],
textarea {
    font-family: 'Arial', sans-serif; /* Police pour les inputs et textarea */
    font-size: 16px; /* Taille de la police par défaut */
    padding: 10px; /* Padding pour le confort */
    border: 1px solid #ccc; /* Bordure */
    border-radius: 5px; /* Coins arrondis */
}

/* Taille de la police pour le titre de la slide */
input[type="text"] {
    font-size: 18px; /* Taille de la police plus grande pour le titre */
}

/* Taille de la police pour le textarea */
textarea {
    font-size: 16px; /* Taille de la police pour le textarea */
    resize: none; /* Empêche le redimensionnement */
    width: 100%; /* Prend toute la largeur */
    height: 100px; /* Hauteur fixe */
}



/* Conteneur des boutons pour ajouter une slide et générer le PowerPoint */
.button-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    margin-top: 20px;
}

.button-container button {
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Styles spécifiques pour les boutons */
.button-container .left button {
    background-color: #3498db; /* Couleur bleue pour le bouton d'ajout de slide */
    color: white;
}

.button-container .right .generate-button {
    background-color: #2ecc71; /* Couleur verte pour le bouton de génération */
    color: white;
}

.button-container button:hover {
    opacity: 0.9;
}

.right .generate-button:hover {
    opacity: 0.9; /* Effet au survol */
}



/* textarea no resize */
.content-container textarea {
    resize: none; /* Empêche le redimensionnement */
    width: 95%; /* Optionnel : pour s'assurer que le textarea prend toute la largeur */
    height: 100px; /* Optionnel : définir une hauteur fixe */
    padding-right: 10px;
    padding-left: 10px;/* Optionnel : ajouter un peu de padding pour le confort */
    border: 1px solid #ccc; /* Optionnel : définir une bordure */
    border-radius: 5px; /* Optionnel : arrondir les coins */
    font-family: 'Arial', sans-serif; /* Police pour les inputs et textarea */
    font-size: 16px; /* Optionnel : définir la taille de la police */
}


.slide-number {
    font-size: 20px; /* Taille de la police pour le numéro de la slide */
    font-weight: bold; /* Mettre le numéro en gras */
    color: #2c3e50; /* Couleur du texte */
    margin-bottom: 10px; /* Espacement en bas */
}

.drag-instruction {
    font-size: 14px; /* Taille de la police */
    color: #7f8c8d; /* Couleur grise */
    margin-top: 10px; /* Espacement au-dessus */
    text-align: center; /* Centrer le texte */
}

.paragraph-container {
    display: flex;
    align-items: center; /* Pour aligner l'icône et le textarea au centre */
    margin-bottom: 10px; /* Espacement entre les blocs de texte */
}

.paragraph-container textarea {
    flex-grow: 1; /* Le textarea prendra toute la largeur restante */
    resize: none; /* Désactive le redimensionnement */
}