/* COCKPIT CRÉAS — Kaiso (07/10/2026). Même système que Covexia Studio v3 (skill ui-ux-pro-max, choix d'Aimad :
   violet du « Cockpit créas » de son ami, Plus Jakarta Sans + Inter + JetBrains Mono, verre violet-nuit). */
:root{
  color-scheme:dark;
  --bg:#0B0B16; --panel:rgba(22,21,42,.7); --panel2:rgba(42,40,74,.58); --panel3:rgba(64,61,104,.5);
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15); --line-strong:#7E7AA3;
  --tx:#F5F5FA; --tx2:#CBCBDA; --tx3:#9D9CB6;
  --acc:#A78BFA; --acc-soft:rgba(139,92,246,.13);
  --ok:#4ADE80; --warn:#FBBF24; --bad:#F87171; --info:#93C5FD; --teal:#5EEAD4;
  --ok-soft:rgba(74,222,128,.12); --warn-soft:rgba(251,191,36,.12); --bad-soft:rgba(248,113,113,.12); --info-soft:rgba(147,197,253,.12);
  --inset:rgba(5,5,14,.6); --surface:rgba(19,18,36,.97); --bar:rgba(11,11,22,.82);
  --gradient-sel:linear-gradient(135deg,#7C3AED 0%,#9333EA 100%);
  --gradient-cta:linear-gradient(135deg,#10B981 0%,#34D399 100%); --on-cta:#06261C;
  --glow:0 10px 30px -10px rgba(139,92,246,.7); --glow-cta:0 10px 30px -12px rgba(16,185,129,.6);
  --ring:0 0 0 3px rgba(167,139,250,.38);
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px -20px rgba(0,0,0,.9); --shadow-pop:0 28px 60px -18px rgba(0,0,0,.8);
  --or:#F5B841; --argent:#C7CEDB; --bronze:#D08B5B;
  --font-heading:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --dur:180ms; --ease:cubic-bezier(.4,0,.2,1); --largeur:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{scroll-padding-top:150px;scroll-padding-bottom:72px}   /* l'en-tête collant et les boutons flottants ne cachent jamais l'élément sélectionné au clavier */
button,a,select,input,summary{touch-action:manipulation}
body{background:var(--bg);color:var(--tx);font:13.5px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70rem 30rem at 35% -12%,rgba(124,58,237,.24),transparent 62%),
             radial-gradient(40rem 26rem at 105% 0%,rgba(79,70,229,.16),transparent 60%),
             radial-gradient(60rem 40rem at 90% 118%,rgba(168,85,247,.13),transparent 64%)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--acc)}
