/* Adaptation automatique des images Quill à la largeur du conteneur */
.quill-content img, 
.card-info img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 10px 0;
  border-radius: 4px; /* Optionnel : arrondit légèrement les coins */
}

/* 1. Forcer Quill à prendre 100% de la largeur du formulaire */
.quill-editor,
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 2. Zone d'édition : fond blanc, alignée à gauche et occupe tout l'espace */
.ql-editor {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  text-align: left !important;
  cursor: text;
}

/* 3. Forcer l'alignement à gauche pour les éléments internes */
.ql-editor p,
.ql-editor ol,
.ql-editor ul {
  text-align: left !important;
}

/* 4. Barre d'outils (fond neutre) */
.ql-toolbar.ql-snow {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
  text-align: left !important;
}

/* 5. Boutons de la barre d'outils */
.ql-toolbar.ql-snow button {
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 3px 5px !important;
  box-shadow: none !important;
  display: inline-block !important;
}

/* Couleur des icônes SVG en vert émeraude */
.ql-toolbar.ql-snow button .ql-stroke {
  stroke: #059669 !important;
}

.ql-toolbar.ql-snow button .ql-fill {
  fill: #059669 !important;
}

/* Effet survol léger */
.ql-toolbar.ql-snow button:hover {
  background-color: #e5e7eb !important;
  border-radius: 4px !important;
}
/* 1. Isolation du wrapper */
.quill-wrapper {
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  margin-bottom: 1rem;
}

/* 2. Forcer la largeur complète sur tous les éléments Quill */
.quill-wrapper .ql-toolbar.ql-snow,
.quill-wrapper .ql-container.ql-snow,
.quill-wrapper #quill-editor {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 3. Conteneur principal de l'éditeur (Fond blanc intégral) */
.quill-wrapper .ql-container.ql-snow {
  background-color: #ffffff !important;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* 4. Zone d'édition réactive et cliquable sur TOUTE la surface */
.quill-wrapper .ql-editor {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  min-height: 200px !important;
  width: 100% !important;
  font-size: 14px;
  padding: 12px 15px !important;
  text-align: left !important;
  cursor: text !important;
}

/* 5. Réinitialiser la mise en page des paragraphes internes */
.quill-wrapper .ql-editor p,
.quill-wrapper .ql-editor ul,
.quill-wrapper .ql-editor ol {
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* 6. Barre d'outils */
.quill-wrapper .ql-toolbar.ql-snow {
  background-color: #f9fafb !important;
  border-color: #ccc !important;
  text-align: left !important;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Icones et boutons */
.quill-wrapper .ql-toolbar button {
  width: 28px !important;
  height: 24px !important;
  padding: 3px 5px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-block !important;
}

.quill-wrapper .ql-toolbar button .ql-stroke {
  stroke: #059669 !important;
}

.quill-wrapper .ql-toolbar button .ql-fill {
  fill: #059669 !important;
}

/* Positionnement du popover du picker */
.emoji-picker-container {
  display: none;
  position: absolute;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

/* Forcer la taille fixe sur mobile pour éviter le mode plein écran */
emoji-picker {
  width: 320px !important;
  height: 350px !important;
  max-width: 90vw; /* Évite de dépasser de l'écran sur les très petits téléphones */
}

* Couleur verte sur l'icône SVG par défaut */
.ql-toolbar .ql-emoji {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #059669; /* Remplace par ton code couleur vert exact s'il est différent */
}

/* Comportement au survol / au clic */
.ql-toolbar .ql-emoji:hover,
.ql-toolbar .ql-emoji:focus {
  color: #1b5e20; /* Vert un peu plus foncé au survol */
}
/* Force le vert sur le tracé SVG de l'émoji */
.ql-toolbar .ql-emoji svg,
.ql-toolbar .ql-emoji svg * {
  stroke: #059669 !important;
}