/* ========================================================================= obs.krp.lu/aoe — interface « verre liquide » Données : API officielle Microsoft (api.ageofempires.com) ========================================================================= */ /* Polices Google : chargées depuis index.html (préconnexion + feuille dans ) et non plus par @import, qui les découvrait un aller-retour trop tard. */ /* Beaucoup de pseudos et de tags sont en chinois, japonais ou coréen : sans police CJK ils s'affichent en carrés vides. Noto Sans SC prend le relais. */ :root{ /* fonds */ --bg:#07060c; --bg-2:#0e0b17; /* verre */ --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.075); --glass-hi:rgba(255,255,255,.11); --stroke:rgba(255,255,255,.10); --stroke-2:rgba(255,255,255,.18); /* accents */ /* Améthyste : le thème par défaut depuis le 17/09/2026 (app.js, THEME_DEFAUT). Les mêmes valeurs ici évitent un éclair orange avant que le script ne pose le thème. */ --a1:#5b6cff; /* bleu-violet « communauté » (thème par défaut, voir THEME_DEFAUT dans app.js) */ --a2:#aab4ff; --a3:#8b5cf6; --a4:#3ddc97; --a5:#ff6b9d; --win:#31d08a; --loss:#ff5f6d; /* texte */ --txt:#f7f4ef; --muted:#a49db3; --dim:#6f6980; /* rayons façon deck.krp.hk (20/09/2026) : panneaux 20, cartes 14, petits éléments 10, pilules 999 */ --r:20px; --r-m:14px; --r-s:10px; --r-pill:999px; --mono:'Space Grotesk','Noto Sans SC',ui-monospace,monospace; --sh:0 24px 48px -28px rgba(0,0,0,.75); --sh-s:0 14px 30px -20px rgba(0,0,0,.7); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ min-height:100vh; color:var(--txt); font-family:Inter,'Noto Sans SC',system-ui,-apple-system,'Noto Sans CJK SC','Microsoft YaHei',sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; background: radial-gradient(1200px 700px at 8% -12%, color-mix(in srgb,var(--a1) 16%,transparent), transparent 60%), radial-gradient(1000px 640px at 92% -6%, color-mix(in srgb,var(--a3) 16%,transparent), transparent 58%), radial-gradient(900px 700px at 50% 108%, rgba(49,208,170,.09), transparent 62%), linear-gradient(180deg,var(--bg-2),var(--bg)); background-attachment:fixed; } /* grain très léger : casse les dégradés plats */ body::before{ content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E"); } a{color:var(--a2);text-decoration:none;transition:color .16s} a:hover{color:var(--a1)} h1,h2,h3,h4{font-family:'Space Grotesk','Noto Sans SC',sans-serif;font-weight:600;letter-spacing:-.022em;line-height:1.18} /* ---------------- structure ---------------- */ /* La page occupe la largeur disponible : mieux vaut un contenu large et lisible en entier qu'un contenu centré et tronqué par des « … ». */ .wrap{max-width:min(1720px, 95vw);margin:0 auto;padding:0 24px;position:relative;z-index:1} header.top{ position:sticky;top:0;z-index:60; background:rgba(10,8,14,.62); backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%); border-bottom:1px solid var(--stroke); } .top .wrap{display:flex;align-items:center;gap:20px;min-height:68px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:12px;font-family:'Space Grotesk';font-weight:700;font-size:18px;letter-spacing:-.03em;color:var(--txt)} .brand .mark{ width:36px;height:36px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(145deg,var(--a1),var(--a2) 55%,var(--a3)); color:#1a1008;font-size:14px;font-weight:800; box-shadow:0 6px 20px -4px color-mix(in srgb,var(--a1) 65%,transparent), inset 0 1px 0 rgba(255,255,255,.45); } .brand small{display:block;color:var(--dim);font-size:10.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase} nav.main{display:flex;gap:3px;margin-left:auto;flex-wrap:wrap; background:var(--glass);border:1px solid var(--stroke);border-radius:14px;padding:4px; backdrop-filter:blur(12px)} nav.main a{ padding:7px 14px;border-radius:10px;color:var(--muted);font-size:13.5px;font-weight:500; transition:.18s cubic-bezier(.4,0,.2,1);white-space:nowrap; } nav.main a:hover{background:var(--glass-2);color:var(--txt)} nav.main a.on{ background:linear-gradient(140deg,color-mix(in srgb,var(--a1) 24%,transparent),color-mix(in srgb,var(--a3) 20%,transparent)); color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px -6px color-mix(in srgb,var(--a1) 70%,transparent); } main{padding:32px 0 80px;min-height:60vh} /* ---------------- surfaces verre ---------------- */ .panel{ background:var(--glass); border:1px solid var(--stroke); border-radius:var(--r); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); box-shadow:var(--sh), inset 0 1px 0 rgba(255,255,255,.07); position:relative;overflow:hidden; } .panel::before{ content:'';position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent); } .pad{padding:22px 24px} .head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px} .head h2{font-size:20px} .head .sub{color:var(--muted);font-size:12.5px} .spacer{margin-left:auto} .grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} /* ---------------- tuiles ---------------- */ .tile{ background:var(--glass);border:1px solid var(--stroke);border-radius:var(--r-m); padding:16px 18px;position:relative;overflow:hidden; backdrop-filter:blur(20px) saturate(160%); box-shadow:var(--sh-s), inset 0 1px 0 rgba(255,255,255,.07); transition:transform .22s cubic-bezier(.34,1.4,.5,1), border-color .22s; } .tile:hover{transform:translateY(-3px);border-color:var(--stroke-2)} .tile::after{content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3))} .tile .k{color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;font-weight:700} .tile .v{font-family:'Space Grotesk';font-size:30px;font-weight:600;letter-spacing:-.03em;margin-top:6px; font-variant-numeric:tabular-nums; background:linear-gradient(135deg,#fff,#cfc6e6);-webkit-background-clip:text;background-clip:text;color:transparent} .tile .n{color:var(--muted);font-size:12px;margin-top:3px} /* ---------------- contrôles ---------------- */ select,input,button{ font:inherit;color:var(--txt);background:var(--glass-2); border:1px solid var(--stroke);border-radius:var(--r-s);padding:8px 12px;outline:none; transition:.18s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(10px); } select{appearance:none;padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a49db3' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center} select:focus,input:focus{border-color:var(--stroke-2);box-shadow:0 0 0 3.5px color-mix(in srgb,var(--a3) 20%,transparent)} button{cursor:pointer;font-weight:500} button:hover{background:var(--glass-hi);border-color:var(--stroke-2)} button:active{transform:scale(.97)} button.primary{background:linear-gradient(140deg,var(--a1),#e0432a);border-color:transparent;color:#fff;font-weight:600; box-shadow:0 8px 22px -8px color-mix(in srgb,var(--a1) 80%,transparent)} button:disabled{opacity:.35;cursor:not-allowed;transform:none} .field{display:flex;flex-direction:column;gap:5px} .field label{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.09em;font-weight:700} .search{position:relative;flex:1;min-width:190px;max-width:330px} .search input{width:100%;padding-left:34px;border-radius:13px} .search::before{content:'⌕';position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:17px;pointer-events:none} /* ---------------- tableaux ---------------- */ .tbl-wrap{overflow-x:auto;border-radius:var(--r-m);border:1px solid var(--stroke);background:rgba(0,0,0,.16)} table{width:100%;border-collapse:collapse;font-size:14px} thead th{ background:rgba(255,255,255,.045);color:var(--dim);font-size:10.5px;text-transform:uppercase; letter-spacing:.09em;font-weight:700;text-align:left;padding:12px 14px;white-space:nowrap; position:sticky;top:0;border-bottom:1px solid var(--stroke);backdrop-filter:blur(12px);z-index:2; } thead th.s{cursor:pointer;user-select:none;transition:color .15s} thead th.s:hover{color:var(--a2)} thead th .ar{opacity:.45;font-size:9px;margin-left:4px} tbody td{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle} tbody tr{transition:background .14s} tbody tr:hover{background:rgba(255,255,255,.045)} tbody tr:last-child td{border-bottom:none} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right} .rk{font-family:var(--mono);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums} .rk.t1{color:#ffd782;text-shadow:0 0 16px color-mix(in srgb,var(--a2) 55%,transparent)} .rk.t2{color:#e2e2ea}.rk.t3{color:#e0a06a} .pl{display:flex;align-items:center;gap:10px;min-width:170px} .av{width:28px;height:28px;border-radius:9px;object-fit:cover;background:var(--glass-2);flex:none;border:1px solid var(--stroke)} .pl .nm{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px} .elo{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums; background:linear-gradient(135deg,var(--a2),var(--a1));-webkit-background-clip:text;background-clip:text;color:transparent} .up{color:var(--win)}.down{color:var(--loss)} .chip{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.02em;border:1px solid transparent} .chip.w{background:rgba(49,208,138,.14);color:#5fe0aa;border-color:rgba(49,208,138,.28)} .chip.l{background:rgba(255,95,109,.14);color:#ff8f98;border-color:rgba(255,95,109,.28)} .chip.n{background:rgba(255,200,87,.13);color:var(--a2);border-color:rgba(255,200,87,.26)} .rgn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);white-space:nowrap} .rgn b{font-size:13px;font-weight:400} /* ---------------- barres ---------------- */ .bar{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;min-width:54px} .bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--a1),var(--a2)); box-shadow:0 0 12px -2px color-mix(in srgb,var(--a2) 60%,transparent)} .bar.v i{background:linear-gradient(90deg,var(--a3),var(--a5))} .wr{display:flex;align-items:center;gap:9px} .wr .p{font-family:var(--mono);font-size:12.5px;min-width:46px;text-align:right} /* ---------------- pagination ---------------- */ .pager{display:flex;align-items:center;gap:6px;justify-content:center;padding:18px 0 4px;flex-wrap:wrap} .pager button{padding:7px 12px;min-width:38px;font-family:var(--mono);font-size:13px;border-radius:10px} .pager button.on{background:linear-gradient(140deg,var(--a1),var(--a3));border-color:transparent;color:#fff;font-weight:700} .pager .info{color:var(--dim);font-size:12.5px;margin:0 10px} /* ---------------- graphiques ---------------- */ .ch{position:relative;width:100%} .chart{width:100%;height:auto;display:block;overflow:visible} .chart .gl{stroke:rgba(255,255,255,.075);stroke-width:1} .chart .axl{stroke:rgba(255,255,255,.18);stroke-width:1} .chart .ax{fill:var(--dim);font-size:11px;font-family:var(--mono);font-weight:500} .chart .cross{stroke:var(--a2);stroke-width:1;stroke-dasharray:3 3;opacity:.75} .chart .cdot{fill:var(--a2);stroke:var(--bg);stroke-width:2.5} .chart .bar-r{transition:opacity .15s} .chart .bar-r:hover{opacity:.75} .tipbox{ position:absolute;pointer-events:none;z-index:8; background:rgba(18,15,26,.94);border:1px solid var(--stroke-2);border-radius:11px; padding:7px 11px;backdrop-filter:blur(18px);box-shadow:var(--sh-s);white-space:nowrap; } .tipbox b{display:block;font-family:var(--mono);font-size:15px;color:var(--a2)} .tipbox span{display:block;font-size:11px;color:var(--muted);margin-top:1px} .one-pt{padding:36px 20px;text-align:center} .one-pt b{display:block;font-family:var(--mono);font-size:32px;color:var(--a2)} .one-pt span{display:block;color:var(--muted);font-size:13px;margin-top:4px} .one-pt em{display:block;color:var(--dim);font-size:12px;margin-top:12px;font-style:normal} .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px} .legend i{display:inline-block;width:11px;height:11px;border-radius:4px;margin-right:6px;vertical-align:-1px} /* ---------------- divers ---------------- */ .empty{padding:46px 20px;text-align:center;color:var(--dim);font-size:13.5px} .spin{width:26px;height:26px;border:2.5px solid rgba(255,255,255,.12);border-top-color:var(--a2); border-radius:50%;animation:sp .75s linear infinite;margin:44px auto} @keyframes sp{to{transform:rotate(360deg)}} .live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);font-family:var(--mono); background:rgba(49,208,138,.10);border:1px solid rgba(49,208,138,.26);padding:5px 11px;border-radius:20px} .live .d{width:7px;height:7px;border-radius:50%;background:var(--win);animation:pu 2.2s infinite} @keyframes pu{0%{box-shadow:0 0 0 0 rgba(49,208,138,.55)}70%{box-shadow:0 0 0 9px rgba(49,208,138,0)}100%{box-shadow:0 0 0 0 rgba(49,208,138,0)}} .crumb{color:var(--dim);font-size:12.5px;margin-bottom:14px} .crumb a{color:var(--muted)} footer{border-top:1px solid var(--stroke);padding:24px 0;color:var(--dim);font-size:12.5px;margin-top:20px} footer .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center} code{font-family:var(--mono);background:var(--glass-2);padding:2px 7px;border-radius:6px;font-size:12.5px;color:var(--a2)} pre{background:rgba(0,0,0,.34);border:1px solid var(--stroke);border-radius:var(--r-s);padding:15px;overflow-x:auto;font-size:12.5px;line-height:1.65} pre code{background:none;padding:0} .hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .hero .avb{width:84px;height:84px;border-radius:22px;border:1px solid var(--stroke-2);object-fit:cover; background:var(--glass-2);box-shadow:var(--sh-s)} .hero h1{font-size:30px} .tabs{display:flex;gap:4px;margin-bottom:18px;overflow-x:auto; background:var(--glass);border:1px solid var(--stroke);border-radius:14px;padding:4px;width:fit-content;max-width:100%} .tabs button{background:none;border:none;border-radius:10px;color:var(--muted);padding:8px 15px;white-space:nowrap;font-size:13.5px} .tabs button.on{background:linear-gradient(140deg,color-mix(in srgb,var(--a1) 22%,transparent),color-mix(in srgb,var(--a3) 20%,transparent));color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.16)} .fade-in{animation:fi .35s cubic-bezier(.2,.7,.3,1)} @keyframes fi{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} @media(max-width:780px){ .top .wrap{padding:11px 20px} nav.main{margin-left:0;width:100%;justify-content:flex-start} .hero h1{font-size:24px} .pad{padding:18px 16px} } /* ---------------- badges de centile ---------------- */ .pctl{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:700; letter-spacing:.03em;white-space:nowrap;border:1px solid transparent} .pctl.p0 {background:linear-gradient(135deg,rgba(255,200,87,.30),color-mix(in srgb,var(--a1) 26%,transparent));color:#ffd98a; border-color:color-mix(in srgb,var(--a2) 50%,transparent);box-shadow:0 0 16px -4px color-mix(in srgb,var(--a2) 60%,transparent)} .pctl.p1 {background:rgba(255,200,87,.15);color:#ffd08a;border-color:rgba(255,200,87,.35)} .pctl.p5 {background:color-mix(in srgb,var(--a3) 16%,transparent);color:#b7a4ff;border-color:color-mix(in srgb,var(--a3) 34%,transparent)} .pctl.p10{background:rgba(74,168,255,.14);color:#8ec8ff;border-color:rgba(74,168,255,.30)} .pctl.p25{background:rgba(49,208,170,.13);color:#7ee0c6;border-color:rgba(49,208,170,.28)} .pctl.p50{background:rgba(255,255,255,.07);color:var(--muted);border-color:var(--stroke)} .pctl.p99{background:rgba(255,255,255,.045);color:var(--dim);border-color:var(--stroke)} td.spark{white-space:nowrap;min-width:120px} td.spark .dlt{font-family:var(--mono);font-size:11.5px;margin-left:7px;font-weight:600} /* ---------------- civilisations ---------------- */ .civ{display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .civ .crest{flex:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))} .crest{vertical-align:middle} /* ---------------- sélecteur de langue ---------------- */ .langsel{display:flex;gap:2px;background:var(--glass);border:1px solid var(--stroke); border-radius:12px;padding:3px;backdrop-filter:blur(12px)} .langsel button{background:none;border:none;border-radius:9px;padding:5px 10px;font-size:12px; color:var(--muted);font-weight:600} .langsel button.on{background:linear-gradient(140deg,color-mix(in srgb,var(--a1) 24%,transparent),color-mix(in srgb,var(--a3) 20%,transparent));color:#fff} /* ---------------- bandeau de saison ---------------- */ .season-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap; background:linear-gradient(120deg,color-mix(in srgb,var(--a1) 14%,transparent),color-mix(in srgb,var(--a3) 12%,transparent)); border:1px solid var(--stroke-2);border-radius:var(--r-m);padding:12px 18px;margin-bottom:18px; backdrop-filter:blur(18px)} .season-bar .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--dim);font-weight:700} .season-bar .nm{font-family:'Space Grotesk';font-size:16px;font-weight:600} .season-bar .rest{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--muted)} /* ---------------- équipes dans les matchs ---------------- */ .teams{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .team{display:flex;flex-direction:column;gap:3px;min-width:0} .team .row{display:flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap} .team .row a{color:var(--txt)} .team .row a:hover{color:var(--a2)} .vs{font-family:var(--mono);font-size:11px;color:var(--dim);font-weight:700;padding:0 4px} .team.mine .row a{color:var(--a4)} /* ========================================================================= Dock inférieur (iOS) + recherche Spotlight + ajustements responsive ========================================================================= */ body{padding-bottom:104px} /* place pour le dock */ .dock{ position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:70; display:flex;gap:6px;padding:8px;max-width:calc(100vw - 24px);overflow-x:auto; background:rgba(20,16,28,.55); border:1px solid var(--stroke-2);border-radius:26px; backdrop-filter:blur(30px) saturate(200%); -webkit-backdrop-filter:blur(30px) saturate(200%); box-shadow:0 26px 60px -16px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.16); scrollbar-width:none; } .dock::-webkit-scrollbar{display:none} .dock a{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; width:66px;padding:8px 4px 7px;border-radius:19px;color:var(--muted); font-size:10.5px;font-weight:600;letter-spacing:-.01em;text-align:center;flex:none; transition:transform .28s cubic-bezier(.34,1.5,.5,1), background .2s, color .2s; } .dock a .ic{ width:30px;height:30px;border-radius:10px;display:grid;place-items:center; background:var(--glass-2);border:1px solid var(--stroke); transition:background .22s, box-shadow .22s, transform .28s cubic-bezier(.34,1.5,.5,1); } .dock a .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* Bouton « Moi » : la vignette Steam remplit la pastille du dock. */ .dock a .ic-moi{padding:0;overflow:hidden} .dock a .ic-moi .av{width:100%;height:100%;border:0;border-radius:inherit;background:transparent} .dock a:hover{color:var(--txt);transform:translateY(-5px)} .dock a:hover .ic{background:var(--glass-hi)} .dock a.on{color:#fff} .dock a.on .ic{ background:linear-gradient(145deg,var(--a1),var(--a3)); border-color:transparent;transform:translateY(-2px) scale(1.06); box-shadow:0 10px 24px -8px color-mix(in srgb,var(--a1) 85%,transparent), inset 0 1px 0 rgba(255,255,255,.4); } .dock a.on::after{ content:'';position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%; background:#fff;opacity:.85; } .dock a{position:relative} /* --- déclencheur de recherche dans la barre du haut --- */ .spot-trigger{ display:flex;align-items:center;gap:9px;min-width:230px; background:var(--glass);border:1px solid var(--stroke);border-radius:13px; padding:8px 12px;color:var(--dim);font-size:13px;cursor:pointer; backdrop-filter:blur(12px);transition:.2s; } .spot-trigger:hover{background:var(--glass-2);border-color:var(--stroke-2);color:var(--muted)} .spot-trigger .ph{flex:1;text-align:left} kbd{font-family:var(--mono);font-size:10.5px;background:var(--glass-2);border:1px solid var(--stroke); border-radius:6px;padding:2px 6px;color:var(--dim)} /* --- surcouche Spotlight --- */ .spot{position:fixed;inset:0;z-index:200;display:grid;place-items:start center; padding:12vh 20px 20px;background:rgba(5,4,8,.55);backdrop-filter:blur(10px); animation:fi .18s ease-out} .spot[hidden]{display:none} .spot-panel{ width:min(640px,100%); background:rgba(22,18,30,.86);border:1px solid var(--stroke-2);border-radius:22px; backdrop-filter:blur(36px) saturate(200%); box-shadow:0 40px 90px -20px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.16); overflow:hidden;animation:pop .24s cubic-bezier(.2,1.2,.4,1); } @keyframes pop{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}} .spot-input{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--stroke); color:var(--dim)} .spot-input input{flex:1;background:none;border:none;padding:0;font-size:17px;color:var(--txt)} .spot-input input:focus{box-shadow:none} .spot-results{max-height:min(52vh,420px);overflow-y:auto} .spot-results .r{display:flex;align-items:center;gap:12px;padding:11px 18px;cursor:pointer; border-bottom:1px solid rgba(255,255,255,.05);transition:background .12s} .spot-results .r:last-child{border-bottom:none} .spot-results .r:hover,.spot-results .r.sel{background:rgba(255,255,255,.07)} .spot-results .r .nm{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spot-results .hint{padding:22px 18px;color:var(--dim);font-size:13px;text-align:center} /* --- responsive --- */ @media(max-width:900px){ .spot-trigger{min-width:0;flex:1} .spot-trigger .ph,.spot-trigger kbd{display:none} .spot-trigger{justify-content:center;padding:8px} } @media(max-width:640px){ .wrap{padding:0 14px} .pad{padding:16px 14px} .top .wrap{min-height:56px;gap:10px} .brand small{display:none} .tile .v{font-size:24px} .hero{gap:14px} .hero .avb{width:64px;height:64px;border-radius:18px} .hero h1{font-size:21px} table{font-size:13px} thead th,tbody td{padding:8px 10px} .dock{bottom:10px;padding:6px;border-radius:22px;gap:2px} .dock a{width:58px;font-size:9.5px;padding:6px 2px 6px} .dock a .ic{width:27px;height:27px} body{padding-bottom:92px} .grid{gap:12px} .g2,.g3,.g4{grid-template-columns:1fr} } @supports(padding:max(0px)){ .dock{bottom:max(16px,env(safe-area-inset-bottom))} } /* ========================================================================= Barres de défilement : discrètes partout, jamais de barre horizontale visible sur les conteneurs qui défilent (dock, tableaux, onglets). ========================================================================= */ html{overflow-x:hidden} body{overflow-x:hidden} *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent} *::-webkit-scrollbar{width:8px;height:8px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px; border:2px solid transparent;background-clip:content-box} *::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26);background-clip:content-box} *::-webkit-scrollbar-corner{background:transparent} /* conteneurs à défilement horizontal : barre masquée, geste conservé */ .dock,.tbl-wrap,.tabs,.spot-results{-ms-overflow-style:none} .dock,.tabs{scrollbar-width:none} .dock::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none;width:0;height:0} .tbl-wrap{scrollbar-width:thin;overscroll-behavior-x:contain} .tbl-wrap::-webkit-scrollbar{height:6px} .tbl-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)} .tbl-wrap:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)} /* le dock ne doit jamais provoquer de débordement de la page */ .dock{max-width:min(980px, calc(100vw - 24px));width:max-content} /* ApexCharts : neutraliser les débordements du conteneur */ .ch{max-width:100%;overflow:hidden} .apexcharts-canvas{max-width:100%!important} .spark-ch{display:inline-block;vertical-align:middle;min-height:0!important;overflow:visible} .spark-ch .apexcharts-canvas{overflow:visible} /* ========================================================================= Listes déroulantes : les