::selection{background:rgba(139,92,246,.4);color:#fff}
.sprite{display:none}
.ic{width:1em;height:1em;fill:currentColor;flex:none;vertical-align:-.125em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3,.brand b,.btn,.kpi b,.titre-carte,.podium b,.num{font-family:var(--font-heading);word-spacing:.08em}
.mono,.lab,.seg button,.pill,.chip-n,kbd,.top-status,.nav-g,.verdict,.roas,.th{font-family:var(--font-mono)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input:focus-visible,select:focus-visible{outline:0}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border:3px solid transparent;background-clip:padding-box;border-radius:20px}
.skip{position:fixed;left:12px;top:-64px;z-index:200;padding:10px 14px;border-radius:10px;border:1px solid var(--acc);background:var(--surface);color:var(--tx);font-weight:600;cursor:pointer;transition:top var(--dur) var(--ease)}
.skip:focus{top:12px}

/* ---------- en-tête ---------- */
.topbar{position:sticky;top:0;z-index:30;background:var(--bar);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.top-in{max-width:calc(var(--largeur) + 56px);margin:0 auto;padding:12px 28px 0}
.top-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:42px}
.spacer{flex:1}
.brand{display:flex;align-items:center;gap:10px}
.dot{display:grid;place-items:center;width:12px;height:12px;border-radius:4px;background:var(--gradient-sel);box-shadow:var(--glow)}
.brand b{font-size:19px;font-weight:800;letter-spacing:-.015em}
.brand-t{display:flex;align-items:baseline;gap:9px}
.brand-t span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.ctrl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.pill-select{appearance:none;-webkit-appearance:none;min-height:32px;padding:5px 30px 5px 13px;border:0;border-radius:9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),var(--gradient-sel);
  background-repeat:no-repeat,no-repeat;background-position:right 11px center,0 0;background-size:10px 6px,100% 100%;
  color:#fff;font-weight:700;font-size:12px;cursor:pointer;box-shadow:var(--glow)}
.pill-select option{background:#16152A;color:var(--tx)}
.seg{display:inline-flex;align-items:stretch;max-width:100%;border:1px solid var(--line2);border-radius:10px;background:var(--inset);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:none;white-space:nowrap;min-height:32px;min-width:34px;padding:0 9px;border:0;border-left:1px solid var(--line);background:none;color:var(--tx2);font-size:11.5px;font-weight:600;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.seg button:first-child{border-left:0}
.seg button:focus-visible{outline-offset:-3px}
.seg button:hover{color:#fff;background:rgba(255,255,255,.05)}
.seg button[aria-pressed="true"]{background:var(--gradient-sel);color:#fff}
.dates{display:inline-flex;align-items:center;gap:6px;color:var(--tx3);font-size:12px}
.dates input{min-height:32px;padding:4px 6px;border:1px solid var(--line-strong);border-radius:9px;background:var(--inset);color:var(--tx);font-family:var(--font-mono);font-size:11.5px}
.dates input:focus{border-color:var(--acc);box-shadow:var(--ring);outline:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:8px 16px;border:0;border-radius:10px;background:var(--gradient-sel);color:#fff;font-weight:700;font-size:13px;cursor:pointer;
  box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.22);transition:filter var(--dur) var(--ease),box-shadow var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}
.btn.vert{background:var(--gradient-cta);color:var(--on-cta);box-shadow:var(--glow-cta),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.ghost{background:rgba(255,255,255,.04);border:1px solid var(--line2);color:var(--tx2);box-shadow:none;font-weight:600}
.btn.ghost:hover{border-color:var(--line-strong);color:#fff;background:rgba(255,255,255,.08)}
.btn.sm{min-height:30px;padding:5px 11px;font-size:12px;border-radius:9px}
.btn .ic{width:15px;height:15px}
.btn.tourne .ic{animation:tourne 1s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.top-status{display:flex;align-items:center;gap:8px;margin:6px 0 0;font-size:11px;color:var(--tx3)}
.live{width:8px;height:8px;border-radius:2px;background:var(--ok);box-shadow:0 0 0 3px rgba(74,222,128,.16)}
.live.demo{background:var(--warn);box-shadow:0 0 0 3px rgba(251,191,36,.16)}
.live.erreur{background:var(--bad);box-shadow:0 0 0 3px rgba(248,113,113,.16)}
nav#nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin-top:4px}
.nav-g{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);white-space:nowrap}
.nav-g i{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--gradient-sel);color:#fff;font-style:normal;font-size:10px;font-weight:700}
.nav-sep{width:1px;height:18px;background:var(--line2)}
nav#nav a{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:42px;color:var(--tx2);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color var(--dur) var(--ease)}
nav#nav a:hover{color:#fff}
nav#nav a[aria-current="page"]{color:#fff;font-weight:600}
nav#nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--gradient-sel)}
nav#nav a .ic{width:14px;height:14px;color:var(--tx3)}
nav#nav a[aria-current="page"] .ic{color:var(--acc)}

/* ---------- contenu ---------- */
main{display:block;padding:26px 28px 90px}
main:focus{outline:0}
.wrap{max-width:var(--largeur);margin:0 auto}
.tete{margin:0 0 18px}
.tete h1{margin:0;font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.tete h1::after{content:"—" / "";margin-left:.3em;color:var(--acc)}   /* tiret violet de la référence (comme le Studio v3) */
.tete p{margin:6px 0 0;max-width:86ch;color:var(--tx3);font-size:13px}
.carte{position:relative;margin:0 0 16px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--shadow-card)}
.carte-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.titre-carte{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;font-weight:800}
.titre-carte .ic{color:var(--acc);width:17px;height:17px}
.carte-h .muted{font-size:13px}
.note{margin:-4px 0 12px;font-size:12.5px;color:var(--tx3)}
.note.bas{margin:12px 0 0}
.intro{margin-top:0}
.vide-a{margin-top:12px}
.seg-fmt{margin-bottom:16px}
.nw{white-space:nowrap}
.muted{color:var(--tx3)} .dim{color:var(--tx2)}
.lab{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.lab.teal{color:var(--teal)}
.barre{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 20px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.barre .astuce{margin-left:4px;font-size:12px;color:var(--tx3)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 12px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--tx2);font-size:12px;font-weight:600;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.chip:hover{border-color:var(--line-strong);color:#fff}
.chip[aria-pressed="true"]{background:var(--gradient-sel);border-color:transparent;color:#fff;box-shadow:var(--glow)}
.chip.info{cursor:default;font-weight:500}
.chip.info b{color:#fff;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ligne-communs{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:0 0 18px}

/* ---------- indicateurs ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.kpi{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow-card)}
.kpi .lab{display:block;margin-bottom:6px}
.kpi b{display:block;font-size:24px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi .sous{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--tx3)}
.tendance{font-family:var(--font-mono);font-size:11px;font-weight:600}
.tendance.mieux{color:var(--ok)} .tendance.moins{color:var(--bad)} .tendance.egal{color:var(--tx3)}
.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)}

/* ---------- verdicts et pastilles ---------- */
.verdict{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.v-winneuse{background:var(--ok-soft);color:var(--ok)} .v-solide{background:var(--info-soft);color:var(--info)}
.v-prometteuse{background:var(--warn-soft);color:var(--warn)} .v-en_test{background:rgba(255,255,255,.07);color:var(--tx2)} .v-a_couper{background:var(--bad-soft);color:var(--bad)}
.roas{display:inline-flex;padding:2px 8px;border-radius:7px;font-size:11.5px;font-weight:600;white-space:nowrap}
.roas.haut{background:var(--ok-soft);color:var(--ok)} .roas.moyen{background:var(--warn-soft);color:var(--warn)} .roas.bas{background:var(--bad-soft);color:var(--bad)} .roas.nul{background:rgba(255,255,255,.06);color:var(--tx3)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--tx2);font-size:11px}

/* ---------- funnel (TOFU / MOFU / BOFU) ---------- */
.funnel{display:inline-flex;align-items:center;min-height:22px;padding:1px 8px;border-radius:999px;border:1px solid currentColor;background:none;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
.funnel.auto{border-style:dashed}
.funnel:hover{background:rgba(255,255,255,.06)}
.funnel.entete{cursor:help}
.f-tofu{color:var(--teal)} .f-mofu{color:#C4B5FD} .f-bofu{color:#F9A8D4}
.verdict-funnel{display:inline-flex;gap:6px;align-items:center}
.filtres-funnel{gap:10px 18px}
.filtre-g{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.filtre-g .lab{margin-right:2px}
table.matrice th,table.matrice td{text-align:center;white-space:normal}
table.matrice th:first-child{text-align:left;white-space:nowrap}
table.matrice tbody th{font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tx);position:static;background:none}
.case{display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:86px;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);color:var(--tx3);cursor:pointer;font:inherit}
.case b{font-family:var(--font-heading);font-size:18px;font-weight:800;color:var(--tx3)}
.case small{font-size:10.5px;color:var(--tx3)}
.case.pleine{border-color:rgba(74,222,128,.45);background:var(--ok-soft)}
.case.pleine b{color:var(--ok)}
.case:hover{border-color:var(--line-strong)}
.case.active{box-shadow:var(--ring);border-color:var(--acc)}
table.matrice tfoot td{font-size:11.5px;color:var(--tx3);vertical-align:top}
table.matrice tfoot td span{display:block}
table.matrice tfoot th{font-family:var(--font-body);font-size:12px;text-transform:none;letter-spacing:0;position:static;background:none}
.priorites{margin-top:12px}
.priorites ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px;font-size:12.5px;color:var(--tx2)}
.choix-funnels{display:grid;gap:8px}
.choix-funnel{display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.03);color:var(--tx2);text-align:left;cursor:pointer;font:inherit;font-size:12.5px}
.choix-funnel:hover{border-color:var(--line-strong);color:#fff}
.choix-funnel.actif{border-color:var(--acc);box-shadow:var(--ring);color:#fff}
.choix-funnel .funnel{justify-self:start;cursor:inherit}

/* ---------- batch rapide ---------- */
.batch{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.batch b{font-family:var(--font-heading);font-size:14px;font-weight:800;margin-right:4px}
.batch .spacer{min-width:8px}

/* ---------- podium et créas ---------- */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:6px 0 16px}
.crea{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}
.crea.rang-1{border-color:rgba(245,184,65,.75);box-shadow:0 0 0 1px rgba(245,184,65,.25)}
.crea.rang-2{border-color:rgba(199,206,219,.6)}
.crea.rang-3{border-color:rgba(208,139,91,.7)}
.rang{position:absolute;top:-10px;left:-10px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--panel3);color:#fff;font-family:var(--font-mono);font-size:12px;font-weight:700;border:2px solid var(--bg)}
.rang-1 .rang{background:var(--or);color:#2A1A00} .rang-2 .rang{background:var(--argent);color:#14161C} .rang-3 .rang{background:var(--bronze);color:#2A1206}
.vign{position:relative;width:96px;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--panel3);display:grid;place-items:center}
.vign img{width:100%;height:100%;object-fit:cover;display:block}
.vign .ic{width:26px;height:26px;color:var(--tx3)}
.vign .fmt,.vign .nat{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);padding:1px 6px;border-radius:999px;background:rgba(11,11,22,.85);font-family:var(--font-mono);font-size:10px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vign .nat{top:6px;bottom:auto;background:rgba(124,58,237,.88);color:#fff}
.crea .corps{min-width:0}
.crea h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:0 0 2px;padding-right:28px;font-size:13.5px;font-weight:800;line-height:1.3;overflow:hidden}
.crea .meta{margin:0 0 6px;font-size:12px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crea .chiffres{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px;font-size:12px;color:var(--tx2)}
.crea .chiffres b{color:#fff}
.crea p.pourquoi{margin:0;font-size:12px;color:var(--tx2);line-height:1.45}
.etoile{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--tx3);cursor:pointer}
.etoile:hover{color:#fff;background:rgba(255,255,255,.06)}
.etoile[aria-pressed="true"]{color:var(--or)}
.etoile .ic{width:16px;height:16px}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.plus{display:flex;justify-content:center;margin-top:14px}

/* ---------- tableaux ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left}
th{position:sticky;top:0;background:rgba(19,18,36,.98);font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:24px}
th button:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
th[aria-sort] button{color:#fff}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,255,255,.025)}
td .nom{display:flex;align-items:center;gap:10px;min-width:260px;max-width:340px;white-space:normal}
td .nom .txt{display:block;flex:1;min-width:0}
td .nom img,td .nom .mini{width:38px;height:46px;flex:none;border-radius:7px;object-fit:cover;background:var(--panel3)}
td .nom b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-family:var(--font-body);font-weight:600;font-size:12.5px;line-height:1.3}
td .nom .sous{display:block;margin-top:2px;font-size:11px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
td .nom .etoile{position:static;flex:none;width:28px;height:28px;margin:0 -4px 0 -6px}
.court{display:none}
.filtres{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.filtres input[type=search],.filtres select{min-height:32px;padding:5px 10px;border:1px solid var(--line-strong);border-radius:9px;background:var(--inset);color:var(--tx);font-size:12.5px}
.filtres input[type=search]{min-width:240px}
input::placeholder{color:var(--tx3);opacity:1}
.filtres input:focus,.filtres select:focus{border-color:var(--acc);box-shadow:var(--ring);outline:0}

/* ---------- graphique ---------- */
.graph{width:100%;height:auto;display:block}
.graph-wrap{overflow-x:auto}
.graph .barre-dep{fill:rgba(139,92,246,.55)} .graph .barre-dep.dans{fill:#8B5CF6}
.graph .ligne-ca{fill:none;stroke:var(--ok);stroke-width:2}
.graph .axe{fill:var(--tx3);font-family:var(--font-mono);font-size:10px}
.graph .grille-l{stroke:rgba(255,255,255,.06)}
.legende{display:flex;gap:14px;font-size:12px;color:var(--tx3);margin-top:6px}
.legende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legende i.l-dep{background:#8B5CF6}
details.jours{margin-top:10px}
.duo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}
.duo .kpi{background:rgba(255,255,255,.025);box-shadow:none}
.graph .bande{fill:rgba(139,92,246,.10)}
.graph .l-meta{fill:none;stroke:var(--acc);stroke-width:2;stroke-dasharray:7 5}
.graph .l-shop{fill:none;stroke:var(--teal);stroke-width:2.6}
.graph .seuil-be{stroke:var(--warn);stroke-width:1.4;stroke-dasharray:2 5}
.graph .seuil-cible{stroke:var(--ok);stroke-width:1.4;stroke-dasharray:2 5}
.graph .etiq{font-family:var(--font-mono);font-size:10.5px;font-weight:600;paint-order:stroke;stroke:rgba(13,12,28,.92);stroke-width:4px;stroke-linejoin:round}
.graph .l-shop-t{fill:var(--teal)} .graph .l-meta-t{fill:var(--acc)} .graph .seuil-be-t{fill:var(--warn)} .graph .seuil-cible-t{fill:var(--ok)}
.legende{flex-wrap:wrap}
.legende i.l-shop{width:16px;height:3px;border-radius:2px;vertical-align:3px;background:var(--teal)}
.legende i.l-meta{width:16px;height:0;border-radius:0;vertical-align:3px;background:none;border-top:2px dashed var(--acc)}
.legende i.l-be{width:16px;height:0;border-radius:0;vertical-align:3px;background:none;border-top:2px dotted var(--warn)}
.legende i.l-cible{width:16px;height:0;border-radius:0;vertical-align:3px;background:none;border-top:2px dotted var(--ok)}
.legende i.l-bande{background:rgba(139,92,246,.35)}
details.jours summary{display:inline-flex;align-items:center;min-height:30px;color:var(--acc);font-size:12.5px;font-weight:600;cursor:pointer}
details.jours .table-wrap{margin-top:8px;max-height:360px;overflow:auto}
details.jours tr.dans td{color:#fff;background:var(--acc-soft)}
.legende i.l-ca{width:14px;height:3px;border-radius:2px;vertical-align:3px;background:var(--ok)}

/* ---------- plan, vide, bannières ---------- */
.action{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.action>.verdict{justify-self:start;margin-top:1px}
.action:first-child{border-top:0}
.action .t{font-weight:600}
.action .d{color:var(--tx2);font-size:12.5px}
.action .w{color:var(--tx3);font-size:12px}
.squelette .muted{margin:0 0 4px}
.sq-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 16px}
.sq-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sq-kpis span,.sq-grille span{display:block;height:92px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.08),rgba(255,255,255,.035));background-size:200% 100%;animation:sq 1.4s ease-in-out infinite}
.sq-grille span{height:150px}
@keyframes sq{from{background-position:100% 0}to{background-position:-100% 0}}
.dlg-f .err{margin:0 auto 0 0;align-self:center;color:#FECACA;font-size:12.5px}
.vide{padding:26px;border:1px dashed rgba(255,255,255,.18);border-radius:14px;color:var(--tx3);text-align:center}
.banniere{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:10px 14px;border-radius:12px;border:1px solid rgba(251,191,36,.4);background:var(--warn-soft);color:#FDE68A;font-size:12.5px}
.banniere.erreur{border-color:rgba(248,113,113,.45);background:var(--bad-soft);color:#FECACA}
.bientot{display:grid;gap:10px;max-width:760px}
.bientot li{color:var(--tx2)}

/* ---------- boutons flottants, notifications, fenêtres ---------- */
.flottants{position:fixed;right:18px;bottom:16px;z-index:40;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.flottants button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 13px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--tx2);font-size:12px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-pop)}
.flottants button:hover{color:#fff;border-color:var(--line-strong)}
.flottants button.violet{background:var(--gradient-sel);border-color:transparent;color:#fff;box-shadow:var(--glow)}
.flottants .ic{width:14px;height:14px}
.toasts{position:fixed;left:50%;bottom:66px;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{padding:10px 16px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);font-size:13px;box-shadow:var(--shadow-pop)}
.toast.ok{border-left:3px solid var(--ok)} .toast.bad{border-left:3px solid var(--bad);color:#FECACA}
dialog{width:min(760px,calc(100vw - 32px));max-height:86vh;padding:0;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:var(--surface);color:var(--tx);box-shadow:var(--shadow-pop)}
dialog::backdrop{background:rgba(4,3,12,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dlg-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.dlg-h h2{margin:0;font-size:17px;font-weight:800}
.dlg-b{padding:16px 18px;overflow:auto;max-height:calc(86vh - 130px)}
.dlg-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.fermer{display:grid;place-items:center;width:34px;height:34px;margin-left:auto;border:1px solid var(--line2);border-radius:10px;background:none;color:var(--tx2);cursor:pointer}
.fermer:hover{color:#fff;border-color:var(--line-strong)}
.seuils input{width:78px;min-height:30px;padding:4px 8px;border:1px solid var(--line-strong);border-radius:8px;background:var(--inset);color:var(--tx);font-family:var(--font-mono);font-size:12px;text-align:right}
.seuils input:focus{border-color:var(--acc);box-shadow:var(--ring);outline:0}
.mini-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.mini-grille figure{margin:0}
.mini-grille img,.mini-grille .mini{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:9px;background:var(--panel3);display:block}
.mini-grille figcaption{font-size:11px;color:var(--tx3);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- connexion ---------- */
.connexion{min-height:100vh;display:grid;place-items:center;padding:24px}
.connexion form{width:min(380px,100%);padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--shadow-pop)}
.connexion .accroche{margin:0}
.connexion h1{margin:10px 0 4px;font-size:24px;font-weight:800}
.connexion label{display:block;margin:18px 0 6px;font-weight:600;font-size:12.5px;color:var(--tx2)}
.connexion input{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:11px;background:var(--inset);color:var(--tx);font-size:16px}
.connexion input:focus{border-color:var(--acc);box-shadow:var(--ring);outline:0}
.connexion .btn{width:100%;margin-top:16px;min-height:44px}
.connexion .err{min-height:20px;margin:10px 0 0;color:#FECACA;font-size:12.5px}

/* ---------- tailles d'écran ---------- */
@media (max-width:1000px){.duo{grid-template-columns:minmax(0,1fr)}.kpis,.sq-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.podium,.sq-grille{grid-template-columns:minmax(0,1fr)}}
/* en-tête sur 2 lignes ou plus (tablette) ou écran bas (téléphone à l'horizontale) : il défile avec la page */
@media (max-width:1100px),(max-height:600px){.topbar{position:static} html{scroll-padding-top:12px}}
@media (max-width:1240px){.ctrl{margin-left:0}}
@media (max-height:500px){
  .flottants{right:12px;bottom:10px;flex-wrap:nowrap}
  .flottants button{width:44px;height:44px;min-height:44px;padding:0;justify-content:center}
  .flottants button .t{display:none}
}
@media (max-width:760px){
  .top-in{padding:10px 14px 0} main{padding:18px 14px 110px}
  nav#nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} nav#nav::-webkit-scrollbar{display:none}
  .grille{grid-template-columns:minmax(0,1fr)} .filtres input[type=search]{min-width:0;flex:1 1 100%}
  .tete h1{font-size:22px}
  .ctrl{gap:6px} .seg button{min-width:34px;padding:0 8px}
  .flottants{right:12px;bottom:12px;flex-wrap:nowrap}
  .flottants button{width:44px;height:44px;min-height:44px;padding:0;justify-content:center}
  .flottants button .t{display:none}
  .flottants .ic{width:18px;height:18px}
  td .nom{min-width:220px;max-width:260px}
  .lg{display:none} .court{display:inline}
  .action{grid-template-columns:minmax(0,1fr);gap:6px}
  .graph-wrap .graph{min-width:860px}
  table.matrice th:first-child{white-space:normal;min-width:84px}
  table.matrice th,table.matrice td{padding:8px 4px}
  .case{min-width:56px;padding:6px 4px}
  .case small{font-size:9.5px}
  table.matrice tfoot td{font-size:10.5px}   /* texte des graphiques lisible : le graphique défile sur le côté */
}
@media (pointer:coarse){.chip,.seg button,.btn,.btn.sm,.fermer,details.jours summary{min-height:44px}.etoile{width:44px;height:44px}td .nom .etoile{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}