/* Page de statut williampz.fr
   Reprise fidèle de la maquette (.design/live/project/Status.dc.html).
   Les styles inline de la maquette sont devenus des classes : la CSP interdit 'unsafe-inline'. */

/* ---------- polices auto-hébergées (OFL, voir /fonts/README.md) ---------- */
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-latin.woff2) format('woff2')}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-black-latin.woff2) format('woff2')}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/bebas-neue-latin.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-var.woff2) format('woff2')}

/* ---------- base (helmet de la maquette) ---------- */
body{margin:0;background:#0A0A0A}
*{box-sizing:border-box}
[hidden]{display:none !important}
a{color:#F5F1E8}a:hover{color:#FF9EC7}

@keyframes st-slash{0%{opacity:0;transform:translateX(-60px);clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%)}60%{opacity:1}100%{opacity:1;transform:translateX(0);clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%)}}
.st-enter{animation:st-slash .6s cubic-bezier(.2,.9,.15,1) backwards}
@keyframes st-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.st-axo{animation:st-bob 3.4s ease-in-out infinite;transform-origin:50% 90%}
@keyframes st-pulse{0%{box-shadow:0 0 0 0 rgba(255,45,61,.85)}70%{box-shadow:0 0 0 10px rgba(255,45,61,0)}100%{box-shadow:0 0 0 0 rgba(255,45,61,0)}}
@keyframes st-flash{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(8deg)}}
.st-alert{transform-origin:166px 34px;animation:st-flash .9s ease-in-out infinite}

/* Après un rafraîchissement, les blocs reconstruits ne rejouent pas l'animation d'entrée. */
.refreshed .st-enter{animation:none}

/* délais d'animation (ex-attributs style) */
.d0{animation-delay:0s}.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}.d5{animation-delay:.38s}
.dg0{animation-delay:.46s}.dg1{animation-delay:.58s}.dg2{animation-delay:.7s}.dg3{animation-delay:.82s}.dg4{animation-delay:.94s}.dg5{animation-delay:1.06s}.dg6{animation-delay:1.18s}.dg7{animation-delay:1.3s}.dg8{animation-delay:1.42s}.dg9{animation-delay:1.54s}.dg10{animation-delay:1.66s}.dg11{animation-delay:1.78s}.dg12{animation-delay:1.9s}
.df0{animation-delay:.56s}.df1{animation-delay:.68s}.df2{animation-delay:.8s}.df3{animation-delay:.92s}.df4{animation-delay:1.04s}.df5{animation-delay:1.16s}.df6{animation-delay:1.28s}.df7{animation-delay:1.4s}.df8{animation-delay:1.52s}.df9{animation-delay:1.64s}.df10{animation-delay:1.76s}.df11{animation-delay:1.88s}.df12{animation-delay:2s}

