body {
     margin: 0;
     /* height: 100vh; */
     /* prend toute la hauteur visible */
     font-family: Arial, sans-serif;
     background: #f5f7fa;
     /* display: flex; */
     justify-content: center;
     align-items: center;
     /* padding: 20px; */
 }


 /* Conteneur pour le logo et le titre */
 .header-container {
     text-align: center;
     margin-bottom: 20px;
     width: 100%;
     max-width: 700px;
 }

 select {
     padding: 10px;
     border-radius: 8px;
     border: 1px solid #ccc;
     outline: none;
     transition: 0.3s;
     width: 100%;
     max-width: 500px;
     /* Ajustez selon vos besoins */
 }

 select:focus {
     border-color: #007bff;
     box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
 }


 .logo {
     width: 100px;
     height: 100px;
     background: #007bff;
     border-radius: 50%;
     margin: 0 auto 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-weight: bold;
 }

 .form-title {
     background: #007bff;
     color: white;
     padding: 10px;
     text-align: center;
     border-radius: 8px;
     margin-bottom: 20px;
     font-weight: bold;
     width: 100%;
     max-width: 700px;
 }

 .form-container {
     background: #fff;
     padding: 0;
     max-width: 700px;
     width: 100%;
     border-radius: 12px;
     /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);*/
     overflow: hidden;
 }

 .card-header {
     background-color: #808080;
     color: #f7f0f0;
     padding: 12px 20px;
     font-weight: bold;
     font-size: 16px;
     border-bottom: 1px solid #ddd;
     margin: 0;
     width: 100%;
     box-sizing: border-box;
 }

 .form-container fieldset {
     border: 1px solid #ddd;
     border-radius: 0 0 8px 8px;
     background-color: #f9f9f9;
 }

 fieldset {
     margin: 15px;
 }


 legend {
     font-weight: bold;
     color: #333;
     padding: 0 10px;
 }

 .form-row {
     /* display: flex; */
     align-items: center;
     margin-bottom: 12px;
 }

 .form-row label {
     width: 180px;
     font-weight: bold;
     color: #444;
 }

 input[type="text"],
 input[type="number"],
 select {
     flex: 1;
     padding: 10px;
     border-radius: 8px;
     border: 1px solid #ccc;
     outline: none;
     transition: 0.3s;
     box-sizing: border-box;
 }

 input[type="text"]:focus,
 input[type="number"]:focus,
 select:focus {
     border-color: #007bff;
     box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
 }

 .account-row {
     display: flex;
     padding-left: 47px;
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
     /* Permet de passer à la ligne si nécessaire */
     width: 100%;
     /* Prend toute la largeur disponible */
 }

 .account-row input {
     flex: 3;
     /* Prend 3 fois plus de place que le bouton */
     min-width: 200px;
     /* Largeur minimale plus grande pour un champ plus long */
 }

 .account-row .validate-btn {
     flex: 1;
     /* Prend 1 partie de l'espace disponible */
     white-space: nowrap;
     /* Évite que le texte du bouton ne passe à la ligne */
     padding: 8px 12px;
 }

 /* Sur mobile */
 @media (max-width: 600px) {
     .account-row {
         flex-direction: row;
         /* Reste en ligne */
         width: 100%;
     }

     .account-row input {
         flex: 2;
         /* Réduit légèrement la proportion sur mobile */
         min-width: 150px;
         /* Largeur minimale adaptée au mobile */
     }
 }



 .validate-btn {
     padding: 10px 15px;
     background: #007bff;
     color: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     transition: 0.3s;
 }

 .validate-btn:hover {
     background: #0056b3;
 }

 .btn-container {
     text-align: center;
     margin-top: 5px;
     margin-bottom: 10px;
 }

 .btn {
     padding: 12px 30px;
     background: #007bff;
     color: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     transition: 0.3s;
     font-size: 16px;
 }

 .btn:hover {
     background: #0056b3;
 }

 .table-section {
     margin-top: 20px;
     width: 100%;
     overflow-x: auto;
 }

 table {
     width: 100%;
     border-collapse: collapse;
 }

 table th,
 table td {
     border: 1px solid #ddd;
     /* padding: 12px; */
     text-align: left;
     font-size: 10px;
 }

 table th {
     background: #f0f0f0;
     font-weight: bold;
     text-align: center;
 }

 .logo-cell {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .service-logo {
     width: 30px;
     height: 30px;
     border-radius: 4px;
 }

 .wave {
     background: #7B68EE;
 }

 .orange {
     background: #FF8C00;
 }

 .moov {
     background: #008000;
 }

 .mtn {
     background: #FFD700;
 }

 .consent {
     margin-top: 25px;
 }

 .consent label {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-weight: normal;
     cursor: pointer;
     margin-bottom: 10px;
 }

 .checkbox-group {
     display: flex;
     align-items: flex-start;
     margin-bottom: 10px;
 }

 .checkbox-group input[type="radio"] {
     margin-top: 2px;
 }

 /* Masquer les flèches des champs de type number */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Pour Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}


 @media (max-width: 600px) {

     .form-row {
         flex-direction: row;
         align-items: center;
         flex-wrap: wrap;
     }

     .form-row label {
         width: 120px;
         margin-bottom: 0;
         margin-right: 10px;
     }

     input[type="text"],
     input[type="number"],
     select {
         flex: 1;
         min-width: 150px;
     }

     .account-row {
         flex-direction: row;
         align-items: center;
         flex-wrap: wrap;
     }

     .account-row input {
         flex: 1;
         min-width: 150px;
         margin-bottom: 0;
     }

     .validate-btn {
         width: auto;
         min-width: 150px;
     }
 }

 .top-bar {
     width: 100%;
     height: 30px;
     background-color: #FE8204;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1000;

 }

 .hidden {
     display: none;
 }

 /* Fond de la modale */
 .modal {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     animation: fadeIn 0.3s ease-in-out;
 }

 /* Contenu principal */
 .modal-content {
     background: #fff;
     margin: 5% auto;
     padding: 20px;
     border-radius: 12px;
     width: 85%;
     max-width: 720px;
     max-height: 85vh;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
     overflow-y: auto;
     animation: slideUp 0.3s ease-in-out;
 }

 /* Animation d’apparition */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes slideUp {
     from {
         transform: translateY(40px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 /* Header */
 .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 2px solid #f0f0f0;
     padding-bottom: 12px;
     margin-bottom: 15px;
 }

 .modal-header h2 {
     margin: 0;
     color: #007bff;
     font-size: 18px;
     font-weight: bold;
 }

 .modal-header .close {
     font-size: 22px;
     font-weight: bold;
     color: #888;
     cursor: pointer;
     transition: 0.2s;
 }

 .modal-header .close:hover {
     color: #ff4d4d;
 }

 /* Tableau */
 .recap-table {
     width: 100%;
     border-collapse: collapse;
     margin-bottom: 15px;
     font-size: 14px;
 }

 .recap-table th {
     background: #007bff;
     color: white;
     padding: 10px;
     text-align: left;
     font-weight: 600;
 }

 .recap-table td {
     padding: 6px;
     border-bottom: 1px solid #eee;
 }

 .recap-table tr:nth-child(odd) {
     background: #f9f9f9;
 }

 /* Consentement */
 .recap-consent {
     margin-top: 15px;
     padding: 12px;
     background: #f8f9fa;
     border-left: 4px solid #007bff;
     border-radius: 6px;
 }

 .recap-consent h3 {
     margin: 0 0 8px 0;
     color: #333;
     font-size: 15px;
 }

 .checkbox-group {
     margin-bottom: 8px;
     display: flex;
     align-items: flex-start;
     gap: 8px;
 }

 /* Footer */
 .modal-footer {
     display: flex;
     justify-content: flex-end;
     gap: 12px;
     margin-top: 15px;
     border-top: 1px solid #eee;
     padding-top: 12px;
 }

 .btn-confirm,
 .btn-cancel {
     padding: 10px 18px;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     font-size: 14px;
     transition: 0.3s;
 }

 .btn-confirm {
     background: #007bff;
     color: white;
 }

 .btn-confirm:hover {
     background: #0056b3;
 }

 .btn-cancel {
     background: #f1f1f1;
     color: #333;
 }

 .btn-cancel:hover {
     background: #e0e0e0;
 }