<style>
body{font-family:Arial,sans-serif;background-color:#f5f5f5;margin:0;padding:0;width:100vw;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow-x:hidden}
.background-container{position:relative;top:0;left:0;right:0;bottom:0;background-image:url('../debPage/bg_images/image_bg2.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;text-align:center}
header{position:absolute;top:5px; background-color:#3049A1;color:#fff;padding:0 0 10px 0;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.1);border-radius:10px 10px 0 0;z-index:1}
.nav-container{position:fixed;background-color:#007bff;top:0;left:0;right:0;width:100vw;display:flex;justify-content:center;align-items:center;padding:0 10px;box-shadow:0 2px 4px rgba(0,0,0,.1);border-radius:10px 10px 0 0;gap:5px;z-index:50}
.container{position:relative;background-color:gray;top:0;left:0;margin:0;padding:0;width:100vw;min-height:100vh;border-radius:0;box-shadow:0 4px 6px rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow:hidden}
.calligraphic-text{font-family:"Dancing Script",cursive;font-size:20px;color:yellow;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}
.hidden{display:none}
.login-form{margin-bottom:20px} 
.required::after{content:" *";color:red;font-weight:bold}
form{position:relative;width:99%;margin:40px auto 15px;background:#f4f4f4;padding:15px;box-shadow:0 0 15px rgba(0,0,0,.2);border:2px solid lightgray;border-radius:10px;box-sizing:border-box}
.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);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%}

.italic-text{font-style:italic}
.back-button{display:inline-block;padding:10px 15px;background:#6c757d;color:#fff;border-radius:5px;text-decoration:none;font-size:16px;text-align:center;width:150px;margin-top:20px}
.back-button:hover{background:#5a6268}
.icone_bg_white{vertical-align:middle;width:20px;height:20px;display:inline-block}
.catalogue {background:#fff; padding:20px; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,.1); width:95%; margin:40px auto; text-align:center;}
.catalogue h2 {text-align:center; margin-bottom:20px;}

/* --- Message de bienvenue --- */
.welcome {margin-top:65px; left:10px; font-size:15px; color:#333; display:flex; flex-direction:column; align-items:flex-start; gap:5px;}
.welcome strong {color:#1e88e5;}
.logout-btn {display:inline-block; background:#AED6F1; color:#000; padding:5px 10px; border-radius:6px; font-size:14px; text-decoration:none;}
.logout-btn:hover {background:#1e7e34; color:#fff;}
/*  header background-color:#3049A1;  ---- footer : background:#3049A1; */ 

h2{font-size:22px;color:blue;text-align:center;margin:10px 0 20px;padding:15px;text-decoration:none}
h3{background:#fff;font-size:18px;color:blue;text-align:center;margin:10px auto;padding:10px;width:fit-content;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.1)}
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{position:fixed;bottom:0;left:0;width:100%;height: 20px; background:#3049A1;color:#fff;text-align:center;padding:10px 5px;border-radius:0 0 10px 10px;z-index:100;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px}
footer a{color:#f8f9fa;text-decoration:none;margin:0 5px;word-break:break-word}
footer a:hover{text-decoration:underline}
footer p {  margin: 0;    line-height: 1;  }

button{width:100%;padding:10px;font-size:18px;background:#28a745;color:#fff;border:none;border-radius:4px;cursor:pointer}
button:hover{background:#218838}
input,select,button{display:block;margin-bottom:10px;padding:10px;border:1px solid #ccc;border-radius:4px;font-size:16px}
.user-info{position:fixed;top:10px;right:10px;padding:10px;background:#f0f0f0;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1);font-size:16px;z-index:1000}
.preview-container{position:relative;padding:3px;border-radius:8px;box-shadow:0 0 15px rgba(0,0,0,.2);max-width:320px;margin-top:20px;border:2px solid red;background:#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:#dff0d8;color:#3c763d;padding:5px;margin:20px 0;border-radius:5px;font-family:Arial,sans-serif;font-size:16px;z-index:101}
.error-message{position:absolute;left:10px;top:180px;background:#f8d7da;color:#721c24;padding:10px;margin:10px 0;border-radius:5px;font-family:Arial,sans-serif;font-size:16px;z-index:100}
.error-message strong{font-weight:bold}
.important{font-weight:bold;color:#d9534f}
.custom-select{font-size:18px;padding:5px;border:1px solid #ccc;border-radius:4px}
.fixed-header{position:sticky;top:0;background:#fff;z-index:10}
.fixed-header th{background:#fff;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);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:#fff;background:green;padding:3px;border-radius:5px}
.fa-circle{color:red}
.fa-diamond{color:orange;font-size:28px;background:#fff}
.fa-exclamation-triangle{color:yellow}
.fa-check-square{color:green}
.icon-style{font-size:24px}
.red{color:red}.green{color:green}.yellow{color:yellow}.blue{color:blue}.orange{color:orange}
section{padding:20px;margin:20px 0;background:#f5f5f5;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,.1);line-height:1.6;overflow-wrap:break-word}
section h1,section h2,section h3{margin-top:0;color:#333}
section p{margin-bottom:15px}
table{margin:20px auto;border-collapse:collapse;width:90%;box-shadow:0 0 15px rgba(0,0,0,.2);border-radius:10px;overflow:hidden;background:#f5f5f5;font-size:14px}
table th,table td{border:1px solid #ccc;padding:10px;text-align:center}
table th{background:#fff;font-weight:bold}
table tr:nth-child(even){background:#fff}
.option-special{background:yellow;color:red}
.input-filled{background:#e6f7ff}

.contenairB{background-color:#fff;padding:15px;border-radius:6px;box-shadow:0 0 8px rgba(0,0,0,.08);width:95%;margin:0 auto;top:-40px;text-align:center}
.catalogue{background-color:#fff;padding:15px;border-radius:6px;box-shadow:0 0 8px rgba(0,0,0,.08);width:95%;margin:0 auto;top:0px;text-align:center}


.link-container{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;margin:5px 0;padding:2px 4px;border-radius:8px;box-shadow:0 0 15px rgba(0,0,0,.2);background:#fff;color:blue;font-size:20px;overflow:hidden;text-overflow:ellipsis;z-index:20}
.link-container a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:blue;font-size:20px;text-decoration:none}
.link-container a:hover{color:#FF5733}

.title-container{background:#f4f4f4;font-size:18px;text-align:center;width:100%;box-shadow:0 0 15px rgba(0,0,0,.2);border:2px solid lightgray;border-radius:10px}
.title-container a{display:block;color:blue;font-size:20px;text-decoration:none}
.title-container a:hover{color:#FF5733}

 
 footer {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 20px; z-index: 100;
    background: #3049A1; color: #fff;
    display: flex; justify-content: center; align-items: center;
    gap: 8px; font-size: 13px; overflow: hidden; white-space: nowrap;
    line-height: 1; /* Force le texte à ne pas prendre d'espace vertical supplémentaire */
    margin: 0; padding: 0; /* Élimine les décalages parasites */
}
  
  /* Option simple (recommandée – sans image) Utilise directement le caractère * stylisé en CSS.  */
  <span class="asterisque-blanc">*</span>
  .asterisque-blanc {color: #ffffff; font-size: 18px;  font-weight: bold;   background: transparent;  line-height: 1;
}

/* Option icône (Font Awesome – si déjà inclus)   utilisation  <i class="fas fa-asterisk asterisque-blanc"></i>  */
.asterisque-blanc {  color: #ffffff; font-size: 18px;  background: transparent;
}

.icon-inscription-secure{display:inline-flex;align-items:center;gap:3px;color:#fff;font-size:18px}

.icon-inscription-color { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; background: transparent; }
.icon-inscription-color .user { color: #fff; }
.icon-inscription-color .plus { color: #2ecc71; }
.icon-inscription-color .lock { color: #3498db; }

.icon-admin { color: #e74c3c; font-size: 18px; }
.icon-client { color: #3498db; font-size: 18px; }

.icon-taille18 {
    color: #F2F2BD;       /* couleur rouge  pink  : panier */
    font-size: 18px;  /* taille de l'icône */
    vertical-align: middle;
}

.icon-commande {
    color: #F2F2BD;       /* couleur rouge  pink  : panier */
    font-size: 24px;  /* taille de l'icône */
    vertical-align: middle;
}

.icon-appro {
    color: pink;
    font-size: 18px;
}

.icon-truck {
    color: pink;
    font-size: 16px;
}

.icon-profil-admin {
    width: 32px;
    height: 35px;
    border-radius: 50%;        /* cercle */
    object-fit: cover;         /* image bien cadrée */
    vertical-align: middle;
}

@media(max-width:768px){.container,.background-container,.link-container,.nav-container,footer{width:1450px;padding:10px}
        section{padding:15px;margin:15px 0}
        .form-container{width:100%;margin-left:0}
        h2{font-size:18px;margin-bottom:20px}
        h3{font-size:16px;margin-bottom:5px}
        ul{font-size:18px}
        li{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%}
        .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}
        .link-container,.title-container{width:100%;font-size:16px;padding:8px 6px;white-space:normal}
        .link-container a,.title-container a{font-size:16px;line-height:1.3;padding:8px 0}  
        @media(max-width:400px){footer{padding:12px 8px;font-size:13px;gap:5px}}}

@media(max-width:480px){
    .container,.background-container,.link-container,.nav-container{width:1450px;padding:10px}
    h2{font-size:16px;margin-bottom:20px}h3{font-size:14px;margin-bottom:5px}
    ul,li{font-size:14px}form{padding:5px}.form-group label,.form-group input,
    .form-group textarea,.link-container{font-size:14px}
    .success-messages,.error-message{font-size:12px}
    @media(max-width:400px){footer{padding:12px 8px;font-size:13px;gap:5px;width:100%}}}
</style>