/* ---------- structure ---------- */
.page{position:relative;min-height:100vh;overflow:hidden;background:#0A0A0A;color:#F5F1E8;font-family:Inter,system-ui,sans-serif}
.deco-red{position:absolute;top:0;left:-10%;width:120%;height:430px;background:#E60012;clip-path:polygon(0 0,100% 0,100% 58%,0 100%)}
.deco-dots1{position:absolute;top:0;right:0;width:60%;height:420px;background-image:radial-gradient(circle,#0A0A0A 1.6px,transparent 2.1px);background-size:11px 11px;-webkit-mask-image:linear-gradient(220deg,#000 0%,transparent 60%);mask-image:linear-gradient(220deg,#000 0%,transparent 60%);opacity:.55}
.deco-dots2{position:absolute;top:900px;left:-5%;width:50%;height:900px;background-image:radial-gradient(circle,#F5F1E8 1.3px,transparent 1.8px);background-size:14px 14px;-webkit-mask-image:linear-gradient(40deg,#000 0%,transparent 55%);mask-image:linear-gradient(40deg,#000 0%,transparent 55%);opacity:.08}
.deco-star{position:absolute;top:300px;left:4%;width:56px;height:56px;transform:rotate(14deg)}
.deco-grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.14}
.wrap{position:relative;max-width:1120px;margin:0 auto;padding:24px 16px 56px;display:flex;flex-direction:column;gap:48px}

/* ---------- en-tête ---------- */
.hdr{display:flex;flex-direction:column;gap:22px}
.hdr-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.home-link{display:inline-block;background:#0A0A0A;color:#F5F1E8;font-family:Inter,sans-serif;font-weight:900;font-size:13px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;padding:6px 14px;transform:skewX(-12deg)}
.rt-tag{display:inline-block;border:2px solid #0A0A0A;color:#0A0A0A;font-family:Inter,sans-serif;font-weight:900;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:5px 12px;transform:skewX(-12deg)}
.hdr-title{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 20px}
.logo{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.lt{display:inline-block;padding:4px 12px 2px;line-height:.95}
.lt1{background:#F5F1E8;color:#0A0A0A;font-family:Anton,Impact,sans-serif;font-size:clamp(52px,14vw,104px);transform:rotate(-6deg)}
.lt2{background:#0A0A0A;color:#F5F1E8;font-family:'Archivo Black',sans-serif;font-size:clamp(40px,11vw,78px);transform:rotate(4deg) translateY(6px)}
.lt3{background:#0A0A0A;color:#E60012;border:3px solid #F5F1E8;font-family:'Bebas Neue',sans-serif;font-size:clamp(56px,15vw,112px);transform:rotate(-3deg)}
.lt4{background:#F5F1E8;color:#E60012;font-family:'Archivo Black',sans-serif;font-size:clamp(40px,11vw,76px);transform:rotate(7deg) translateY(-4px)}
.lt5{background:#FF9EC7;color:#0A0A0A;font-family:'Bebas Neue',sans-serif;font-size:clamp(54px,14.5vw,106px);transform:rotate(3deg)}
.lt6{background:#0A0A0A;color:#F5F1E8;outline:3px solid #0A0A0A;box-shadow:6px 6px 0 #F5F1E8;font-family:Anton,Impact,sans-serif;font-size:clamp(46px,12.5vw,92px);transform:rotate(-5deg)}
.axo{position:relative;width:176px;height:176px;flex:0 0 auto;margin-bottom:-10px}
.axo-layer{position:absolute;inset:0;width:100%;height:100%}

.upd{display:flex;flex-direction:column;gap:8px}
.upd-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;font-family:Inter,sans-serif;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.upd-row strong{font-weight:900}
.upd-cd{color:#FF9EC7}
.cd-track{height:6px;background:#2A2A2A;transform:skewX(-30deg)}
.cd-fill{height:100%;width:100%;background:#F5F1E8;transition:width 1s linear}

/* ---------- tags de section ---------- */
.sec-h{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.sec-h-flush{margin:0}
.sec-num{font-family:Anton,Impact,sans-serif;font-size:40px;line-height:1;color:#E60012}
.sec-t{margin:0;display:inline-block;background:#F5F1E8;color:#0A0A0A;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:28px;line-height:1;letter-spacing:.04em;text-transform:uppercase;padding:6px 18px;transform:skewX(-10deg)}
.sec-line{flex:1 1 40px;height:6px;background:#F5F1E8;opacity:.18;transform:skewX(-30deg)}

/* ---------- pastilles d'état ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:3px 12px 3px 3px;color:#0A0A0A;font-family:Inter,sans-serif;font-weight:900;font-size:13px;line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transform:skewX(-10deg)}
.chip>span{transform:skewX(10deg)}
.dot{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#0A0A0A;color:var(--c)}
.chip-ok{background:#1BC46B;--c:#1BC46B}
.chip-degrade{background:#FFB020;--c:#FFB020}
.chip-panne{background:#FF2D3D;--c:#FF2D3D}
.chip-maintenance{background:#A28BFF;--c:#A28BFF}
.chip-inconnu{background:#A8A39A;--c:#D8D3C9}
.chip-panne .dot{animation:st-pulse 1.3s ease-out infinite}

/* ---------- bandeau global ---------- */
.ban{display:block;border:3px solid #0A0A0A;color:#0A0A0A;transform:skewX(-10deg);box-shadow:8px 8px 0 #F5F1E8}
.ban-in{display:flex;align-items:center;gap:18px;padding:16px 26px;transform:skewX(10deg)}
.ban-ico{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:#0A0A0A;color:var(--c)}
.ban-txt{min-width:0}
.ban-t{margin:0;font-family:Anton,Impact,sans-serif;font-size:clamp(30px,7vw,48px);line-height:1;text-transform:uppercase;letter-spacing:.02em}
.ban-s{margin:6px 0 0;font-family:Inter,sans-serif;font-weight:800;font-size:15px;line-height:1.35}
.ban-ok{background:#1BC46B;--c:#1BC46B}
.ban-degrade{background:#FFB020;--c:#FFB020}
.ban-panne{background:#FF2D3D;--c:#FF2D3D}
.ban-maintenance{background:#A28BFF;--c:#A28BFF}

/* ---------- annonces ---------- */
.ann-list{list-style:none;margin:0;padding:0 10px 0 6px;display:flex;flex-direction:column;gap:18px}
.ann{display:block;background:#F5F1E8;color:#0A0A0A;border:3px solid #0A0A0A;transform:skewX(-8deg);box-shadow:7px 7px 0 var(--c)}
.ann-in{display:flex;flex-direction:column;gap:8px;padding:14px 22px 16px;transform:skewX(8deg)}
.ann-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ann-date{font-family:Inter,sans-serif;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;color:#3D3A35}
.ann-t{margin:0;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:24px;line-height:1.05;text-transform:uppercase}
.ann-m{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:15px;line-height:1.5}
.ann-maintenance{--c:#A28BFF}.ann-panne{--c:#FF2D3D}.ann-degrade{--c:#FFB020}.ann-inconnu{--c:#A8A39A}.ann-ok{--c:#1BC46B}

/* ---------- groupes + services ---------- */
.svc-sec{display:flex;flex-direction:column;gap:30px}
.grp{position:relative;background:#F5F1E8;color:#0A0A0A;border:3px solid #0A0A0A;box-shadow:8px 8px 0 #E60012}
.grp::before{content:"";position:absolute;top:-3px;right:-3px;width:44px;height:44px;background:#E60012;clip-path:polygon(0 0,100% 0,100% 100%)}
.grp-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:-3px 0 0 -3px}
.grp-tag{margin:0;background:#0A0A0A;color:#F5F1E8;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:26px;line-height:1;letter-spacing:.04em;text-transform:uppercase;padding:10px 34px 10px 20px;clip-path:polygon(0 0,100% 0,calc(100% - 20px) 100%,0 100%)}
.grp-count{font-family:Inter,sans-serif;font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#3D3A35}
.svc-list{list-style:none;margin:0;padding:0}
.svc{position:relative;padding:20px 22px 18px;border-top:2px solid #0A0A0A;transition:transform .2s cubic-bezier(.2,.9,.2,1)}
.svc:first-child{border-top:0}
.svc:hover{transform:translateX(6px)}
.svc-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.svc-id{flex:1 1 240px;min-width:0}
.svc-name{display:inline-block;margin-left:-8px;padding:3px 9px;font-family:Anton,Impact,sans-serif;font-size:25px;line-height:1;letter-spacing:.03em;text-transform:uppercase;transform:skewX(-10deg);transition:background .15s,color .15s}
.svc:hover .svc-name{background:#0A0A0A;color:#E60012}
.svc-desc{margin-top:6px;font-family:Inter,sans-serif;font-weight:600;font-size:13px;color:#3D3A35;overflow-wrap:anywhere}
.svc-players::before{content:" · "}
.metric{display:flex;flex-direction:column;gap:4px;min-width:92px}
.metric-l{font-family:Inter,sans-serif;font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#3D3A35}
.metric-v{font-family:Inter,sans-serif;font-weight:900;font-size:21px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;background:#0A0A0A;color:#F5F1E8;font-family:Inter,sans-serif;font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transform:skewX(-10deg)}
.toggle>*{transform:skewX(10deg)}
.toggle:hover,.toggle:focus-visible{background:#E60012;color:#0A0A0A}
.toggle:focus-visible,.seg:focus-visible,.back:focus-visible{outline:3px solid #0A0A0A;outline-offset:3px}
.chev{transition:transform .2s}.chev-open{transform:skewX(10deg) rotate(180deg)}

.bar-wrap{position:relative;margin-top:16px}
.bar{position:relative;display:flex;gap:2px;height:36px}
.seg{flex:1 1 0;min-width:0;padding:0;border:0;cursor:pointer;background:#1BC46B;transition:transform .12s}
.seg:hover,.seg-sel{outline:2px solid #0A0A0A;outline-offset:1px;transform:scaleY(1.18);position:relative;z-index:1}
.seg-degrade{background:repeating-linear-gradient(135deg,#FFB020 0 3px,#D98A00 3px 5px)}
.seg-panne{background:linear-gradient(#0A0A0A,#0A0A0A) top/100% 6px no-repeat,#FF2D3D}
.seg-maintenance{background:repeating-linear-gradient(45deg,#A28BFF 0 3px,#6F55DE 3px 5px)}
.seg-inconnu{background:repeating-linear-gradient(90deg,#C9C4BA 0 2px,#DDD8CE 2px 4px);cursor:default}
.bar-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.bar-empty>span{background:#0A0A0A;color:#F5F1E8;font-family:Inter,sans-serif;font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;transform:skewX(-10deg)}
.bar-cap{display:flex;justify-content:space-between;gap:12px;margin-top:7px;font-family:Inter,sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#3D3A35}
.only-m{display:none}
/* --l / --lm : position de l'infobulle, posées en JS via style.setProperty (autorisé par la CSP) */
.tip{position:absolute;z-index:5;bottom:calc(100% + 10px);left:var(--l);transform:translateX(calc(var(--l) * -1));width:max-content;max-width:min(300px,90vw);display:flex;flex-direction:column;gap:4px;padding:10px 13px;background:#0A0A0A;color:#F5F1E8;font-family:Inter,sans-serif;font-size:13px;line-height:1.4;box-shadow:5px 5px 0 #E60012;pointer-events:none}
.tip strong{font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.tip-up{font-weight:800;font-variant-numeric:tabular-nums}

.det{margin-top:16px;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px 26px;padding:16px 18px;background:#0A0A0A;color:#F5F1E8}
.det-main{min-width:0}
.det-l{display:block;margin-bottom:8px;font-family:Inter,sans-serif;font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#C9C4BA}
.det-v{display:block;font-family:Inter,sans-serif;font-weight:900;font-size:19px;font-variant-numeric:tabular-nums}
.det-v2{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:14px;line-height:1.45}
.det-nodata{margin:0}
.det-axis{display:flex;justify-content:space-between;margin-top:6px;font-family:Inter,sans-serif;font-weight:700;font-size:11px;color:#C9C4BA}
.det-side{display:flex;flex-direction:column;gap:16px}
.spark{display:block;width:100%;height:92px;background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(245,241,232,.08) 22px 23px)}

/* ---------- incidents ---------- */
.inc-sub{margin:-6px 0 16px;font-family:Inter,sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#C9C4BA}
.inc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.inc{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.8fr)) minmax(0,1.8fr);gap:12px 20px;align-items:start;padding:16px 20px;background:#F5F1E8;color:#0A0A0A;border:3px solid #0A0A0A}
.inc-l{display:block;margin-bottom:5px;font-family:Inter,sans-serif;font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#3D3A35}
.inc-v{display:block;font-family:Inter,sans-serif;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.inc-svc{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.inc-name{font-family:Anton,Impact,sans-serif;font-size:22px;line-height:1;text-transform:uppercase}
.inc-cause{font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:1.45}
.empty{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:22px 26px;background:#141414;border:3px dashed #FF9EC7;transform:skewX(-8deg)}
.empty>*{transform:skewX(8deg)}
.empty-axo{width:150px;height:98px;flex:0 0 auto}
.empty-txt{display:flex;flex-direction:column;gap:6px}
.empty-t{margin:0;font-family:Anton,Impact,sans-serif;font-size:clamp(24px,5vw,32px);line-height:1.05;text-transform:uppercase;color:#F5F1E8}
.empty-s{margin:0;font-family:Inter,sans-serif;font-weight:600;font-size:14px;color:#C9C4BA}

/* ---------- pied de page ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding-top:8px}
.back{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;background:#F5F1E8;color:#0A0A0A;border:3px solid #0A0A0A;text-decoration:none;font-family:Anton,Impact,sans-serif;font-size:22px;letter-spacing:.04em;text-transform:uppercase;transform:skewX(-10deg);box-shadow:6px 6px 0 #E60012;transition:transform .2s,background .15s,color .15s}
.back>*{transform:skewX(10deg)}
.back:hover{color:#0A0A0A;background:#E60012;transform:translateX(-8px) skewX(-10deg);box-shadow:8px 8px 0 #F5F1E8}
.copy{margin:0;background:#F5F1E8;color:#0A0A0A;font-family:Inter,sans-serif;font-weight:800;font-size:13px;letter-spacing:1.5px;padding:6px 14px;transform:skewX(-12deg)}

/* ---------- page d'erreur ---------- */
.err-box{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding-top:120px}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .inc{grid-template-columns:repeat(3,minmax(0,1fr))}
  .inc-svc,.inc-cause{grid-column:1 / -1}
  .det{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .seg-old{display:none}
  .only-d{display:none}
  .only-m{display:inline}
  .tip{left:var(--lm);transform:translateX(calc(var(--lm) * -1))}
  .svc{padding:18px 14px 16px}
  .metric{min-width:0;flex:1 1 90px}
  .ban-in{padding:14px 16px;gap:14px}
  .ban-ico{width:46px;height:46px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .svc:hover{transform:none}
  .back:hover{transform:skewX(-10deg)}
}