@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
body{
  font-family: "Quicksand", serif;
  max-width: 1200px;
  margin: 20px auto;
  /* text-align: center; */
}
canvas {
  display: none;
}
h1, h2, h3 {
  font-family: "Quicksand", serif;
  font-weight: bold;
  color: #333; /* Gris foncé pour une bonne lisibilité */
  margin-bottom: 2px; /* Espacement sous les titres */
}
h1 {
  font-size: 2.2em; /* Taille pour le titre principal */
  line-height: 1.2; /* Hauteur de ligne pour un meilleur espacement vertical */
  font-weight: 300;
}
h2 {
  font-size: 1.6em; /* Taille pour les sous-titres */
  line-height: 1.3;
  font-weight: 100;
}
h3 {
  font-size: 1em; /* Taille pour les sous-sections */
  line-height: 1em;
  font-weight: 100;
}
p {
  font-family: "Quicksand", serif;
  font-size: 1em; /* Taille par défaut pour le texte principal */
  line-height: 1.6; /* Hauteur de ligne pour une bonne lisibilité */
  color: #555; /* Gris moyen pour réduire la fatigue visuelle */
  margin-bottom: 15px; /* Espacement entre les paragraphes */
}
#preview {
    display: block;
    margin: 0 auto;
    max-width: 100%; /* Image toujours contenue dans le conteneur */
    max-height: 70vh; /* Limite à 70% de la hauteur de la fenêtre */
  }
  .container {
    /* text-align: center; */
    margin-bottom: 5px;
    width: 100% !important;
  }
  #step-3 {
    margin-top: 0px;
    max-height: 80vh; /* Limite globale à 80% de la hauteur de l'écran */
    overflow: auto; /* Ajoute un défilement si nécessaire */
    text-align: left; /* S'assure que le contenu du step 3 est aligné à gauche */
  }
  .cropper-container img {
    display: block;
    height: auto !important; /* Conserve les proportions de l'image */
    width: 100%; /* Adapte la largeur au conteneur */
    max-height: 100%; /* Limite à la hauteur du conteneur */
    max-width: 100%; /* Limite à la largeur du conteneur */
}
.cropper-container {
  width: 100%; /* Occupe toute la largeur disponible */
  max-width: 1200px; /* Largeur maximale pour la zone de travail */
  height: 600px; /* Hauteur fixe pour la zone de recadrage */
  overflow: hidden; /* Empêche les débordements */
  margin: 0 auto; /* Centre horizontalement */
  background-color: rgba(0, 0, 0, 0.1); /* Ajoute un fond clair */
}
.btn {
  display: inline-block;
  padding: 3px 10px;
  background-color: #555;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none; /* Pour les liens */
  font-family: "Quicksand", serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
  transition: all 0.3s ease-in-out; 
}
.btnsm {
  display: inline-block;
  /* padding: 5px 20px; */
  background-color: #555;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none; /* Pour les liens */
  font-family: "Quicksand", serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
  transition: all 0.3s ease-in-out; /* Animation des interactions */
}
.btn:hover {
  background-color: #333;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
  transform: translateY(-2px); /* Effet de "soulèvement" */
}
.btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
#controls .btn {
  margin: 5px;
  display: inline-block;
}
input:not([type="image" i], [type="range" i], [type="checkbox" i], [type="radio" i]) {
height:18px;
width:18px;
font-size: 14px;
}
.bo{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 8px;
  background-color: rgba(255,255,255,.65);
}
.bof{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  border-radius: 8px;
  background-color: rgba(255,255,255,.65);
}
.bo2{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 8px;
  width:100%;
  padding: 10px;
  background-color: rgba(255,255,255,.65);
}
.mba{
  padding-bottom: 10px;
}
.mta{
  margin-top: 20px;
  padding-top: 10px;
}
/* Masquer le champ file natif */
input[type="file"] {
  display: none;
}
/* Désactiver le label (optionnel) */
label.custom-file-upload.disabled {
  background-color: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
}
#controls {
  display: block;
  text-align: left; /* Aligne le contenu à gauche */
  margin: 10px 0; /* Espacement vertical */
  width: 100%; /* Utilise toute la largeur disponible */
  max-width: 100%; /* Ne dépasse pas la largeur parent */
}
.logo-and-text {
  display: block; /* Passage en mode block */
  text-align: left; /* Aligne le contenu à gauche */
  margin: 0; /* Ajustez la marge si nécessaire */
  /* Supprimez le gap qui n'est applicable qu'en flex */
}
.logo {
  max-width: 100px; /* Ajustez la taille selon vos besoins */
  height: auto;
  margin: 0; /* Supprime la marge à gauche */
}
.logo-and-text h2,
.logo-and-text h3 {
  text-align: left; /* Assure un alignement à gauche du texte */
}
.sig{
color:#333; 
font-size:12px; 
text-decoration: none;  
font-family: "Quicksand", serif;
}
.clignotant {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #555;
  border: 1px solid black;
  color:#fff;
  border-radius: 15px;
  margin-right: 5px;
}
.clignotant5 {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid black;
  color:#333;
  border-radius: 15px;
  margin-right: 5px;
}
.clignotant3 {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #555;
  border: 1px solid black;
  color:#fff;
  border-radius: 15px;
  margin-right: 5px;
  animation: clignoter 1s infinite;
  margin-right: 5px;
}
.clignotant2 {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #555;
  border: 1px solid black;
  color:#fff;
  border-radius: 15px;
  margin-right: 5px;
}
@keyframes clignoter {
  0% {
      opacity: 1;
  }
  30% {
      opacity: 0;
  }
  60% {
      opacity: 1;
  }
}
.button-groups {
  display: flex; /* Alignement des groupes sur une ligne */
  gap: 9px; /* Espacement entre les groupes */
  justify-content: center; /* Centre horizontalement les groupes */
  align-items: center; /* Aligne verticalement les groupes (optionnel) */
  margin: 2px auto; /* Ajoute un espacement autour de l'ensemble */
  max-width: fit-content;
}
.bordered-container {
  border: 1px solid #ccc; /* Trait fin */
  padding: 1px; /* Espace interne pour aérer */
  display: inline-flex; /* Boutons côte à côte dans chaque groupe */
  border-radius: 5px; /* Coins arrondis */
}
.btn-reset-icon-small {
  width: 20px; /* Largeur réduite */
  height: 20px; /* Hauteur réduite */
  border-radius: 50%; /* Forme parfaitement ronde */
  background-color: transparent; /* Fond transparent */
  border: 1.5px solid #6c757d; /* Bordure fine grise */
  color: #6c757d; /* Couleur de l'icône */
  font-size: 10px; /* Taille réduite de l'icône */
  display: flex; /* Flexbox pour centrer */
  align-items: center; /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
  cursor: pointer; /* Curseur au survol */
  transition: all 0.3s ease; /* Transition fluide */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
}
.btn-reset-icon-small:hover {
  background-color: #6c757d; /* Fond gris au survol */
  color: white; /* Icône blanche au survol */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
  transform: translateY(-2px); /* Effet de "soulèvement" */
}
.controls-box {
  border: 0px solid #ccc; /* Bordure grise */
  margin-top: 5px;
  display: inline-block; /* Adapter à la largeur du contenu */
width: 99%;
}
.bas{
 display: none;
}
.custom-tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border: 1px solid #fff; /* Bord blanc */
  border-radius: 5px;
  font-size: 14px; /* Taille de police augmentée */
  white-space: nowrap;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}
