body{ background:linear-gradient(to top,#000 0%,#1a3a6e 55%,#2a5298 100%); min-height:100vh; font-family:'Segoe UI',system-ui,sans-serif; color:rgba(255,255,255,.88); display:flex;flex-direction:column; } #pgbar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#4a90e2,#00c6ff);z-index:999;width:0%;pointer-events:none;transition:width .2s;} #logo{text-align:center;margin-top:18px;} #logo img{width:200px;} #titreaccueil{text-align:center;margin:clamp(12px,3vh,22px) auto clamp(10px,2vw,18px);color:#fff;font-size:clamp(18px,2.5vw,28px);letter-spacing:2px;font-weight:800;} #titreaccueil span{color:#4a90e2;} #titreaccueil .sub{display:block;font-size:13px;font-weight:400;letter-spacing:.08em;color:rgba(255,255,255,.4);margin-top:5px;} .menu-barre{ background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center; padding:clamp(8px,1.5vw,14px);width:90%; margin:0 auto clamp(10px,2.5vw,20px);border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.4); } .menu-barre a{ position:relative;color:#fff;text-decoration:none;font-weight:600; padding:clamp(7px,1.2vw,11px) clamp(7px,1.2vw,14px);border-radius:8px; flex:1;min-width:100px;text-align:center;transition:all .3s; font-size:clamp(12px,1.1vw,15px);overflow:hidden; } .menu-barre a::after{ content:'';position:absolute;width:0%;height:3px; bottom:5px;left:50%;background:#fff;transition:.3s;transform:translateX(-50%); } .menu-barre a:hover::after{width:60%;} .menu-barre a:hover{transform:translateY(-4px);background:rgba(255,255,255,.14);} .menu-barre a.active{background:rgba(74,144,226,.18);color:#4a90e2;} .menu-barre a.active::after{width:60%;background:#4a90e2;} #page{width:90%;max-width:900px;margin:32px auto 60px;display:flex;flex-direction:column;gap:28px;} .card{ background:rgba(255,255,255,.07);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:28px 32px; box-shadow:0 8px 32px rgba(0,0,0,.35);transition:box-shadow .2s; } .card:hover{box-shadow:0 12px 40px rgba(74,144,226,.15);} .card-header{display:flex;align-items:center;gap:16px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1);} .card-num{font-size:11px;font-weight:700;letter-spacing:.18em;color:#4a90e2;text-transform:uppercase;background:rgba(74,144,226,.15);border:1px solid rgba(74,144,226,.35);border-radius:6px;padding:4px 10px;white-space:nowrap;} .card-title{font-size:18px;font-weight:700;color:#fff;letter-spacing:.01em;} .body-text{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.65);margin-bottom:18px;} .body-text b,.body-text strong{color:rgba(255,255,255,.9);font-weight:600;} .sub-title{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4a90e2;margin:24px 0 12px;display:flex;align-items:center;gap:10px;} .sub-title::before{content:'';display:inline-block;width:20px;height:2px;background:linear-gradient(90deg,#4a90e2,#00c6ff);border-radius:2px;} .diagram-box{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:20px;text-align:center;margin:16px 0;} .diagram-box img{max-width:100%;border-radius:6px;display:block;margin:0 auto;} .diagram-caption{font-size:11px;color:rgba(255,255,255,.3);margin-top:10px;letter-spacing:.08em;text-transform:uppercase;} .table-wrap{overflow-x:auto;margin:12px 0 20px;border-radius:8px;border:1px solid rgba(255,255,255,.1);} table{width:100%;border-collapse:collapse;font-size:12.5px;} thead tr{background:rgba(74,144,226,.2);} thead th{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4a90e2;padding:11px 14px;text-align:left;border-bottom:1px solid rgba(74,144,226,.3);white-space:nowrap;} tbody tr{border-bottom:1px solid rgba(255,255,255,.06);transition:background .12s;} tbody tr:last-child{border-bottom:none;} tbody tr:hover{background:rgba(255,255,255,.05);} tbody td{padding:10px 14px;color:rgba(255,255,255,.65);vertical-align:top;line-height:1.5;} tbody td:first-child{color:rgba(255,255,255,.9);font-weight:600;white-space:nowrap;} .tc{color:#4a90e2!important;}.tg{color:#34d399!important;}.ta{color:#fbbf24!important;} .steps{display:flex;flex-direction:column;gap:2px;margin:14px 0;position:relative;} .steps::before{content:'';position:absolute;left:15px;top:28px;bottom:14px;width:1px;background:rgba(74,144,226,.25);} .step{display:flex;gap:14px;padding:12px 0;position:relative;} .step-dot{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:rgba(74,144,226,.15);border:1.5px solid rgba(74,144,226,.45);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#4a90e2;z-index:1;transition:all .2s;} .step:hover .step-dot{background:rgba(74,144,226,.3);border-color:#4a90e2;} .step-body{padding-top:4px;} .step-title{font-size:13px;font-weight:600;color:rgba(255,255,255,.9);margin-bottom:2px;} .step-desc{font-size:12px;color:rgba(255,255,255,.45);font-family:Consolas,monospace;} .box{border-radius:10px;padding:15px 18px 15px 20px;margin:16px 0;border:1px solid;position:relative;padding-left:22px;} .box::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:10px 0 0 10px;} .box-info{background:rgba(74,144,226,.1);border-color:rgba(74,144,226,.25);} .box-info::before{background:linear-gradient(180deg,#4a90e2,#00c6ff);} .box-warn{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.25);} .box-warn::before{background:#fbbf24;} .box-ok{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.25);} .box-ok::before{background:#34d399;} .box-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;} .box-info .box-label{color:#4a90e2;}.box-warn .box-label{color:#fbbf24;}.box-ok .box-label{color:#34d399;} .box ul{list-style:none;display:flex;flex-direction:column;gap:5px;} .box ul li{font-size:12.5px;color:rgba(255,255,255,.6);padding-left:14px;position:relative;line-height:1.55;} .box ul li::before{content:'›';position:absolute;left:0;font-size:13px;} .box-info ul li::before{color:#4a90e2;}.box-warn ul li::before{color:#fbbf24;}.box-ok ul li::before{color:#34d399;} .box ul li b,.box ul li strong{color:rgba(255,255,255,.85);} .blist{list-style:none;display:flex;flex-direction:column;gap:7px;margin:12px 0;} .blist li{font-size:13px;color:rgba(255,255,255,.6);padding-left:18px;position:relative;line-height:1.6;} .blist li::before{content:'▸';position:absolute;left:0;color:#4a90e2;font-size:11px;top:2px;} .blist li b,.blist li strong{color:rgba(255,255,255,.88);} .type-row{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0;} .type-pill{flex:1;min-width:180px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:16px;position:relative;overflow:hidden;transition:border-color .2s;} .type-pill:hover{border-color:rgba(74,144,226,.5);} .type-pill::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;} .tp-cyan::after{background:linear-gradient(90deg,#4a90e2,#00c6ff);} .tp-purple::after{background:linear-gradient(90deg,#8b5cf6,#c084fc);} .tp-green::after{background:linear-gradient(90deg,#10b981,#34d399);} .tp-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px;} .tp-cyan .tp-label{color:#4a90e2;}.tp-purple .tp-label{color:#c084fc;}.tp-green .tp-label{color:#34d399;} .tp-sens{font-size:11px;color:rgba(255,255,255,.35);margin-bottom:7px;font-family:Consolas,monospace;} .tp-desc{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.5;} .cover-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:24px;} .cc{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px;position:relative;overflow:hidden;transition:all .2s;} .cc:hover{background:rgba(255,255,255,.1);transform:translateY(-2px);} .cc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#4a90e2,#00c6ff);} .cc-num{font-size:10px;font-weight:700;letter-spacing:.12em;color:#4a90e2;margin-bottom:6px;} .cc-title{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85);line-height:1.35;} .vlan-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;} .vlan-tag{font-size:11px;font-weight:600;padding:5px 12px;border-radius:5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);} .vlan-tag span{color:#4a90e2;} #footer{text-align:center;padding:20px;font-size:11px;color:rgba(255,255,255,.2);letter-spacing:.1em;border-top:1px solid rgba(255,255,255,.07);margin-top:auto;} ::-webkit-scrollbar{width:6px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:rgba(74,144,226,.3);border-radius:3px;} ::-webkit-scrollbar-thumb:hover{background:rgba(74,144,226,.6);}