/* Déclaration de la police à l'aide de @font-face */
    @font-face {
        font-family: 'MaPolice'; /* Nom que tu veux donner à la police */
        src: url('police.ttf') format('truetype'); /* Chemin vers ton fichier .ttf */
      }    
/* Fond de la page */
      body {
        background-image: url('mur.jpg');
        background-size: cover; /* Ajuste la taille de l'image pour remplir toute la fenêtre */
        /* Autres propriétés de style facultatives */
      }
/* Style pour masquer les boutons radio par défaut */
      .custom-radio input[type="radio"] {
        display: none;
      }
  
/* Style du bouton radio personnalisé */
      .custom-radio label {
        background-color: #A9A9A9;
        display: inline-block;
        padding: 7px 17px;
        font-family: Arial, sans-serif;
        font-size: 14px;
        border: 2px solid #A9A9A9;
        border-radius: 4px;
        cursor: pointer;
        margin-bottom: 5px;
      }
  
/* Style du bouton radio sélectionné */
      .custom-radio input[type="radio"]:checked + label {
        background-color: #4B4B4B;
        color: #fff;
        border-color: #000000;
      }
  
/* Style pour le champ de saisie */
          input[type="number"] {
        width: 30px; /* Largeur souhaitée */
        height: 20px; /* Hauteur souhaitée */
        padding: 5px; /* Espacement interne pour le texte */
        border: 1px solid #ccc; /* Bordure */
        border-radius: 4px; /* Coins arrondis */
      }
  
/* Style pour positionner le logo NIC */
    .image-top-right {
        position: fixed;
        top: 5px; /* Ajuste la distance depuisyrc le haut */
        right: 5px; /* Ajuste la distance depuis la droite */
        width: 150px; /* Largeur de l'image */
        height: auto; /* Hauteur ajustée automatiquement en proportion */
        z-index: 9999; /* Assure que l'image est au-dessus des autres éléments si nécessaire */
      }

  
/* Style de texte*/
    .resultat-text {
      position: absolute;
      left: 40px;
      font-weight: bold; /* Texte en gras */
      font-size: 40px; /* Taille de police plus grande */
      font-family: 'MaPolice', sans-serif; /* Utilisation de la police déclarée */
    }
    .base-number-text {
    text-align: center; /* Centrage horizontal du texte */
    font-weight: bold; /* Texte en gras */
    font-size: 20px; /* Taille de police plus grande */
    font-family: 'Arial', sans-serif; /* Utilisation de la police déclarée */
    }
    .total-number-text {
    text-align: center; /* Centrage horizontal du texte */
    font-weight: bold; /* Texte en gras */
    color: #CC0003;
    font-size: 22px; /* Taille de police plus grande */
    font-family: 'Arial', sans-serif; /* Utilisation de la police déclarée */
    }
    .totalfinal-number-text {
    text-align: center; /* Centrage horizontal du texte */
    color: #CC0003;
    font-weight: bold; /* Texte en gras */
    font-size: 100px; /* Taille de police plus grande */
    font-family: 'Arial', sans-serif; /* Utilisation de la police déclarée */

    }
    .couleur-number-text {
    text-align: center; /* Centrage horizontal du texte */
    font-weight: bold; /* Texte en gras */
    color:#EC9603;
    font-size: 22px; /* Taille de police plus grande */
    font-family: 'Arial', sans-serif; /* Utilisation de la police déclarée */
    }
    .commentaire-couleur-text {
    text-align: left; /* Centrage horizontal du texte */
    font-weight: bold; /* Texte en gras */
    color:#EC9603;
    font-size: 13px; /* Taille de police plus grande */
    font-family: 'Arial', sans-serif; /* Utilisation de la police déclarée */
    }
    .titre-text {
        text-align: center; /* Centrage horizontal du texte */
        font-weight: bold; /* Texte en gras */
        font-size: 25px; /* Taille de police plus grande */
        font-family: 'MaPolice', sans-serif; /* Utilisation de la police déclarée */
      }
    .autre-text {
        font-weight: bold; /* Texte en gras */
        font-size: 19px; /* Taille de police plus grande */
        display: inline-block;
        vertical-align: middle; /* Pour aligner verticalement avec les boutons radio */
        font-family: 'MaPolice', sans-serif; /* Utilisation de la police déclarée */
      }

  
  