.btn-later {
  margin-left: 5px;
  background-color: #f8f9fa; /* Couleur de fond claire */
  color: #333; /* Couleur du texte */
  border: 2px solid #ccc; 
  border-radius: 5px; /* Coins arrondis */
  padding: 3px 6px;
  font-size: 14px; /* Taille de la police */
  text-decoration: none; /* Pour les liens */
  font-family: "Quicksand", serif;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre */
  transition: all 0.3s ease-in-out; /* Animation des interactions */
  cursor: pointer; /* Curseur en main */
}
.btn-later:hover {
  background-color: #e9ecef; /* Fond plus foncé au survol */
  border-color: #999; /* Bordure plus foncée */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
  transform: translateY(-2px); /* Effet de "soulèvement" */
}
.btn-later:active {
  background-color: #dee2e6; /* Fond encore plus sombre */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre réduite */
  transform: translateY(1px); /* Bouton légèrement enfoncé */
}
.pa5{
  padding-top: 2px;
}
/*------------------texte---------------------------------------*/
/* Style commun pour tous les éléments déplaçables */
.draggable-text {
  position: absolute;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #000;
  cursor: grab;
  user-select: none;
  font-size: 16px;
  font-weight: bold;
  z-index: 1001; /* Plus élevé que l'image */
  pointer-events: auto;
  white-space: pre-wrap; /* Pour respecter les retours à la ligne */
}
/* Styles spécifiques pour text1 */
#text1 {
  top: 10px;
  left: 50px;
  font-family: Arial, sans-serif;
  font-size: 2rem;          /* Taille par défaut (modifiable dynamiquement) */
  line-height: 1;        /* Hauteur de ligne */
  color: #000;              /* Couleur du texte */
  background-color: rgba(255, 255, 255, 0.5); /* Fond semi-transparent */
  border: 1px solid #000;   /* Bordure noire */
  padding: 10px 15px;       /* Padding (10px vertical, 15px horizontal) */
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  z-index: 1000;
}
/* Styles spécifiques pour text2 */
#text2 {
    display: block;
    /* width: 100%; */
  top: 120px; /* Position initiale pour être en dessous de text1 */
  left: 50px;
  font-family: Arial, sans-serif;
  font-size: 2rem;          /* Taille par défaut (modifiable dynamiquement) */
  line-height: 1;           /* Hauteur de ligne minimale */
  color: #000;              /* Couleur du texte */
  background-color: rgba(255, 255, 255, 0.5); /* Fond semi-transparent */
  border: 1px solid #000;   /* Bordure noire */
  padding: 10px 15px;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  z-index: 1000;
}
/* Conteneur des textes */
#text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: none;
}
.bordered-container {
  display: flex;
  align-items: center;
  /* gap: 1px; */
  padding: 2px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.slogan-controls {
  gap: 4px; /* Espacement entre les boutons d'alignement */
}
.ronc{
  width: 25px !important;
  height: 25px !important;
  border-radius: 50%;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button; /* ou 'auto' */
  opacity: 1;
}
#set-format-btn2 {
  display: none !important;
}
#capture-container {
  overflow: hidden;
}
.cor{
  border-radius: 5px !important;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
  border: none;
  height: 25px !important;
  width:80px;
  margin-left: 15px;
}
#text2 {
  font-size: 2rem; /* Exemple */
  line-height: 1.4; /* 1.4 fois la taille de la police */
  /* Autres styles… */
}
input[type="range"] {
  -webkit-appearance: none !important; /* Supprime l'apparence par défaut sur Chrome/Safari */
  width: 80px !important;             /* Ajustez la largeur selon vos besoins */
  height: 4px !important;              /* Hauteur de la piste */
  background: #555 !important;         /* Couleur de fond de la piste */
  outline: none !important;
  border-radius: 2px !important;
  margin: 0 10px !important;           /* Espacement horizontal */
}
/* Pseudo-élément pour le thumb sur Chrome/Safari */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 10px !important;              /* Largeur du curseur */
  height: 10px !important;             /* Hauteur du curseur */
  background: #555 !important;         /* Couleur du curseur */
  cursor: pointer !important;
  border-radius: 50% !important;
  margin-top: -16px !important;         /* Pour centrer le thumb sur la piste */
}
/* Pseudo-élément pour le thumb sur Firefox */
input[type="range"]::-moz-range-thumb {
  width: 10px !important;              /* Largeur du curseur */
  height: 10px !important;             /* Hauteur du curseur */
  background: #555 !important;
  cursor: pointer !important;
  border-radius: 50% !important;
}
/* Optionnel : Style pour la piste sur Firefox */
input[type="range"]::-moz-range-track {
  background: #ddd !important;
  height: 4px !important;
  border-radius: 2px !important;
}
.modal {
  display: none; /* Masque le modal par défaut */
  position: fixed;
  top: 100px; /* 100 pixels du haut */
  left: 50%;
  transform: translateX(-50%); /* pour centrer horizontalement */
  width: 80%; /* ou une autre valeur */
  /* background-color: rgba(0, 0, 0, 0.5); */
  z-index: 1000;
}
.modal-content {
  position: fixed;
  top: 150px;        /* Position à 150 pixels du haut */
  left: 50%;
  width:300px;
  transform: translateX(-50%); /* Centrage horizontal uniquement */
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  z-index: 1001;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.modal-content button {
  background-color: #aaa;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 10px;
}
.modal-message{
  font-size: 20px;
}
.b3 {
  background-color: rgba(5, 68, 105, 0.788) !important ;
  color: #fff !important;
font-size: 14px !important;
}
.b4 {
  background-color: rgba(28, 150, 221, 0.788) !important ;
  color: #fff !important;
font-size: 14px !important;
}
.b5 {
  background-color: rgba(190, 23, 18, 0.788) !important ;
  color: #fff !important;
font-size: 14px !important;
}
.b6 {
  background-color: rgba(24, 163, 163, 0.932) !important ;
  color: #fff !important;
font-size: 14px !important;
}
textarea.fixed-size {
  width: 200px !important;
  height: 50px !important;
  resize: none;
}