/* tubes.as2027.net. Styles repris de Series of Tubes (src/styles/00-base, 10-hud, 20-drawers, 60-phone),
   MIT (c) 2026 Frederic Jung, voir LICENSE-seriesoftubes.txt. Polices Baloo 2 et Nunito (OFL) servies ici. */
@font-face{font-family:'Baloo 2';font-weight:400 800;font-display:swap;src:url('/tubes/fonts/baloo2-latin.woff2') format('woff2');}
@font-face{font-family:'Nunito';font-weight:200 1000;font-display:swap;src:url('/tubes/fonts/nunito-latin.woff2') format('woff2');}

:root{
  --sea:#57C4E5; --sea2:#3AA6CF; --land:#9BDA6C; --sand:#F8E6A8;
  --ink:#1E2640; --ink2:#55608A; --paper:#FFFFFF; --soft:#EEF5FB; --line:#D5DEEC;
  --me:#FF4F9A; --sun:#FFD23F; --ok:#22C47A; --warn:#FFAA1F; --bad:#FF4D5E;
  --display:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --body:'Nunito',system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--sea);color:var(--ink);font-family:var(--body);overflow:hidden;font-size:14px;-webkit-font-smoothing:antialiased}
#map{position:fixed;inset:0;width:100%;height:100%;touch-action:none;display:block;cursor:grab}
#map.pt{cursor:pointer}
#map.drag{cursor:grabbing}
h2,h3,h4{font-family:var(--display);margin:0;line-height:1.1}
button{font:inherit;color:inherit}
button,.chip,.b,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.card{background:var(--paper);border:3px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink)}
.num{font-variant-numeric:tabular-nums}

