 <style>
body {
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    margin: 0; padding: 0; color: #333;
    width: 100vw; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
}

header, .piedsPage {
    position: fixed; left: 0; width: 100%;
    background-color:#3049A1; color: #fff;
    padding: 10px 30px 10px 20px;
    text-align: center; font-size: 14px;
    z-index: 1000; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
header { top: 0; border-radius: 10px 10px 0 0; }
.piedsPage { bottom: 0; border-radius: 0 0 10px 10px; }

.download-box, .note_box, .summary, .section-title, .sub-title, .link-container, .title-container,
.formula, .table-container, .fieldset-container, .fixed-menu, .sidebar, .content {
    box-sizing: border-box;
}

.affNcplet {
    z-index:6; margin:10px 0 0 -50px; background-color:green; display:flex; align-items:center; justify-content:center; color:white; 
    border:none; box-shadow:none; text-align:center; position:relative; top:50px; 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; }

.download-box {
    background: #f0f8ff; padding: 20px; border-left: 5px solid #4682b4;
    border-radius: 5px; text-align: center; margin-bottom: 20px;
}
.download-box a { text-decoration: none; color: #fff; background: #4682b4; padding: 10px 20px; border-radius:5px; font-weight:bold;}
.download-box a:hover { background: #2c5d8a; }

.note_box { background: #FAFAFA; padding: 10px; border-left: 4px solid #4682b4; margin-bottom: 10px; font-size:16px; }
.summary { background: #d1ecf1; padding: 15px; border-left: 5px solid #0c5460; }

.content {
    background: #fff; padding: 20px; border-radius: 8px; margin-top: 20px; font-size:18px;
    box-shadow:0 0 10px rgba(0,0,0,0.1);
}
.content img { max-width:100%; height:auto; display:block; margin:20px auto; }
.content ul, ul.niveau1 { list-style: disc; padding-left:20px; margin-bottom:20px; font-size:18px; }
ul.niveau2 { list-style:none; padding-left:25px; }
ul.niveau2 li::before { content:"– "; color:#333; }
ul li { margin-bottom:5px; line-height:1.5; }

.container {
    position: relative; top:0; left:0; margin:0; padding:0;
    width:100vw; min-height:100vh; display:flex; flex-direction:column;
    justify-content:flex-start; align-items:center; overflow:hidden;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
}

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

.section-title { background: linear-gradient(135deg,#d3d3d3,#f5f5f5); font-size:18px; font-weight:bold; color:#000; text-align:center; padding:10px; }
.sub-title { font-weight:bold; color:#2c3e50; margin-top:10px; }
.italic-text { font-style:italic; }

.link-container, .title-container {
    position: relative; text-align:center; margin:5px; padding:2px 4px; border-radius:8px;
    box-shadow:0 0 15px rgba(0,0,0,0.2); background:#fff; font-size:20px; color:blue; text-decoration:none; white-space:nowrap; text-overflow:ellipsis; z-index:20;
}
.link-container a, .title-container a { color:blue; font-size:18px; text-decoration:none; }
.link-container a:hover, .title-container a:hover { color:#FF5733; }
.title-container { width:100%; margin:0; padding:0; box-shadow:0 0 15px rgba(0,0,0,0.2); border:2px solid lightgray; border-radius:10px; }
.fieldset-container { width:920px; height:200px; border:1px solid #000; margin:5px auto; }
.fieldset-container fieldset { width:100%; height:100%; border:none; }

.table-container { width:95%; max-height:450px; margin:20px auto; overflow:auto; border-radius:10px; background:#f5f5f5; border:1px solid #ccc; box-shadow:0 0 15px rgba(0,0,0,0.2);}
.table-container table, table { width:100%; border-collapse:collapse; font-size:16px; min-width:600px; margin:5px auto; box-shadow:0 0 15px rgba(0,0,0,0.2); border-radius:10px; overflow:hidden; background:#f5f5f5; }
.table-container th, .table-container td, table th, table td { border:1px solid #ccc; padding:10px; text-align:center; }
.table-container th, table th { background:#f4f4f4; font-weight:bold; position:sticky; top:0; z-index:2; }
table tr:nth-child(even) { background:#fff; }

.centered-image { width:30%; height:auto; display:block; margin:0 auto; object-fit:cover; }
.image-container { display:flex; justify-content:center; gap:10px; }

.fixed-menu { position:fixed; top:325px; right:20px; width:100px; text-align:center; z-index:10; display:flex; flex-direction:column; }
.fixed-menu .dropbtn { background:transparent; color:green; font-size:14px; border:none; cursor:pointer; width:100%; padding:8px; }
.fixed-menu .dropdown { position:relative; display:inline-block; width:100%; }
.fixed-menu .dropdown-content { display:none; position:absolute; top:60px; right:-15px; background:#f9f9f9; min-width:130px; box-shadow:0 8px 16px rgba(0,0,0,0.2); border-radius:5px; overflow:hidden; z-index:20; }
.fixed-menu .dropdown-content a { color:#333; padding:10px 15px; text-decoration:none; display:block; font-size:13px; }
.fixed-menu .dropdown-content a:hover { background:#d4edda; }
.fixed-menu .dropdown.show .dropdown-content { display:block; }

.sidebar { position:fixed; top:115px; right:10px; display:flex; flex-direction:column; align-items:center; gap:5px; z-index:10; }
.sidebar a { text-decoration:none; }
.sidebar img { width:45px; height:45px; }

.formula { display:block; background:#f9f9f9; border-left:4px solid #4CAF50; padding:12px 16px; margin:20px 0; font-family:"Courier New", monospace; font-size:16px; color:#333; overflow-x:auto; border-radius:6px; box-shadow:0 2px 5px rgba(0,0,0,0.05); }

hr, .ligne_hr { max-width:98%; margin:10px 0 0 -20px; border:none; border-top:1px solid #ccc; }

section { padding:20px; margin:10px 0 0 -20px; width:95%; font-size:18px; border-radius:10px; box-shadow:0 4px 6px rgba(0,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; }

.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-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;border:2px solid lightgray;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,.2);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%;}

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

.title-container {word-wrap: break-word; overflow-wrap: break-word; white-space: normal;  width:100%; margin:0 0 0 0; padding:0; box-shadow:0 0 15px rgba(0,0,0,0.2); border:2px solid lightgray; border-radius:10px; text-align:center; font-size:18px;}

.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;}
.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}
.sommaire { background:#f5f5f5; border:1px solid #ccc; padding:15px 0 0 15px; margin:0 0 25px -20px; width:97%; border-radius:8px; }
.sommaire h2 { font-size:20px; margin:0; }
.sommaire ul { list-style:none; padding-left:10px; }
.sommaire li { margin:5px 0; }
.sommaire a { color:#0066cc; text-decoration:none; }
.sommaire a:hover { text-decoration:underline; }

table, th, td { border:1px solid #999; border-collapse:collapse; }
table { width:100%; margin-bottom:25px; }
th, td { padding:8px; text-align:left; }
th { background:#eee; }

    .compteur {
      display: inline-block;
      padding: 10px 15px;   /*  padding: 40px 60px;*/
      background: #111;
      border-radius: 10px;
      border: 2px solid #276FF5;  ?*  #276FF5 #2795F5 */
      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;
    }
    
@media (max-width:768px){
  .container{width:95%}
  .content{padding:15px;margin-top:15px;font-size:16px}
  .image-container{flex-direction:column;align-items:center}
  .centered-image{width:80%;margin-bottom:10px}
  .fieldset-container{width:100%;height:auto}
  .content ul{margin-bottom:10px;font-size:16px}
  .content ul li{margin-bottom:15px;font-size:16px}
  .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 select,.form-group textarea{width:100%}
}
</style>
