<style>
   /* Style général pour centrer le formulaire dans la page   background-color: #f8f9fa;  background-color: #f5f5f5;  */
    body {
        font-family: Arial, sans-serif; /* Police par défaut */
        background-color: #f5f5f5; /* Couleur de fond corrigée */
        margin: 0; /* Supprime les marges par défaut */
        padding: 0; 
        width: 100vw; /* Assure que le body prend toute la largeur de la fenêtre */
        min-height: 100vh; /* Assure que le body occupe toute la hauteur de la fenêtre */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Alignement vertical des enfants */
        align-items: center; /* Centre horizontalement */
        overflow-x: hidden; /* Empêche le débordement horizontal */
    }
   
   .background-container {
    position: relative;
    top: 0px; left: 0; right: 0; bottom: 0; 
    background-image: url('../debPage/bg_images/image_bg2.jpg'); /* Remplacez par l'URL de votre image   ../debPage/bg_images/image_bg1.webp*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;   /*no-repeat;*/
    width: 100vw; /* Assure que la barre prend toute la largeur de la fenêtre */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
   /* color: white;*/
    text-align: center;
}

    header {
        position: absolute;
        top: 5px;
        background-color: #007bff;
        color: white;
        padding: 0 0 10px 0; 
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        border-radius: 10px 10px 0 0;
        margin-bottom: 0;
        z-index: 1;
    }

    .nav-container {
        position: fixed;
        background-color: #007bff;
        top: 0;
        left: 0;
        right: 0; 
        width: 100vw; 
        display: flex;
        justify-content: center; /* space-around; ou space-between, center, etc. */
        align-items: center;
        padding: 0px 10px; /* Ajoute du padding pour un meilleur rendu */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        border-radius: 10px 10px 0 0;
        gap: 5px; /* Ajoute un espace de 20px entre les éléments enfants */
        z-index:50;
    }
    .container {
        position: relative;
        background-color: gray;
        top: 0px;
        left: 0;
        margin: 0; /* Supprime toutes les marges */
        padding: 0; /* Supprime les espacements internes */
        width: 100vw; /* Prend toute la largeur de l'écran */
        min-height: 100vh; /* Prend toute la hauteur de l'écran */
        border-radius: 0; /* Supprime les coins arrondis */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: flex; /* Utilisation de flexbox */
        flex-direction: column; /* Aligne les éléments verticalement */
        justify-content: flex-start; /* Alignement vertical des enfants */
        align-items: center; /* Centre les enfants horizontalement */
        overflow: hidden; /* Évite tout débordement */
    }

     .calligraphic-text {
        font-family: "Dancing Script", cursive;
        font-size: 20px;
        color: yellow;   /* gold */
        text-shadow: 2px 2px 4px black;
        letter-spacing: 2px;
        font-weight: bold;
        display: inline-block;
    }

    .form-container {
        width: 100%;
        margin-left: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Ajoutez du style pour masquer le formulaire */
    .hidden {
        display: none;
    }

    .login-form {
        margin-bottom: 20px; /* Marge de 20px en bas du formulaire */
    }

    .required::after {
        content: " *";
        color: red;
        font-weight: bold;
    }
    form {
        position: relative;
        width: 99%;
        margin: 40px auto;
        background-color: #f4f4f4;
        padding: 15px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
        border: 2px solid lightgray;
        border-radius: 10px;
        box-sizing: border-box; /* Inclure les bordures et les paddings dans la taille */
        margin-bottom: 15px; /* Marge de 15px en bas du formulaire */
    }

    .form-group {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }

    .form-group label {
        width: 200px;
        font-size: 18px;
        margin-right: 10px;
        text-align: right;
    }

    .form-group input,
    .form-group select,
    .form-group option,
    .form-group textarea {
        width: calc(100% - 210px); /* Ajuster la largeur pour compenser le label */
        padding: 8px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .form-group input[type="file"] {
        padding: 0;
    }

     .positionxi {
         top:-105px;  
         width: 52.5%; 
    }
      
    .link-container {
        position: relative;
        text-align:center;
        justify-content: center;
        margin: 5px;
        padding: 5px;
        margin-left: 0px; 
        top: 0px;
        border-radius: 8px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
        border: 2px solid blue;
        background-color: #fff;  
        color: blue;
        font-size: 20px;
        text-decoration: none; 
        align-items: center;
        padding: 2px 4px;
        white-space: nowrap; /* Empêche le texte de revenir à la ligne */
        text-overflow: ellipsis; /* Ajoute des points de suspension pour indiquer le débordement */
        z-index: 20;
    }

    .link-container a {
        color: blue;
        font-size: 20px;
        text-decoration: none;
    }

    .link-container a:hover {
        color: #FF5733;
    }

    .title-container {
        position: relative;
        background-color: #f4f4f4;  /* background-color: #fff; : Optionnel : Ajoute une couleur de fond */ 
        text-decoration: none;
        font-size: 18px;
        text-align: center;
        width: 100%;
        margin: 0;  
        padding: 0; /* Ajoute de l'espace intérieur pour un meilleur espacement */
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);  Ajuste l'ombre pour plus de profondeur */
        box-sizing: border-box; 
        border: 2px solid lightgray;  /*  border: 2px solid blue; ; Optionnel : Ajoute une bordure  :   border: 1px solid #ccc;*/ 
        border-radius: 10px; /* Optionnel : Donne des coins arrondis */
        margin-bottom: 0px;  

    }

    .title-container a {
        color: blue;
        font-size: 20px;
        text-decoration: none;
    }

    .title-container a:hover {
        color: #FF5733;
    }
    
    /* Appliquer l'italique à un élément avec la classe "italic-text" */
       .italic-text {
            font-style: italic;
        }

    .back-button {
            display: inline-block;
            padding: 10px 15px;
            background-color: #6c757d;
            color: white;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            text-align: center;
            width: 150px;
            margin-top: 20px;
        }
        .back-button:hover {
            background-color: #5a6268;
        }
    
    .icone_bg_white {
       /* background-color: white;*/
        vertical-align: middle;
        width: 20px;
        height: 20px;
        display: inline-block;
    }
 

    h2 {
        font-size: 22px;
        color: blue;
        text-align: center;
        margin: 10px 0;
        padding: 15px;
        text-decoration: none;
        margin-bottom: 20px;
    }

    h3 {
        background-color: #fff; /* Couleur de fond blanche */
        font-size: 18px; /* Taille de la police */
        color: blue; /* Couleur du texte */
        text-align: center; /* Centrage du texte */
        margin: 10px auto; /* Centrer horizontalement (grâce à auto) et espacer verticalement */
        padding: 10px; /* Espacement interne autour du texte */
        text-decoration: none; /* Pas de soulignement */
        width: fit-content; /* Ajuster la largeur à la taille du contenu */
        border-radius: 5px; /* Coins arrondis pour un design plus moderne */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Légère ombre pour effet esthétique */
    }

    ul {
        list-style-type: none;
        padding: 0;
        text-align: justify;
        font-size: 20px;
    }

    li {
        padding: 5px 0;
        border-bottom: 1px solid #ddd;
        font-size: 20px;
    }

    footer {
        text-align: center;
        padding: 0;
        left:0;
        background-color: #007bff;
        color: white;
        position: fixed;
        bottom: 0;
        width: 100vw;  
        border-radius: 0 0 10px 10px;
        z-index: 100;
    }

    footer a {
        color: #f8f9fa;
        text-decoration: none;
        margin: 0 10px;
    }

    footer a:hover {
        text-decoration: underline;
    }

    button {
        width: 100%;
        padding: 10px;
        font-size: 18px;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    button:hover {
        background-color: #218838;
    }

    input, select, button {
        display: block; /* S'assurer qu'ils prennent toute la largeur disponible */
        margin-bottom: 10px; /* Espacement entre les champs */
        padding: 10px; /* Espacement interne */
        border: 1px solid #ccc; /* Bordure */
        border-radius: 4px; /* Coins arrondis */
        font-size: 16px; /* Taille du texte */
    }

    .user-info {
        position: fixed;
        top: 10px;
        right: 10px;
        padding: 10px;
        background-color: #f0f0f0;
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        z-index: 1000;
    }

    .preview-container {
        position: relative;
        padding: 3px;
        border-radius: 8px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
        max-width: 320px;
        margin-top: 20px;
        border: 2px solid red;
        background-color: #fff;
        text-align: center;
    }

    .preview-container img {
        max-width: 100%;
        height: auto;
    }

    .show-password-checkbox {
        margin-left: 200px;
        margin-top: -15px;
        text-align: left;
         max-width: 300px;
          display: flex;
          gap: 5px;
    }

    .success {
        color: green;
        font-weight: bold;
    }

    .error {
        color: red;
        font-weight: bold;
    }

    .success-messages {
        position: absolute;
        left: 10px;
        top: 70px;
        background-color: #dff0d8; /* Vert clair */
        color: #3c763d; /* Couleur du texte */
        border: 2px solid blue; /* Bordure verte */
        padding: 5px; /* Espacement interne */
        margin: 20px 0; /* Marge verticale */
        border-radius: 5px; /* Coins arrondis */
        font-family: Arial, sans-serif; /* Police de caractères */
        font-size: 16px; /* Taille de police */
         z-index:101;
    }

    .error-message {
        position: absolute;
        left: 10px;
        top: 150px;
        background-color: #f8d7da; /* Couleur de fond rouge clair */
        color: #721c24; /* Couleur du texte rouge foncé */
        border: 1px solid #f5c6cb; /* Bordure rouge */
        padding: 10px; /* Espacement interne */
        margin: 10px 0; /* Espacement externe */
        border-radius: 5px; /* Coins arrondis */
        font-family: Arial, sans-serif; /* Police de caractères */
        font-size: 16px; /* Taille de police */
        z-index:100;
    }

    .error-message strong {
        font-weight: bold;  
    }

    .important {
        font-weight: bold;    /* Texte en gras pour les éléments importants */
        color: #d9534f;
    }
   
      .custom-select {
            font-size: 18px; /* Définir la taille de la police */
            padding: 5px;    /* Optionnel : ajoute un peu d'espace pour un meilleur rendu */
            border: 1px solid #ccc; /* Optionnel : style de la bordure */
            border-radius: 4px; /* Optionnel : coins arrondis */
        }
         
        .fixed-header {
            position: sticky;
            top: 0;
            background-color: white;
            z-index: 10;
        }

        .fixed-header th {
            background-color: white;
            position: sticky;
            top: 0;
            z-index: 10;
        }

          .time-label {
                display: block;
                margin-bottom: 5px;
                font-size: 18px;
                color: #555;
            }
            
         .time-display {
                font-size: 18px;
                font-weight: bold;
                color: #333;
            }
 
    .form-group1 {
        margin-bottom: 5px;
        display: flex;
        align-items: center; 
    }

    .form-group1 label {
        width: 100px;
        font-weight: bold;
        font-size: 18px;
        margin-right: 10px;
        text-align: left;
    }

    .form-group1 input,
    .form-group1 select,
    .form-group1 option,
    .form-group1 textarea {
        width: calc(100% - 110px); /* Ajuster la largeur pour compenser le label */
        padding: 5px;
        font-weight: bold;
        font-size: 18px;
        text-align: left;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .form-group1 input[type="file"] {
        padding: 0;
    }

        .fafacheck-fv-tb-icon {
            color: white; /* Couleur de l'icône */
            background-color: green; /* Couleur de fond */
            padding: 3px; /* Espacement autour de l'icône */
            border-radius: 5px; /* Coins arrondis */
        }
        .fa-circle {
            color: red;
        }
        
           .fa-diamond {
            color: orange;
            font-size: 28px;
            background-color: white;
        }
        
           .fa-exclamation-triangle {
            color: yellow;
        }
        
         .fa-check-square {
            color: green;
        }

    
       /* Exemple de classe CSS pour styliser les icônes */
        .icon-style {
            font-size: 24px; /* Taille de l'icône */
        }
        .red { color: red; }
        .green { color: green; }
        .yellow { color: yellow; }
        .blue { color: blue; }
        .orange { color: orange; }
        
    /* Media Queries for Smartphones */
    @media (max-width: 768px) {
        .container {
            width:1450px;  /* Ajustement de la largeur pour les petits écrans */
            padding: 10px;
        }

       .background-container {
            width:1450px;  /* Ajustement de la largeur pour les petits écrans */
            padding: 10px;
       }
       .link-container {
            width:1450px;  /* Ajustement de la largeur pour les petits écrans */
            padding: 10px; 
       }
       
        .nav-container {
            width:1450px;  /* Ajustement de la largeur pour les petits écrans */
            padding: 10px;
       }               
        .form-container {
            width: 100%;
            margin-left: 0;
        }

        h2 {
            font-size: 18px;
            color: blue;
            text-align: center;
            margin: 10px 0;
            padding: 15px;
            text-decoration: none;
            margin-bottom: 20px;
        }

        h3 {
            font-size: 16px;
            color: blue;
            text-align: center;
            margin: 10px 0;
            padding: 10px;
            text-decoration: none;
            margin-bottom: 5px;
        }

        ul {
            list-style-type: none;
            padding: 0;
            text-align: justify;
            font-size: 18px;
        }

        li {
            padding: 5px 0;
            border-bottom: 1px solid #ddd;
            font-size: 16px;
        }

        form {
            width: 100%;
            margin: 20px auto;
            padding: 10px;
        }

        .form-group {
            flex-direction: column;
            align-items: flex-start;
        }

        .form-group label {
            width: 100%;
            margin-right: 0;
            text-align: left;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
        }

        input {
            font-size: 16px;
        }
        .link-container {
            position: relative;
            margin: 10px;
            padding: 10px;
            font-size: 16px;
        }

        h2 {
            font-size: 18px;
            padding: 10px;
        }

        ul {
            font-size: 16px;
        }

        li {
            font-size: 16px;
        }

        .preview-container {
            max-width: 100%;
        }

        .show-password-checkbox {
            margin-left: 0;
            margin-top: 10px;
        }

        .success-messages,
        .error-message {
            left: 10px;
            top: 10px;
            font-size: 14px;
        }
        
        footer {
            width:1450px;  /* Ajustement de la largeur pour les petits écrans */
            padding: 0px;
    }
    }

    @media (max-width: 480px) {
        .container { 
            width:1450px;  /* Ajustement de la largeur pour les très petits écrans */
            padding: 5px;
        }
       
       .background-container {
            width:1450px;  /* Ajustement de la largeur pour les petits écrans */
            padding: 10px;
       }
       .link-container {
            width:1450px;  /* Ajustement de la largeur pour les petits écrans */
            padding: 10px; 
       }
        .nav-container {
            width:1450px;  /* Ajustement de la largeur pour les petits écrans */
            padding: 10px;
       }         
        h2 {
            font-size: 16px;
            color: blue;
            text-align: center;
            margin: 10px 0;
            padding: 15px;
            text-decoration: none;
            margin-bottom: 20px;
        }

        h3 {
            font-size: 14px;
            color: blue;
            text-align: center;
            margin: 10px 0;
            padding: 10px;
            text-decoration: none;
            margin-bottom: 5px;
        }

        ul {
            list-style-type: none;
            padding: 0;
            text-align: justify;
            font-size: 16px;
        }

        form {
            padding: 5px;
        }

        .form-group label {
            font-size: 14px;
        }

        .form-group input,
        .form-group textarea {
            font-size: 14px;
        }

        input {
            font-size: 16px;
        }
        .link-container {
            font-size: 14px;
        }

        h2 {
            font-size: 16px;
            padding: 5px;
        }

        ul {
            font-size: 14px;
        }

        li {
            font-size: 14px;
        }

        .success-messages,
        .error-message {
            font-size: 12px;
        }
    }

    /* Style pour centrer les tables et améliorer leur apparence */
    table {
        margin: 20px auto;
        border-collapse: collapse;
        width: 90%;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        overflow: hidden;
        background-color: #f5f5f5; /* #f2f2f2; */
        font-size:14px; 
    }

    table th, table td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: center;
    }

    table th {
        background-color: white;/*   #f8f9fa;   #f2f2f2; ok */
        font-weight: bold;
    }

    table tr:nth-child(even) {
        background-color:  white; /*   #f5f5f5;   #f2f2f2;    #ccffcc  #f9f9f9;  lightyellow ok */
    }

    /* Style pour les options spécifiques */
    .option-special {
        background-color: yellow; /* Couleur de fond */
        color: red; /* Couleur du texte */
    }

    .input-filled {
        background-color: #e6f7ff; /* Couleur bleu très clair */
    }
</style>