/* HUD */
#hud{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;pointer-events:none;z-index:5}
#hud>*{pointer-events:auto}
.chip{background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);padding:3px 11px;display:flex;flex-direction:column;justify-content:center;min-height:46px;color:var(--ink);text-decoration:none}
.chip .lbl{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.chip .val{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.05;white-space:nowrap}
.chip .sub{font-size:11px;font-weight:800;white-space:nowrap;color:var(--ink2)}
.brand{flex-direction:row;align-items:center;gap:9px;background:var(--me);color:#fff}
.brand .val{font-size:20px}
.brand .lbl{color:#FFE0EE}
.tube{width:30px;height:30px;flex:none}
.speed{flex-direction:row;align-items:center;gap:4px;padding:4px 6px}
.speed button{border:2.5px solid var(--ink);background:var(--paper);border-radius:9px;min-width:34px;height:32px;font-family:var(--display);font-weight:800;cursor:pointer;font-size:15px;line-height:1}
.speed button.on{background:var(--sun)}
.spacer{flex:1}
.noc{cursor:pointer;font:inherit;text-align:left}
.noc.hot{background:var(--bad);color:#fff;animation:throb 1s ease-in-out infinite}
.noc.hot .lbl{color:#FFE1E4}
@keyframes throb{50%{transform:scale(1.05)}}
.minibar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:2px;width:100%}
.minibar i{display:block;height:100%;background:var(--ok)}

/* tiroirs */
#left{position:fixed;top:calc(env(safe-area-inset-top,0px) + 76px);left:max(12px,env(safe-area-inset-left,0px));width:300px;max-height:calc(100% - 96px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;z-index:4}
#panel{position:fixed;top:calc(env(safe-area-inset-top,0px) + 76px);right:max(12px,env(safe-area-inset-right,0px));width:370px;max-height:calc(100% - 96px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;z-index:4}
.scroll{overflow:auto;padding:12px 14px 14px;overscroll-behavior:contain}
.tabs{display:flex;gap:4px;padding:8px 8px 0;border-bottom:3px solid var(--ink);flex:none}
.tabs button{border:2.5px solid var(--ink);border-bottom:none;border-radius:11px 11px 0 0;background:var(--soft);padding:4px 10px 3px;font-family:var(--display);font-weight:800;cursor:pointer;font-size:13.5px;position:relative;top:3px}
.tabs button.on{background:var(--paper);padding-bottom:6px}
.tabs .cnt{display:inline-block;background:var(--me);color:#fff;border-radius:9px;padding:0 6px;font-size:11px;margin-left:4px}
.tabs .cnt.red{background:var(--bad)}
#leftToggle{display:none}

.ph{display:flex;align-items:flex-start;gap:8px;padding:12px 14px 8px;border-bottom:3px solid var(--ink);flex:none}
.ph h2{font-size:26px}
.eyebrow{font-size:10.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.x{margin-left:auto;border:2.5px solid var(--ink);background:var(--paper);border-radius:10px;width:32px;height:32px;font-size:20px;line-height:1;cursor:pointer;font-weight:900;flex:none}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fact{background:var(--soft);border:2px solid var(--ink);border-radius:9px;padding:1px 8px;font-size:12px;font-weight:700}
.fact.mine{background:var(--me);color:#fff}
.fact.ixf{background:#FFF3C4}
.fact.down{background:var(--bad);color:#fff}
section{padding:10px 0;border-bottom:2px dashed var(--line)}
section:last-child{border-bottom:none}
section h3{font-size:17px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.lead{margin:0 0 8px;color:var(--ink2);font-size:12.5px;line-height:1.45}
.note{margin:6px 0 0;color:var(--ink2);font-size:12.5px;line-height:1.4}
.note a{color:var(--ink)}
.kv{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin:3px 0}
.kv b{font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line);cursor:pointer}
.row:first-of-type{border-top:none}
.row:hover .nm{color:var(--me)}
.row .grow{flex:1;min-width:0}
.row .nm{font-weight:800;font-size:13.5px;line-height:1.2}
.row .meta{font-size:11.5px;color:var(--ink2);line-height:1.3}
.row .pc{font-family:var(--display);font-weight:800;font-size:14px;min-width:38px;text-align:right}
.b{font-family:var(--display);font-weight:800;border:2.5px solid var(--ink);border-radius:11px;background:var(--sun);box-shadow:0 3px 0 var(--ink);padding:4px 11px 3px;cursor:pointer;font-size:14px;line-height:1.2;white-space:nowrap;transition:transform .06s;color:var(--ink)}
.b:hover{filter:brightness(1.05)}
.b:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.b.pink{background:var(--me);color:#fff}
.b.sm{font-size:12px;padding:2px 8px 1px;border-radius:9px;box-shadow:0 2px 0 var(--ink)}
.logo{width:30px;height:30px;border-radius:50%;background:var(--c);border:2.5px solid var(--ink);display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:11px;flex:none;letter-spacing:-.02em}
.logo.hex{border:0;border-radius:0;background:none;position:relative;color:var(--ink)}
.logo.hex::before{content:"";position:absolute;inset:0;background:var(--ink);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.logo.hex::after{content:"";position:absolute;inset:3px;background:var(--sun);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.logo.hex span{position:relative;z-index:1;font-size:10px}
.logo.rt{border-radius:9px;background:var(--me)}
.bar{height:11px;border:2px solid var(--ink);border-radius:7px;background:var(--paper);overflow:hidden;margin:3px 0}
.bar>i{display:block;height:100%;background:var(--ok);transition:width .3s}
.bar.warn>i{background:var(--warn)} .bar.bad>i{background:var(--bad)} .bar.idle>i{background:#AFC0D6}
.oplogo{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:5px 10px;border:2.5px solid var(--ink);border-radius:11px;background:#fff;margin-bottom:6px}
.oplogo.dark{background:var(--ink)}
.oplogo img{height:26px;width:auto;max-width:150px}
form.lg{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
form.lg select,form.lg input{font:700 13px var(--body);border:2.5px solid var(--ink);border-radius:10px;padding:4px 8px;background:var(--paper);color:var(--ink)}
form.lg input{flex:1 1 140px;min-width:0}

/* tablette et telephone (repris de 50-tablet et 60-phone, simplifie) */
@media (max-width:1100px){.hide-sm{display:none!important}}
@media (max-width:760px){
  #hud{gap:6px}
  .chip{min-height:40px;padding:2px 8px}
  .chip .val{font-size:16px}
  .brand .val{font-size:17px}
  .live,.chip.speed #bHelp{display:none}
  #left,#panel{top:auto;left:0;right:0;width:auto;bottom:0;max-height:min(58%,calc(100% - 120px));border-radius:20px 20px 0 0;border-bottom:0;box-shadow:0 -3px 0 var(--ink);z-index:7}
  #left.closed{display:none}
  #leftToggle{display:block;position:fixed;left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:6}
}