<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}
.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:2px;display:flex;align-items:center}
.form-group label{width:210px;font-size:16px;margin-right:10px;text-align:right}
.form-group input,.form-group select,.form-group option,.form-group textarea{width:calc(100% - 210px);padding:3px;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;display:flex;align-items:center;justify-content:center;text-align:center;word-wrap:break-word;overflow-wrap:break-word;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;text-decoration:none;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:16px;text-decoration:none}
.link-container a:hover{color:#FF5733}
.title-container{position:relative;background:#f4f4f4;font-size:16px;text-align:center;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;width:100%;margin:0;padding:0;box-shadow:0 0 15px rgba(0,0,0,.2);box-sizing:border-box;border:2px solid lightgray;border-radius:10px}
.title-container a{color:blue;font-size:20px;text-decoration:none}
.title-container a:hover{color:#FF5733}

.affNcplet {
    z-index:10; position:relative; display:flex; margin:-10px 0 0 -40px; top:50px; background-color:green; display:flex; align-items:center; justify-content:center; color:white; 
    border:none; text-align:center;  border-radius:8px; box-shadow:0 0 15px rgba(0,0,0,.2);
    height:30px; padding:0 2px; max-width:75%; width:250px;
}
.affNcplet h1 { color:white; font-size:20px; width:90%; margin:0; }
 .welcome-div{position:relative;background:#DFF2FF;display:flex;flex-wrap:wrap;z-index:4;top:20px;border-radius:8px;box-shadow:0 0 15px rgba(0,0,0,.2);font-size:16px;padding:5px; max-width:450px; display:flex;flex-direction:column;justify-content:flex-start; align-items:center; text-align:center;margin:0 auto;}

header,.piedsPage{display:flex;position:fixed; z-index:990; left:0;width:100%;background:#3049A1;color:#fff;padding:10px 30px 10px 20px;height:40px;text-align:center;font-size:16px;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.1);box-sizing:border-box}
header{top:0;border-radius:10px 10px 0 0}
.piedsPage{bottom:0;border-radius:0 0 10px 10px}

/* ===== ICONES MENU ===== */
.menu-icon-right{position:fixed;width:35px;height:35px;cursor:pointer;z-index:1000;top:15px;right:30px}
.menu-icon-right div{width:100%;height:5px;background:black;margin:6px 0;transition:0.4s}

/* ===== MENU DÉROULANT À DROITE ===== */
.menu-right{position:fixed;z-index:991; width:320px;height:80%;background:#fff;color:blue;padding-top:20px;transition:0.4s ease;overflow-y:auto;overflow-x:auto;border:2px solid blue;box-shadow:0 4px 8px rgba(0,0,0,0.2);top:60px;right:-330px}
.menu-right.open{right:0}
.menu-right a{display:block;color:#fff;padding:8px;text-decoration:none;font-size:18px;text-align:center;border-bottom:1px solid #D3D3D3}
.menu-right a:hover{background:#575757;color:#fff}


.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;}
  
   
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{text-align:center;padding:0;left:0; background-color:#3049A1;color:#fff;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:#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}

.compteur { display:inline-block; padding:10px 15px; background:#111; border-radius:10px; border:2px solid #276FF5; box-shadow:0 0 15px #0f0; }
.chiffres { font-family: 'Digital-7 Mono', monospace; font-size:20px; letter-spacing:8px; text-shadow:0 0 20px #0f0; }

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}

.lien-actions { display:flex; justify-content:center; position:relative; font-size:16px; margin:0; padding:0; }
.lien-droite { position:absolute; right:20px; }
.lien-centre { text-align:center; }

/*  Smartphone : empiler les liens */
@media (max-width:600px) {
    .lien-actions { flex-direction:column; align-items:center; }
    .lien-droite { position:static; margin-top:10px; }
}


@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}}
@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{font-size:16px}form{padding:5px}.form-group label{font-size:14px}.form-group input,.form-group textarea{font-size:14px}.link-container{font-size:14px}ul{font-size:14px}li{font-size:14px}.success-messages,.error-message{font-size:12px}}

</style>