/* Style pour positionner les boutons */
    .bouton-calculer {
      position: absolute;
      bottom: 60px;
      right: 20px; /* Ajuste la position horizontale */
      width: 90px; /* Largeur du bouton carré */
      height: 90px; /* Hauteur du bouton carré */
      border-radius: 0;
      background: url('minicalc.png') no-repeat center center; /* Remplace avec le chemin vers ton image */
      background-size: cover;
      border: none;
      cursor: pointer;
    }

    .bouton-back {
      position: absolute;
      bottom: 80px;
      right: 20px; /* Ajuste la position horizontale */
      width: 100px; /* Largeur du bouton carré */
      height: 100px; /* Hauteur du bouton carré */
      border-radius: 0;
      background: url('bouton-back.png') no-repeat center center; /* Remplace avec le chemin vers ton image */
      background-size: cover;
      border: none;
      cursor: pointer;
    }
            


/* Gestion des tableaux de résultat */
    table {     /* tableaux en général */
      text-align: center; /* Alignement horizontal au centre */
      vertical-align: middle; /* Alignement vertical au centre */
      position: absolute;
      top: 80px;
      border-collapse: collapse; /* Utilisation d'une seule bordure pour le quadrillage */
      font-family: 'MaPolice', sans-serif; /* Utilisation de la police déclarée */
      border-radius: 12px; /* Arrondir les coins */
      overflow: hidden; /* Cacher les bords non arrondis */
      width: 100%; /* Occupent toute la largeur disponible */
      box-shadow: 0 10px 3px rgba(0, 0, 0, 0.2);
      border: 0px solid transparent; /* Bordure transparente initiale */
      position: relative;
      margin: 0; /* Supprimer les marges par défaut du corps */
      padding: 20px; /* Ajouter un espacement autour des tableaux */
    }

    th {        /* cellules de titre */
        
        background-color: #A9A9A9;/* Couleur 1er ligne */
        padding: 8px;
        text-align: center;
        border: 2px solid #6d6c6c; /* Ajout d'une bordure à chaque cellule */
        border-top: none; /* Supprimer la bordure à gauche */
      border-left: none; /* Supprimer la bordure à gauche */
    }
    td {        /* cellules de données */
        background-color: #e7e7e7;/* Couleur 1er ligne */
        padding: 8px;
        text-align: center;
        border: 2px solid #4B4B4B; /* Ajout d'une bordure à chaque cellule */
    }

    th:last-child, td:last-child {
      border-right: none; /* Supprimer la bordure à droite */
    }
    tr:last-child th, tr:last-child td {
      border-bottom: none; /* Supprimer la bordure en bas */
    }

    .container { /* pour les cases totals */
      display: flex;
      align-items: center;
    }

    .custom-table {         /* pour le dernier tableau*/
      border-collapse: collapse;
      width: 70%; /* Largeur réduite du tableau */
      margin: auto; /* Centrage horizontal du tableau */
    }

/* Pour forcer le tableau à aller à gauche */
    .left-aligned-table {
      margin: 0; /* Force le tableau à aller à gauche */
    }

/* Bordure autour des tableaux */
    table::before,
    table::after {
      content: '';
      position: absolute;
      border: 3px solid #4B4B4B; /* Bordure noire */
      border-radius: 12px; /* Arrondir les coins pour les bordures autour des tableaux */
      top: 0px;
      bottom: 0px;
      left: -1px;
      right: 0px;
      z-index: 0; /* Placer derrière les cellules */
    }