/* doc-project | gestion-points/style.css | Définit la mise en forme de l’interface de gestion des points et des modales associées. | Expose: aucun | Dépend de: Bootstrap, structure HTML de gestion-points | Impacte: UI, expérience visuelle, affichage des modales | Tables: aucune */
body, html {
    height: 100%;
    margin: 0;
    margin-bottom: 20px;
  }

  .bg {
    /* L'image de fond */
    background-image: url("https://www.qrsite.fr/a/fond2.jpg");

    /* Pleine hauteur */
    height: 100%;

    /* Centrage et redimensionnement de l'image de fond */
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }
  
  #rating {
    display: flex;
    justify-content: center;
    font-size: 3em; /* Ajuste la taille des étoiles */
}
.star {
    cursor: pointer;
    color: white; /* Rend l'intérieur transparent */
    -webkit-text-stroke: 1px black; /* Bordure noire fine pour les navigateurs webkit */
}
.star:not(.selected) {
    -webkit-text-stroke: 1px black; /* Assure que le bord reste noir */
}
.star.selected {
    color: #ffc107; /* Change l'intérieur en jaune pour les étoiles sélectionnées */
    -webkit-text-stroke: 1px black;
}

h2 {
    text-align: center; /* Centre le titre */
    color: white; /* Définit la couleur du texte à blanc */
    font-weight: bold; /* Rend le texte gras */
    /* Ajout d'une bordure autour du texte via text-shadow */
    text-shadow: 
      -2px -2px 0 #000,  
       2px -2px 0 #000,
      -2px  2px 0 #000,
       2px  2px 0 #000;
  }
  


  .text-container {
    background-color: rgba(255, 255, 255, 0.75); /* Fond blanc avec 50% d'opacité */
    border: 2px solid black; /* Bords noirs de 2px */
    border-radius: 10px; /* Angles arrondis */
    padding: 20px; /* Un peu d'espace à l'intérieur du conteneur */
    margin: 20px 0; /* Espacement autour du conteneur */
}

.text-center.mt-5 {
  background-color: rgba(255, 255, 255, 0.9); /* Blanc avec transparence de 10% */
  border: 2px solid black; /* Contour noir */
  border-radius: 10px; /* Bords arrondis */
  padding: 20px; /* Espace intérieur */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Légère ombre pour un effet élégant */
  max-width: 600px; /* Largeur maximale pour éviter que le bloc s'étende trop */
  margin: 0 auto; /* Centrage horizontal */
}

.footer {
  height: 20px;
  background-color: transparent; /* Peut être personnalisé */
}

.btn-menu {
  width: 250px;
  max-width: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
}

.btn-menu .btn-icon {
  flex: 0 0 20%;
  text-align: left;
  font-size: 1.2em;
}

.btn-menu .btn-label {
  flex: 1;
  text-align: center;
  font-weight: 500;
}


.btn-menu i,
.btn-menu {
    font-weight: bold;
}

.btn-menu i {
    font-style: normal; /* Pour éviter les icônes fins */
}

/* Dans ton fichier CSS (ou dans un <style> après Bootstrap) */
#linkNumbersModal .form-control.is-valid,
#linkNumbersModal .form-control.is-invalid {
  /* désactive l’icône de fond de Bootstrap */
  background-image: none !important;
  /* ajuste éventuellement le padding pour recaler le texte */
  padding-right: 0.75rem;
}

#unlinkNumberModal .form-control.is-valid,
#unlinkNumberModal .form-control.is-invalid {
  background-image: none !important;
  padding-right: 0.75rem;
}