@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800;14..32,900&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');







/* ══ ZOEY HUD — tokens EXACTS de zoeyos.com : noir pur, orange #FF6D00, blanc en opacités ══ */







:root {



  /* Hauteur de la top bar (source unique : le Layout la fixe, les pages plein écran



     la soustraient). Barre retirée le 26/07 → 0px : toutes les pages qui la



     soustraient récupèrent la place automatiquement. Remettre 42px pour la rétablir. */



  --topbar-h: 0px;   /* aucune barre : l horloge est en absolu, cf. Layout.jsx */



  /* Surfaces (noir pur, panneaux à peine relevés) */



  --bg:       #030204;



  --surface:  #0a090e;



  --card:     rgba(255, 255, 255, 0.02);



  --card2:    rgba(255, 255, 255, 0.02);



  --border:   rgba(255, 255, 255, 0.085);



  --border2:  rgba(255, 255, 255, 0.17);



  /* Signalétique (site ZOEY : logo #FF6D00, accent #FF8C42, gold #FFD166, pink #FF6B8A, tech #00B4D8) */



  --accent:   #e9e9ee;



  --accent2:  #b9b9c2;   /* rose ZOEY — compagnon chaud de l'orange, plus de cyan orphelin */



  --accent3:  #8c8c96;



  --green:    #d8d8de;   /* lime chaud — le "positif" accordé à la braise */



  --yellow:   #a2a2ac;



  --red:      #f4f4f8;   /* vermillon braise — le "négatif" reste dans la famille */



  /* Rampe data = CAMAÏEU du thème (clair → profond) : cohérence garantie par construction */



  --c1: #f2f2f6; --c2: #d8d8de; --c3: #bebec6; --c4: #a2a2ac; --c5: #85858f; --c6: #67676f; --c7: #4a4a52;



  /* Texte : blanc en opacités graduées (comme le site) */



  --text:     rgba(240, 240, 244, 0.94);



  --text2:    rgba(222, 222, 228, 0.84);



  --muted:    rgba(186, 186, 196, 0.6);



  --glow:     rgba(255, 255, 255, 0.07);



  --r:        22px;



  /* Verre (tokens exacts du site) */



  --glass:        rgba(14, 14, 18, 0.6);



  --glass2:       rgba(14, 14, 18, 0.6);



  --glass-border: rgba(255, 255, 255, 0.11);



  --glass-blur:   blur(28px) saturate(2.4) brightness(1.14);



  /* Polices : JetBrains Mono = l'identité (le site n'utilise QUE ça), Inter pour le contenu long */



  --sans:     'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;



  /* Space Grotesk et non le monospace : `--display` valait `--mono`, donc les titres



     n'etaient que du mono agrandi et rien ne s'opposait au reste de l'interface. La



     police est deja dans l'@import du haut — elle ne servait qu'a une page. */



  --display:  'Space Grotesk', 'Inter', system-ui, sans-serif;



  --mono:     'JetBrains Mono', 'SF Mono', ui-monospace, 'Cascadia Code', monospace;



  /* CRM pages */



  --surface2: #14121a;



  --blue:     #b9b9c2;



  --amber:    #a2a2ac;



  /* Identité (logo, actifs nav) */



  --logo:     #d8d8de;



  /* Neutres pilotés par le MODE (sombre par défaut, inversés par [data-mode="light"]) */



  --fg-strong: #ffffff;                    /* texte fort : blanc en sombre, noir en clair */



  --shell-a: rgba(13, 13, 17, 0.66);       /* dégradé de la sidebar */



  --shell-b: rgba(13, 13, 17, 0.66);



  --main-a:  rgba(8, 8, 11, 0.32);       /* dégradé du panneau principal */



  --main-b:  rgba(8, 8, 11, 0.32);



}







/* ══ THÈMES — un jeu de variables chacun, commutable via data-theme sur <html> ══ */







/* NÉBULEUSE — le design d'origine : violet profond, cyan vivant, verre bleuté */







/* RUBIS — salle de controle : noir profond, rouge YouTube #ff2d4d partout */







[data-theme="rubis"] {



  --bg: #0a0608; --surface: #0f090c; --card: #150d11; --card2: #1c1116;



  --border: #291720; --border2: #3a2230;



  --accent: #ff2d4d; --accent2: #ff7a8a; --accent3: #ffb02d;



  --green: #2dd4a0; --yellow: #f5c451; --red: #ff5a3c;



  --c1: #ffd4db; --c2: #ffaab8; --c3: #ff8095; --c4: #ff5672; --c5: #ff2d4d; --c6: #d11b38; --c7: #ffe3c4;



  --text: #f8eef0; --text2: rgba(248,238,240,0.82); --muted: rgba(248,238,240,0.55);



  --glow: rgba(255, 45, 77, 0.18);



  --glass: rgba(30, 17, 22, 0.52); --glass2: rgba(42, 24, 31, 0.42);



  --glass-border: rgba(255, 255, 255, 0.09);



  --surface2: #1e1218; --blue: #60a5fa; --amber: #f5c451;



  --logo: #ff5672;



}







[data-theme="rubis"] body::before {



  background:



    none;



}







[data-theme="rubis"] body::after {



  background: none;



}







[data-theme="nebula"] {



  --bg: #07090f; --surface: #0b0e16; --card: #11151f; --card2: #161b27;



  --border: #1b2230; --border2: #2a3243;



  --accent: #7c3aed; --accent2: #22d3ee; --accent3: #f43f5e;



  --green: #34d399; --yellow: #f59e0b; --red: #fb7185;



  --c1: #d9ccff; --c2: #bfa8ff; --c3: #a78bfa; --c4: #8b63f2; --c5: #6d3fe0; --c6: #22d3ee; --c7: #e3ffcc;



  --text: #eef2f8; --text2: rgba(238,242,248,0.82); --muted: rgba(238,242,248,0.55);



  --glow: rgba(124, 58, 237, 0.18);



  --glass: rgba(19, 24, 36, 0.52); --glass2: rgba(28, 34, 50, 0.42);



  --glass-border: rgba(255, 255, 255, 0.09);



  --surface2: #161c2e; --blue: #60a5fa; --amber: #f59e0b;



  --logo: #a78bfa;



}







[data-theme="nebula"] body::before {



  background:



    radial-gradient(1000px circle at 12% 0%, rgba(124, 58, 237, 0.14), transparent 46%),



    radial-gradient(820px circle at 95% 8%, rgba(34, 211, 238, 0.08), transparent 44%),



    radial-gradient(900px circle at 60% 110%, rgba(139, 92, 246, 0.07), transparent 50%);



}







[data-theme="nebula"] body::after {



  background:



    repeating-linear-gradient(0deg, rgba(139, 148, 255, 0.02) 0 1px, transparent 1px 64px),



    repeating-linear-gradient(90deg, rgba(139, 148, 255, 0.02) 0 1px, transparent 1px 64px);



}







/* ACID — terminal Matrix : noir vert, vert acide, cyan électrique */







[data-theme="acid"] {



  --bg: #010401; --surface: #040a05; --card: #071008; --card2: #0b160c;



  --border: rgba(59, 255, 111, 0.12); --border2: rgba(59, 255, 111, 0.24);



  --accent: #3bff6f; --accent2: #00e5ff; --accent3: #d5ff3b;



  --green: #3bff6f; --yellow: #eaff5e; --red: #ff5544;



  --c1: #ccffe4; --c2: #7dffc0; --c3: #2effa0; --c4: #00e57a; --c5: #00b35f; --c6: #00e5ff; --c7: #ffccd8;



  --text: rgba(235, 255, 240, 0.92); --text2: rgba(220, 248, 228, 0.84); --muted: rgba(200, 240, 210, 0.55);



  --glow: rgba(59, 255, 111, 0.15);



  --glass: rgba(4, 12, 6, 0.85); --glass2: rgba(59, 255, 111, 0.04);



  --glass-border: rgba(59, 255, 111, 0.1);



  --surface2: #0b160c; --blue: #00e5ff; --amber: #eaff5e;



  --logo: #00ff88;



}







[data-theme="acid"] body::before {



  background:



    radial-gradient(900px circle at 10% -5%, rgba(59, 255, 111, 0.07), transparent 46%),



    radial-gradient(760px circle at 96% 12%, rgba(0, 229, 255, 0.045), transparent 44%),



    radial-gradient(880px circle at 55% 115%, rgba(213, 255, 59, 0.035), transparent 50%);



}







[data-theme="acid"] body::after {



  background:



    repeating-linear-gradient(0deg, rgba(59, 255, 111, 0.022) 0 1px, transparent 1px 64px),



    repeating-linear-gradient(90deg, rgba(59, 255, 111, 0.022) 0 1px, transparent 1px 64px);



}







/* GLACIER — nuit polaire : bleu abyssal, glace cyan, indigo */







[data-theme="glacier"] {



  --bg: #010409; --surface: #050b14; --card: #0a111d; --card2: #0f1726;



  --border: rgba(125, 211, 252, 0.1); --border2: rgba(125, 211, 252, 0.2);



  --accent: #38bdf8; --accent2: #a5b4fc; --accent3: #f472b6;



  --green: #5eead4; --yellow: #fbbf24; --red: #fb7185;



  --c1: #d5f0ff; --c2: #a8e2ff; --c3: #7dd3fc; --c4: #4fb8ef; --c5: #2b95d6; --c6: #a5b4fc; --c7: #fff1d5;



  --text: rgba(240, 248, 255, 0.93); --text2: rgba(215, 232, 246, 0.84); --muted: rgba(190, 215, 235, 0.55);



  --glow: rgba(56, 189, 248, 0.16);



  --glass: rgba(6, 12, 20, 0.82); --glass2: rgba(125, 211, 252, 0.04);



  --glass-border: rgba(125, 211, 252, 0.1);



  --surface2: #0f1726; --blue: #38bdf8; --amber: #fbbf24;



  --logo: #7dd3fc;



}







[data-theme="glacier"] body::before {



  background:



    radial-gradient(900px circle at 10% -5%, rgba(56, 189, 248, 0.08), transparent 46%),



    radial-gradient(760px circle at 96% 12%, rgba(165, 180, 252, 0.05), transparent 44%),



    radial-gradient(880px circle at 55% 115%, rgba(244, 114, 182, 0.04), transparent 50%);



}







[data-theme="glacier"] body::after {



  background:



    repeating-linear-gradient(0deg, rgba(125, 211, 252, 0.02) 0 1px, transparent 1px 64px),



    repeating-linear-gradient(90deg, rgba(125, 211, 252, 0.02) 0 1px, transparent 1px 64px);



}







/* AURORE — la palette des references : bleu-nuit, indigo-violet, ciel.



   Les surfaces sont franchement plus claires que le fond (#111524 sur #080a12), la ou les



   autres themes posent du noir sur du noir. C'est ce qui fait qu'on voit une carte sans



   chercher sa bordure. */







/* EMBER — l ancien defaut : noir pur, orange braise (conserve en option) */







[data-theme="ember"] {



  --bg: #000000;



  --surface: #0a0a0c;



  --card: #0d0d0f;



  --card2: #141417;



  --border: rgba(255, 255, 255, 0.07);



  --border2: rgba(255, 255, 255, 0.14);



  --accent: #ff8c42;



  --accent2: #ff6b8a;



  --accent3: #d500f9;



  --green: #a3e635;



  --yellow: #ffd166;



  --red: #ff5a3c;



  --c1: #ffd9a8;



  --c2: #ffb066;



  --c3: #ff8a3d;



  --c4: #ff6d00;



  --c5: #d95700;



  --c6: #ff6b8a;



  --c7: #a8b4ff;



  --text: rgba(255, 255, 255, 0.92);



  --text2: rgba(255, 255, 255, 0.82);



  --muted: rgba(255, 255, 255, 0.55);



  --glow: rgba(255, 109, 0, 0.16);



  --glass: rgba(10, 10, 12, 0.85);



  --glass2: rgba(255, 255, 255, 0.04);



  --glass-border: rgba(255, 255, 255, 0.085);



  --surface2: #141417;



  --blue: #ff6b8a;



  --amber: #ffd166;



  --logo: #ff6d00;



  --shell-a: rgba(13, 13, 15, 0.72);



  --shell-b: rgba(5, 5, 7, 0.7);



  --main-a: rgba(10, 10, 12, 0.55);



  --main-b: rgba(3, 3, 5, 0.5);



}







[data-theme="ember"] body::before {



  background:



    radial-gradient(900px circle at 10% -5%, rgba(255, 109, 0, 0.09), transparent 46%),



    radial-gradient(760px circle at 96% 12%, rgba(255, 209, 102, 0.05), transparent 44%),



    radial-gradient(880px circle at 55% 115%, rgba(213, 0, 249, 0.045), transparent 50%);



}







[data-theme="ember"] body::after {



  background:



    repeating-linear-gradient(0deg, rgba(255, 140, 66, 0.02) 0 1px, transparent 1px 64px),



    repeating-linear-gradient(90deg, rgba(255, 140, 66, 0.02) 0 1px, transparent 1px 64px);



}







[data-theme="ember"] .scene-dark { --c1: #ffd9a8; --c2: #ffb066; --c3: #ff8a3d; --c4: #ff6d00; --c5: #d95700; --c6: #ff6b8a; --c7: #a8b4ff; }







[data-theme="aurore"] {



  /* AURORE v4 — CARMIN (26/08 01h40, demande : UNE seule couleur, le rouge).



     Palette strictement mono-teinte : le rouge carmin est l'unique couleur,



     reservee au vivant ; tout le reste est monochrome. Les semantiques ne



     colorent plus (succes = blanc/gris, danger = LE rouge). */



  --bg: #050506; --surface: #0d0609; --card: rgba(255, 255, 255, 0.02); --card2: rgba(255, 255, 255, 0.02);



  --border: rgba(255, 120, 140, 0.13); --border2: rgba(255, 130, 150, 0.24);



  --accent: #ff4d64; --accent2: #ff7585; --accent3: #ffa3ad;



  --green: #63d693; /* le vert des HAUSSES (demande 26/08) — seule exception au mono-carmin */ --yellow: #b9b9c2; --red: #ff4d64;



  --c1: #ffd4da; --c2: #ff9fab; --c3: #ff6d7e; --c4: #ff2d4d; --c5: #d41f3c; --c6: #9c1830; --c7: #6b1222;



  --text: rgba(240, 240, 244, 0.94); --text2: rgba(222, 222, 228, 0.84); --muted: rgba(186, 186, 196, 0.6);



  --glow: rgba(255, 77, 100, 0.12);



  --glass: rgba(14, 14, 18, 0.6); --glass2: rgba(14, 14, 18, 0.6);



  --glass-border: rgba(255, 120, 140, 0.16);



  --surface2: #14121a; --blue: #b9b9c2; --amber: #b9b9c2;



  --logo: #ff4d64;



  --shell-a: rgba(11, 11, 13, 0.66); --shell-b: rgba(11, 11, 13, 0.66);



  --main-a: rgba(9, 9, 11, 0.32); --main-b: rgba(9, 9, 11, 0.32);



}







[data-theme="aurore"] body::before {



  /* aucune nappe (26/08) : fond noir pur */



  background: none;



}







/* Pas de quadrillage : aucune des references n'en a. La profondeur y vient de la lumiere et



   des surfaces, jamais d'une trame. */







[data-theme="aurore"] body::after { background: none; }







/* V14 — BRAISE (20/10, demande d'Albin : l'interface « Dashboard V14 » de Code XR, recreee



   d'apres les images du reel, par defaut). Noir chaud, UN orange-rouge, la premiere carte



   de chaque rangee pleine en degrade orange. Le verre et les menus restent ceux d'ADROS. */







[data-theme="braise"] {



  --bg: #070606; --surface: #100c0b; --card: rgba(255, 255, 255, 0.025); --card2: rgba(255, 255, 255, 0.025);



  --border: rgba(255, 140, 95, 0.13); --border2: rgba(255, 150, 105, 0.25);



  --accent: #ff5a1f; --accent2: #ff7a45; --accent3: #ffac87;



  --green: #4ade80; --yellow: #ffc15a; --red: #ff3b30;



  --c1: #ffdccb; --c2: #ffb48f; --c3: #ff8755; --c4: #ff5a1f; --c5: #e2400f; --c6: #a8300c; --c7: #6e2009;



  --text: rgba(244, 241, 239, 0.95); --text2: rgba(228, 222, 218, 0.85); --muted: rgba(196, 188, 184, 0.62);



  --glow: rgba(255, 90, 31, 0.14);



  --glass: rgba(16, 13, 12, 0.6); --glass2: rgba(16, 13, 12, 0.6);



  --glass-border: rgba(255, 140, 95, 0.17);



  --surface2: #18120f; --blue: #b9b9c2; --amber: #ffc15a;



  --logo: #ff5a1f;



  --shell-a: rgba(12, 10, 9, 0.66); --shell-b: rgba(12, 10, 9, 0.66);



  --main-a: rgba(10, 8, 7, 0.32); --main-b: rgba(10, 8, 7, 0.32);



}







[data-theme="braise"] body::before { background: none; }







[data-theme="braise"] body::after { background: none; }







/* MIDAS — coffre-fort : noir chaud, or, champagne */







[data-theme="midas"] {



  --bg: #030202; --surface: #0a0705; --card: #100b07; --card2: #171009;



  --border: rgba(245, 197, 66, 0.12); --border2: rgba(245, 197, 66, 0.24);



  --accent: #f5c542; --accent2: #e8909a; --accent3: #ff8c42;



  --green: #d0e06b; --yellow: #ffdf8e; --red: #ff7a52;



  --c1: #ffeebd; --c2: #ffda80; --c3: #f5c542; --c4: #dba725; --c5: #b98a12; --c6: #e8909a; --c7: #c0bdff;



  --text: rgba(255, 250, 240, 0.92); --text2: rgba(245, 235, 214, 0.84); --muted: rgba(235, 220, 190, 0.55);



  --glow: rgba(245, 197, 66, 0.15);



  --glass: rgba(12, 8, 4, 0.85); --glass2: rgba(245, 197, 66, 0.04);



  --glass-border: rgba(245, 197, 66, 0.1);



  --surface2: #171009; --blue: #ffdf8e; --amber: #ffdf8e;



  --logo: #f5c542;



}







[data-theme="midas"] body::before {



  background:



    radial-gradient(900px circle at 10% -5%, rgba(245, 197, 66, 0.07), transparent 46%),



    radial-gradient(760px circle at 96% 12%, rgba(255, 223, 142, 0.045), transparent 44%),



    radial-gradient(880px circle at 55% 115%, rgba(255, 140, 66, 0.04), transparent 50%);



}







[data-theme="midas"] body::after {



  background:



    repeating-linear-gradient(0deg, rgba(245, 197, 66, 0.02) 0 1px, transparent 1px 64px),



    repeating-linear-gradient(90deg, rgba(245, 197, 66, 0.02) 0 1px, transparent 1px 64px);



}







/* ══ MODE CLAIR — inverse les neutres (fond blanc, texte noir), garde l'accent du thème.



   Placé APRÈS les thèmes pour gagner la cascade : marche avec les 5 ambiances. ══ */







[data-mode="light"] {



  --bg:       #f4f5f8;



  --surface:  #ffffff;



  --card:     #ffffff;



  --card2:    #eceef3;



  --surface2: #eceef3;



  --border:   rgba(15, 18, 28, 0.10);



  --border2:  rgba(15, 18, 28, 0.20);



  --text:     rgba(15, 18, 28, 0.92);



  --text2:    rgba(15, 18, 28, 0.74);



  --muted:    rgba(15, 18, 28, 0.50);



  --glow:     color-mix(in srgb, var(--logo) 24%, transparent);



  --glass:        rgba(255, 255, 255, 0.82);



  --glass2:       rgba(15, 18, 28, 0.045);



  --glass-border: rgba(15, 18, 28, 0.09);



  /* États : versions plus profondes, lisibles sur blanc */



  --green:  #3d8b1f;



  --yellow: #b45309;



  --red:    #d92d20;



  --fg-strong: #10131c;



  --shell-a: rgba(255, 255, 255, 0.80);



  --shell-b: rgba(244, 245, 248, 0.72);



  --main-a:  rgba(255, 255, 255, 0.66);



  --main-b:  rgba(244, 245, 248, 0.55);



}







/* Auras/grille d'ambiance : adoucies sur fond clair */







[data-mode="light"] body::before { opacity: 0.5; }







[data-mode="light"] body::after  { opacity: 0.35; }







/* Rampe camaïeu ASSOMBRIE par thème en mode clair : les pastels conçus pour le



   noir (tags, courbes de graphes) sont illisibles sur blanc. */







[data-mode="light"][data-theme="ember"]   { --c1: #b57718; --c2: #c2660e; --c3: #cc5708; --c4: #c25300; --c5: #a34500; --c6: #c44160; --c7: #0f20be; }







[data-mode="light"][data-theme="nebula"]  { --c1: #6d55c9; --c2: #6f4ade; --c3: #7050e8; --c4: #6240cc; --c5: #522eb0; --c6: #0d87a0; --c7: #8ed14d; }







[data-mode="light"][data-theme="acid"]    { --c1: #3d8a4f; --c2: #1f9a5b; --c3: #0e975b; --c4: #00914b; --c5: #007a3c; --c6: #008a9c; --c7: #913660; }







[data-mode="light"][data-theme="glacier"] { --c1: #4784b3; --c2: #3184bd; --c3: #2280b8; --c4: #1e75a8; --c5: #1b6694; --c6: #5866cf; --c7: #bc9b3e; }







[data-mode="light"][data-theme="braise"]  { --c1: #c2501c; --c2: #d4480f; --c3: #e2400f; --c4: #c43508; --c5: #9e2a06; --c6: #7a2005; --c7: #561603; --accent: #e8481a; --logo: #e8481a; }







[data-mode="light"][data-theme="midas"]   { --c1: #a17e26; --c2: #a88415; --c3: #a07f0e; --c4: #8f6f0d; --c5: #785b0a; --c6: #b05569; --c7: #201ea9; }







/* ── Îlot sombre : les scènes spatiales (graphe Cerveau, Agent Space) restent



   noires quel que soit le mode — un champ d'étoiles sur blanc n'a aucun sens.



   Cette classe re-pinne les neutres en sombre pour que les panneaux flottants



   posés SUR la scène (chips, feed, banque d'agents) restent lisibles. ── */







.scene-dark {



  --bg: #000000; --surface: #0a0a0c; --card: #0d0d0f; --card2: #141417;



  --border: rgba(255, 255, 255, 0.07); --border2: rgba(255, 255, 255, 0.14);



  --text: rgba(255, 255, 255, 0.92); --text2: rgba(255, 255, 255, 0.82); --muted: rgba(255, 255, 255, 0.55);



  --glass: rgba(10, 10, 12, 0.85); --glass2: rgba(255, 255, 255, 0.04); --glass-border: rgba(255, 255, 255, 0.06);



  --green: #4ade80; --yellow: #ffd166; --red: #ff5a3c;



  --fg-strong: #ffffff;



  --shell-a: rgba(13, 13, 15, 0.72); --shell-b: rgba(5, 5, 7, 0.7);



  --main-a: rgba(10, 10, 12, 0.55); --main-b: rgba(3, 3, 5, 0.5);



  /* les rampes reprennent aussi leurs valeurs sombres dans la scène */



}







[data-theme="ember"] .scene-dark, .scene-dark   { --c1: #ffd9a8; --c2: #ffb066; --c3: #ff8a3d; --c4: #ff6d00; --c5: #d95700; --c6: #ff6b8a; --c7: #a8b4ff; }







/* aurore : la scene aussi est integralement monochrome — rampes grises,



   etats gris (le point + le libelle disent l'etat, pas la couleur) */







[data-theme="aurore"] .scene-dark { --c1: #f2f2f6; --c2: #d8d8de; --c3: #bebec6; --c4: #a2a2ac; --c5: #85858f; --c6: #67676f; --c7: #4a4a52; --green: #63d693; /* le vert des HAUSSES (demande 26/08) — seule exception au mono-carmin */ --yellow: #b9b9c2; --red: #ff4d64; }







[data-theme="nebula"] .scene-dark  { --c1: #d9ccff; --c2: #bfa8ff; --c3: #a78bfa; --c4: #8b63f2; --c5: #6d3fe0; --c6: #22d3ee; --c7: #e3ffcc; }







[data-theme="acid"] .scene-dark    { --c1: #ccffe4; --c2: #7dffc0; --c3: #2effa0; --c4: #00e57a; --c5: #00b35f; --c6: #00e5ff; --c7: #ffccd8; }







[data-theme="glacier"] .scene-dark { --c1: #c8d2ff; --c2: #a9baff; --c3: #6485ed; --c4: #4d72e8; --c5: #3454c5; --c6: #2843a6; --c7: #162657; }







[data-theme="midas"] .scene-dark   { --c1: #ffeebd; --c2: #ffda80; --c3: #f5c542; --c4: #dba725; --c5: #b98a12; --c6: #e8909a; --c7: #c0bdff; }







*, *::before, *::after { box-sizing: border-box; }







body {



  margin: 0;



  font-family: var(--sans);



  font-size: 14px;



  line-height: 1.6;



  letter-spacing: -0.011em;



  font-feature-settings: 'cv05' 1, 'cv08' 1, 'ss01' 1, 'tnum' 1;



  color: var(--text);



  background: var(--bg);



  -webkit-font-smoothing: antialiased;



  -moz-osx-font-smoothing: grayscale;



  text-rendering: optimizeLegibility;



}







#root { width: 100%; min-height: 100svh; }







/* AUCUN zoom nulle part (26/08) : c'est le zoom LUI-MEME qui casse



   l'echantillonnage des backdrop-filter sous Chrome — avec un ancetre zoome,



   les vitres ne floutent plus rien, decor dedans ou pas. L'echelle se reglera



   par la typo si besoin, jamais par zoom. */







/* Fond ambiant : braises qui dérivent + grille de repères 1px (HUD) */







body::before {



  content: '';



  position: fixed;



  inset: -20%;



  z-index: -1;



  pointer-events: none;



  /* defaut = AUCUNE aura : le noir. Les braises vivent dans [data-theme=ember].



     (avant : orange/or/magenta par defaut -> flash colore au chargement et si



     le JS de theme echoue — mode de defaillance inverse, corrige 25/08) */



  background: none;



}







body::after {



  content: '';



  position: fixed;



  inset: 0;



  z-index: -1;



  pointer-events: none;



  background: none;



  mask-image: radial-gradient(1200px circle at 50% 30%, black, transparent 85%);



  -webkit-mask-image: radial-gradient(1200px circle at 50% 30%, black, transparent 85%);



}







@keyframes aurora {



  0%   { transform: translate3d(0, 0, 0) scale(1); }



  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }



  100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }



}







/* Apparition en cascade : chaque bloc d'une page monte en fondu (Apple-like) */







@keyframes rise {



  from { opacity: 0; transform: translateY(7px); }



  to   { opacity: 1; transform: translateY(0); }



}







.page > *, .page-anim > * { animation: rise .55s cubic-bezier(.22, 1, .36, 1) backwards; }







.page > *:nth-child(1), .page-anim > *:nth-child(1) { animation-delay: .02s; }







.page > *:nth-child(2), .page-anim > *:nth-child(2) { animation-delay: .07s; }







.page > *:nth-child(3), .page-anim > *:nth-child(3) { animation-delay: .12s; }







.page > *:nth-child(4), .page-anim > *:nth-child(4) { animation-delay: .17s; }







.page > *:nth-child(5), .page-anim > *:nth-child(5) { animation-delay: .22s; }







.page > *:nth-child(6), .page-anim > *:nth-child(6) { animation-delay: .27s; }







.page > *:nth-child(n+7), .page-anim > *:nth-child(n+7) { animation-delay: .32s; }







@media (prefers-reduced-motion: reduce) {



  *, *::before, *::after { animation: none !important; transition: none !important; }



}







/* Titres : h1 = identifiant système (mono uppercase espacé, façon ZOEY_05™) ;



   h2/h3 restent en Inter — le contenu se lit, le système s'affiche */







/* Plus de halo du tout sur les titres. Aucune des references n'en met sur du texte : la



   lumiere y est toujours une grande nappe diffuse derriere les plans, jamais une aura



   collee aux lettres. C'est ce detail qui separe « premium » de « gamer ». */







h1 { font-family: var(--display); font-weight: 700; letter-spacing: 0.02em; line-height: 1.05; text-transform: uppercase; }







h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; }







/* Micro-interactions globales */







.btn:active { transform: scale(0.965); }







nav a { transition: transform .18s cubic-bezier(.22,1,.36,1), background .18s, color .18s, border-color .18s; }







nav a:hover { transform: translateX(3px); }







/* Transition entre pages (remonte en fondu à chaque navigation, façon app native) */







@keyframes routeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }







.route-fade { animation: routeIn .32s cubic-bezier(.22, 1, .36, 1); height: 100%; }







/* deroulement de gauche a droite : le texte n'est pas etire, contrairement a un scaleX */







/* Le panneau de themes : simple deroulement, il se pose a cote du rail sans en sortir. */







@keyframes nomOnglet { from { clip-path: inset(0 100% 0 0); opacity: .35 }



                         to { clip-path: inset(0 0 0 0); opacity: 1 } }







/* L'onglet sort de la barre : il demarre sur l'icone, A L'INTERIEUR du rail, et glisse



   jusqu'a `--dx`. Le rail etant peint au-dessus, il le cache tant qu'il est dessous —



   c'est la barre qui sert de masque, il n'y en a aucun a entretenir. */







@keyframes sortieOnglet {



  from { transform: translateY(-50%) translateX(0); clip-path: inset(0 100% 0 0); opacity: .85 }



    to { transform: translateY(-50%) translateX(var(--dx)); clip-path: inset(0 0 0 0); opacity: 1 } }







/* Meme sortie du rail que sortieOnglet, mais SANS translateY(-50%).



   sortieOnglet est faite pour l'etiquette d'un onglet, qui se centre sur son



   icone ; le sous-menu, lui, est positionne par le HAUT. Lui appliquer le



   recentrage le remontait de la moitie de sa hauteur (120 px pour 4 entrees)



   pendant les 0,44 s de l'animation, puis il retombait a sa place a la fin :



   le « saut » signale le 02/09. */







@keyframes sortieMenu {



  from { transform: translateX(0); clip-path: inset(0 100% 0 0); opacity: .85 }



    to { transform: translateX(var(--dx)); clip-path: inset(0 0 0 0); opacity: 1 } }







@keyframes voile { from { opacity: 0 } to { opacity: 1 } }







/* Entrée des messages du chat */







@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }







.msg-in { animation: msgIn .28s cubic-bezier(.22, 1, .36, 1) backwards; }







/* Orbe HERMES qui réfléchit */







@keyframes orbPulse {



  0%, 100% { transform: scale(1);    box-shadow: 0 0 12px var(--glow); }



  50%      { transform: scale(1.22); box-shadow: 0 0 26px var(--glow), 0 0 8px var(--logo); }



}







.thinking-orb { width: 13px; height: 13px; border-radius: 50%; background: var(--logo); animation: orbPulse 1.1s ease-in-out infinite; flex-shrink: 0; }







/* ── Utilitaires HUD (signalétique système) ── */







.hud-label {



  font-family: var(--mono);



  font-size: 10px;



  font-weight: 600;



  letter-spacing: 0.16em;



  text-transform: uppercase;



  color: var(--muted);



}







.hud-dot {



  display: inline-block; width: 6px; height: 6px; border-radius: 50%;



  background: currentColor; box-shadow: 0 0 8px currentColor;



  animation: hudBreath 2.4s ease-in-out infinite;



}







@keyframes hudBreath { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }







/* .glow-b supprime 25/08 : orange en dur, aucune utilisation */







/* Chiffres / data alignés au pixel */







.num, .mono {



  font-family: var(--mono);



  font-variant-numeric: tabular-nums slashed-zero;



  font-feature-settings: 'tnum' 1, 'zero' 1;



  letter-spacing: -0.01em;



}







/* ══ BARRES DE DEFILEMENT INVISIBLES (26/08) ══════════════════════════════════



   REGLE UNIQUE du projet : plus AUCUNE barre dessinee, nulle part (demande



   Albin : « dans Vagues et tous les autres panneaux qui ont les barres en bas



   et a droite, il faut que tu les enleves » — la barre teintee salissait le



   verre). Elles sont MASQUEES, pas desactivees : aucune declaration



   `overflow: hidden` ici, donc molette, trackpad, clavier, glisser tactile et



   ancres continuent de defiler exactement pareil, en X comme en Y.



   Toute ancienne regle ::-webkit-scrollbar (globale + .yt-wrap) a ete



   supprimee : celle-ci est la seule.



   Portee `body *` et non `#root *` : le menu de CompteurLive est monte en



   portail dans document.body, donc HORS de #root — il aurait garde sa barre. */







html, body, body * {



  scrollbar-width: none;      /* Firefox */



  -ms-overflow-style: none;   /* IE 10+ / ancien Edge */



}







html::-webkit-scrollbar,



body::-webkit-scrollbar,



body *::-webkit-scrollbar {



  width: 0;                   /* barre verticale : plus aucune place occupee */



  height: 0;                  /* barre horizontale (bas des tableaux) */



  background: transparent;



}







html::-webkit-scrollbar-thumb,



body::-webkit-scrollbar-thumb,



body *::-webkit-scrollbar-thumb,



html::-webkit-scrollbar-track,



body::-webkit-scrollbar-track,



body *::-webkit-scrollbar-track,



html::-webkit-scrollbar-corner,



body::-webkit-scrollbar-corner,



body *::-webkit-scrollbar-corner { background: transparent; border: 0; }







::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: #fff; }







:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }







a { color: inherit; text-decoration: none; }







button { cursor: pointer; font-family: var(--sans); }







.gradient-text {



  color: var(--text);



}







/* ══ VERRE v2 (25/08) ═════════════════════════════════════════════════════════



   La carte est une DALLE de verre : la face est 100 % transparente (il n'y a



   QUE le fond derriere — le !important tue les fonds gris inline des pages),



   toute l'epaisseur vit dans l'ARETE. La lumiere obeit a une logique :



   un reflet SPECULAIRE se concentre au point d'incidence (--mx/--my, pilote



   par la souris via lib/vitres.js ; au repos, cle fixe en haut a gauche), et



   la paroi interne rend le reflet de SORTIE sur le bord oppose. Le survol



   n'ajoute AUCUNE lueur : la plaque bascule vers la souris (--rx/--ry), le



   reflet se deplace, c'est tout. */







.card.card, .vitre-bloc.vitre-bloc, .card {



  position: relative;



  /* tres leger voile sombre (demande du 25/08) : le fond etoile reste visible



     a travers, le texte reste lisible dessus — le flou fait le reste */



  /* VERRE FINAL (25/08 minuit) : transparent sombre leger — le laiteux iOS ne



     marche pas sur fond noir pur (il n'y a pas de photo claire a eclaircir).



     On garde d'Apple le FLOU massif et la saturation ; la face reste sombre



     et laisse passer le fond (planete, nappes). */



  background: rgba(8, 8, 9, 0.26) !important;



  /* 15px et pas plus : sur un fond de POINTS fins, un gros flou dissout tout



     et l'oeil lit un "filtre noir" (retour Albin 26/08 01h). Le flou n'est



     beau que s'il laisse survivre des lueurs. */



  /* le BOKEH : blur puis GAIN de luminosite — sans le gain, un point floute



     s'etale et son intensite s'effondre (il disparait au lieu de devenir une



     tache douce). brightness(2.1) reamplifie les lueurs ; le noir reste noir. */



  /* !important : des dizaines de panneaux portent un blur(14px) inline



     historique qui battait la classe — le bokeh du systeme gagne desormais



     partout (le verre-fin, 3 classes + !important, reste au-dessus) */



  /* VITRE NEUTRE (26/08) : saturate(1.4) amplifiait le rouge de tout ce qui



     passait derriere — le panneau se lisait comme un FILTRE rouge. Une vitre



     ne teinte pas : elle floute, eclaircit un peu, et laisse la couleur telle



     quelle (leger desaturate pour tuer la dominante). */



  backdrop-filter: blur(7px) brightness(1.55) saturate(0.8);



  -webkit-backdrop-filter: blur(7px) brightness(1.55) saturate(0.8);



  border-color: rgba(255, 255, 255, 0.09) !important;



  box-shadow:



    0 0 0 1px rgba(0, 0, 0, 0.82),



    0 22px 54px rgba(0, 0, 0, 0.58);



  /* AUCUN transform au repos : un transform 3D permanent + backdrop-filter



     tue le flou sur certains GPU Chrome (constate chez Albin, 26/08 00h20).



     Le 3D ne s'applique que pendant le survol, via .verre-actif. */



  transition: transform .5s cubic-bezier(.22,1,.36,1);



}







.verre-actif {



  transform: perspective(950px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--tz, 0px), 0);



}







.card {



  border: 1px solid rgba(255, 255, 255, 0.09);



  border-radius: 26px;



  padding: 18px 20px;



}







/* verre FIN (exception) : pour les panneaux poses sur un fond VIVANT (scene



   etoilee) — voile et flou faibles pour que le fond se voie a travers */







.vitre-bloc.vitre-bloc.verre-fin, .card.card.verre-fin {



  background: rgba(6, 6, 10, 0.22) !important;



  backdrop-filter: blur(5px) saturate(1.4) !important;



  -webkit-backdrop-filter: blur(5px) saturate(1.4) !important;



}







/* pendant le survol la plaque SUIT la souris : transition quasi nulle ;



   au depart de la souris, retour elastique par la regle de base */







.verre-actif { transition: transform .07s linear !important; }







/* l'ARETE : anneau de 2px — la ou la lumiere frappe, le verre brille */







.card.card::before, .vitre-bloc.vitre-bloc::before, .card::before {



  content: '';



  position: absolute;



  inset: -1px;



  border-radius: inherit;



  padding: 2px;



  background: radial-gradient(240px 150px at var(--mx, 26%) var(--my, -10%),



    color-mix(in srgb, var(--c2) 95%, transparent), color-mix(in srgb, var(--accent) 34%, transparent) 42%,



    color-mix(in srgb, var(--accent) 14%, transparent) 72%, color-mix(in srgb, var(--accent) 7%, transparent));



  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);



  -webkit-mask-composite: xor;



  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);



  mask-composite: exclude;



  pointer-events: none;



  z-index: 3;



  /* AU REPOS, PAS DE LUEUR (27/08). L'arete etait dessinee en permanence avec



     --mx/--my sur leurs valeurs par defaut (26% / -10%) : chaque panneau portait



     donc un halo rouge fixe, meme sans souris. Le reflet n'a de sens que s'il



     suit une source : il n'apparait plus qu'au survol, et s'eteint en douceur



     quand la souris part. Le bord blanc discret (border) reste, lui, toujours la. */



  opacity: 0;



  transition: opacity .24s ease;



}







/* la lumiere ne frappe que la plaque survolee — meme specificite que la regle



   ci-dessus, sinon elle ne prendrait pas le dessus */







.card.card.verre-actif::before,



.vitre-bloc.vitre-bloc.verre-actif::before,



.card.verre-actif::before {



  opacity: 1;



}







/* ── CARTES TEINTEES PAR ETAPE (Planning, 27/08) ─────────────────────────────



   La teinte d'etat (vert publiee, ambre non repertoriee, bleu montee, carmin



   retard) DOIT survivre au balayeur de verre : lib/vitres.js classe ces cartes



   en panneau ~1,6 s apres leur naissance et .card.card pose alors son fond a



   !important — une teinte inline vivait une seconde puis mourait au balayage.



   Cette regle, placee APRES le bloc du verre et elle aussi a !important, gagne



   dans les deux etats (avant ET apres classification). Les variables viennent



   du style inline de la carte. */







[data-teinte],



.card.card[data-teinte],



.vitre-bloc.vitre-bloc[data-teinte] {



  /* CONTOUR SEUL (27/08) : le fond reste celui du verre — la couleur d'etape ne



     vit que sur le tour. Toujours a !important : .card.card colore ses bordures



     a !important au moment ou le balayeur classe la carte. */



  border-color: var(--teinte-bord) !important;



  border-left: 3px solid var(--teinte-arete) !important;



}







/* (la paroi interne ::after a ete supprimee le 26/08 : elle faisait un



   DOUBLE contour avec l'arete — un panneau, UNE seule ligne de lumiere) */







.card-sm { padding: 12px 14px; }







/* naissance : les cartes montent en fondu, en cascade — jamais si l'utilisateur



   prefere reduire le mouvement */







@media (prefers-reduced-motion: no-preference) {



  .card { animation: carte-nait .32s cubic-bezier(.22,1,.36,1) backwards; }



  .card:nth-child(2) { animation-delay: .06s; }



  .card:nth-child(3) { animation-delay: .12s; }



  .card:nth-child(4) { animation-delay: .18s; }



  .card:nth-child(5) { animation-delay: .24s; }



  .card:nth-child(n+6) { animation-delay: .3s; }



}







@media (prefers-reduced-motion: reduce) {



  .card, .vitre-bloc { transform: none; transition: none; }



}







@keyframes carte-nait {



  from { opacity: 0; transform: translateY(7px); }



  to   { opacity: 1; transform: none; }



}







/* Page layout */







.page { padding: 30px 40px; max-width: 1560px; margin: 0 auto; }







/* Eyebrow / micro-label en mono — RÈGLE : les titres portent l'accent du thème */







.section-label {



  font-family: var(--mono);



  font-size: 11px;



  font-weight: 600;



  letter-spacing: 0.09em;



  text-transform: uppercase;



  color: var(--accent);



  text-shadow: 0 0 10px var(--glow);



  margin-bottom: 12px;



}







/* Tags & badges */







.tag {



  display: inline-flex;



  align-items: center;



  font-family: var(--mono);



  font-size: 10.5px;



  font-weight: 500;



  letter-spacing: 0.05em;



  text-transform: uppercase;



  padding: 2px 9px;



  border-radius: 6px;



  background: color-mix(in srgb, var(--accent) 10%, transparent);



  color: var(--accent);



  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);



  text-shadow: 0 0 10px var(--glow);



  backdrop-filter: blur(8px);



  -webkit-backdrop-filter: blur(8px);



}







.badge {



  display: inline-flex;



  align-items: center;



  font-size: 10px;



  font-weight: 700;



  padding: 2px 9px;



  border-radius: 20px;



}







/* Buttons */







.btn {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  padding: 8px 16px;



  border-radius: 12px;



  font-size: 13px;



  font-weight: 600;



  border: 1px solid transparent;



  cursor: pointer;



  transition: all .14s cubic-bezier(.4,0,.2,1);



  font-family: var(--sans);



  white-space: nowrap;



  letter-spacing: -0.01em;



}







.btn-primary {



  background: var(--logo);



  color: #fff;



  border-color: color-mix(in srgb, var(--logo) 55%, transparent);



  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 20px var(--glow), 0 4px 18px rgba(0,0,0,0.4);



}







.btn-primary:hover {



  background: linear-gradient(135deg, color-mix(in srgb, var(--logo) 80%, white), var(--logo));



  transform: translateY(-1px);



  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 30px var(--glow), 0 8px 26px rgba(0,0,0,0.5);



}







.btn-primary:active { transform: translateY(0); }







.btn-ghost { background: rgba(255,255,255,0.03); color: var(--text2); border-color: var(--glass-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }







.btn-ghost:hover { background: rgba(255,255,255,0.07); color: var(--text); border-color: rgba(255,255,255,0.16); }







.btn-danger { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 25%, transparent); }







.btn-danger:hover { background: color-mix(in srgb, var(--red) 20%, transparent); }







.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 10px; gap: 5px; }







.btn-icon { padding: 5px 8px; }







/* Forms */







.form-group { margin-bottom: 14px; }







.form-group label {



  display: block;



  font-family: var(--mono);



  font-size: 11px;



  font-weight: 500;



  color: var(--text2);



  margin-bottom: 6px;



  text-transform: uppercase;



  letter-spacing: 0.06em;



}







/* TOUS les inputs (même sans attribut type) : verre sombre, jamais de blanc navigateur */







input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),



select, textarea {



  width: 100%;



  background: rgba(8, 8, 10, 0.6);



  backdrop-filter: blur(12px);



  -webkit-backdrop-filter: blur(12px);



  border: 1px solid var(--glass-border);



  border-radius: 10px;



  padding: 9px 12px;



  font-size: 13px;



  color: var(--text);



  font-family: var(--sans);



  transition: border-color .14s, box-shadow .14s, background .14s;



  box-sizing: border-box;



  color-scheme: dark;



}







.form-group input:focus,



.form-group select:focus,



.form-group textarea:focus,



input:focus, select:focus, textarea:focus {



  outline: none;



  border-color: var(--accent);



  box-shadow: 0 0 0 3px var(--glow), 0 0 18px var(--glow);



}







input::placeholder, textarea::placeholder { color: var(--muted); }







/* MODE CLAIR : inputs/selects clairs avec délimitation nette (sinon verre sombre) */







[data-mode="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),



[data-mode="light"] select,



[data-mode="light"] textarea {



  background: rgba(255, 255, 255, 0.92);



  border: 1px solid rgba(15, 18, 28, 0.16);



  color: var(--text);



  color-scheme: light;



}







.form-group textarea, textarea { resize: vertical; min-height: 80px; line-height: 1.5; }







.form-group select, select {



  appearance: none;



  cursor: pointer;



  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6b7e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");



  background-repeat: no-repeat;



  background-position: right 10px center;



  padding-right: 30px;



}







.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }







/* Modal / Overlay */







.overlay {



  position: fixed;



  inset: 0;



  background: rgba(3, 5, 12, 0.5);



  backdrop-filter: blur(14px) saturate(120%);



  -webkit-backdrop-filter: blur(14px) saturate(120%);



  display: flex;



  align-items: center;



  justify-content: center;



  z-index: 1000;



  padding: 20px;



}







.modal {



  background: rgba(8, 8, 10, 0.94); /* opaque de LISIBILITE prescrit (exception regle 1) */



  backdrop-filter: var(--glass-blur);



  -webkit-backdrop-filter: var(--glass-blur);



  border: 1px solid var(--glass-border);



  border-radius: 18px;



  padding: 28px;



  width: 100%;



  max-width: 600px;



  max-height: 90vh;



  overflow-y: auto;



  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 30px 90px rgba(0,0,0,0.6);



  animation: rise .35s cubic-bezier(.22, 1, .36, 1);



}







.modal h2 { font-size: 18px; font-weight: 700; margin: 0 0 20px; letter-spacing: -0.015em; }







@keyframes pulse {



  0%, 100% { opacity: 1; transform: scale(1); }



  50% { opacity: 0.4; transform: scale(1.05); }



}







/* ── Feuille "Plus" (mobile) ── */







@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }







/* ── Adaptations téléphone (≤768px) ── */







@media (max-width: 768px) {



  html, body { overflow-x: hidden; }



  /* padding compact + jamais de débordement horizontal */



  .page { padding: 16px 14px 24px !important; max-width: 100% !important; }



  .mobile-page > .page { padding: 16px 14px 24px !important; }



  /* les pages en padding inline large repassent en padding mobile */



  .mobile-page > div[style*="padding: 32px"],



  .mobile-page > div[style*="padding:32px"] { padding: 16px 14px 20px !important; }



  /* On ne rabat QUE les grilles de CARTES, reconnaissables à `auto-fit` / `auto-fill`.



     minmax(0,1fr) et non 1fr : la colonne doit pouvoir rétrécir sous la largeur de son



     contenu, sinon un graphe ou un mot long la fait déborder.



     AVANT (corrigé le 24/08) la règle visait tout `[style*="grid-template-columns"]`,



     donc aussi les LIGNES DE TABLEAU construites en grid : le calendrier semaine de



     Planning empilait ses 7 jours, et les lignes de Pays, Naissance et Rétention se



     détachaient de leurs en-têtes. Une grille à colonnes explicites garde sa forme. */



  .mobile-page [style*="auto-fit"],



  .mobile-page [style*="auto-fill"],



  .mobile-page [style*="fr 1fr"],



  .mobile-page [style*="grid-template-columns: repeat("] { grid-template-columns: minmax(0, 1fr) !important; }



  /* rien ne peut être plus large que l'écran : médias, chart SVG, canvas.



     `table` est volontairement ABSENT de cette liste : l'y mettre étranglait les



     tableaux de 7-8 colonnes à ~43 px par colonne, le texte se cassant lettre par



     lettre. Un tableau garde sa largeur naturelle et défile dans son conteneur. */



  .mobile-page img, .mobile-page svg, .mobile-page canvas, .mobile-page video,



  .mobile-page pre { max-width: 100% !important; }



  .mobile-page table { width: max-content; min-width: 100%; }







  /* ── LE DÉFILEMENT NE PART PLUS DE CÔTÉ ──



     `touch-action: pan-y` interdit au navigateur d'interpréter la composante



     horizontale d'un swipe vertical. Le geste latéral n'est réautorisé que là où il



     sert : conteneurs à défilement horizontal explicite, tableaux, barres d'onglets. */



  .mobile-page { touch-action: pan-y; overscroll-behavior-x: none; }



  .mobile-page [style*="overflow-x"],



  .mobile-page [style*="overflowX"],



  .mobile-page table,



  .mobile-page .scroll-x { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }



  /* autorise les enfants flex/grid à rétrécir (ellipsis, wrap) au lieu de pousser */



  .mobile-page .card, .mobile-page main > * { min-width: 0; }



  /* cartes un peu plus compactes */



  .card { padding: 14px 15px; }



  /* titres de page réduits */



  .mobile-page h1 { font-size: 24px !important; }



  /* champs assez grands pour le tactile, sans zoom auto iOS (>=16px) */



  .mobile-page input, .mobile-page textarea, .mobile-page select { font-size: 16px !important; }



  /* barres d'onglets/filtres horizontales : scroll au lieu de déborder */



  .mobile-page [style*="overflow-x"] { -webkit-overflow-scrolling: touch; }



}







/* ══ APP MOBILE (PWA) — comportement natif sur iPhone/Android ══



   Ces règles s'appliquent au tactile : pas de rebond de page, pas de flash au



   toucher, pas de menu long-press sur le chrome, mais le CONTENU reste



   sélectionnable/copiable (chat, notes...). */







@media (pointer: coarse) {



  html, body {



    /* coupe le pull-to-refresh et le rebond élastique de toute la page */



    overscroll-behavior: none;



    /* pas de surlignage bleu au tap */



    -webkit-tap-highlight-color: transparent;



  }



  /* le chrome de l'app (nav, boutons, en-têtes, labels) ne se sélectionne pas



     et n'ouvre pas de menu au long-press → feeling app, pas page web */



  nav, header, button, a, .section-label, .tag, .badge, .hud-label {



    -webkit-touch-callout: none;



    -webkit-user-select: none;



    user-select: none;



  }



  /* mais on garde la sélection sur le contenu lisible/copiable */



  input, textarea, [contenteditable], p, .msg-in, .num, pre, code {



    -webkit-user-select: text;



    user-select: text;



  }



}







/* En app installée (plein écran, sans barre Safari) : un chouïa d'air en haut



   quand aucune safe-area n'est remontée (vieux appareils) */







@media (display-mode: standalone), (display-mode: minimal-ui) {



  body { background: var(--bg); }



}







/* ── Liquid glass (pipeline Agents) — verre iOS26 : blur profond, reflet spéculaire, poutre de lumière ── */







.lg-panel {



  /* aligne sur le verre v2 : face transparente, l'arete vient de .vitre-bloc



     (le voile ::before et le fond bleute d'origine ecrasaient l'anneau) */



  position: relative; overflow: hidden;



  background: transparent;



  backdrop-filter: blur(28px) saturate(140%);



  -webkit-backdrop-filter: blur(28px) saturate(140%);



  border: 1px solid rgba(255,255,255,0.07);



  border-radius: 22px;



}







.lg-stage {



  position: relative; z-index: 1;



  background: transparent;



  backdrop-filter: blur(24px) saturate(170%);



  -webkit-backdrop-filter: blur(24px) saturate(170%);



  border: 1px solid rgba(255,255,255,0.10);



  border-radius: 18px;



}







/* (le :hover transform d'origine ecrasait le tilt verre — supprime 25/08) */







.lg-chip {



  display: inline-flex; align-items: center; gap: 6px;



  font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px;



  background: rgba(255,255,255,0.05);



  border: 1px solid rgba(255,255,255,0.10);



  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);



  backdrop-filter: blur(14px);



  -webkit-backdrop-filter: blur(14px);



}







.lg-dot { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 8px currentColor; background: currentColor; }







/* .lg-beam supprime 25/08 : arc-en-ciel en dur, aucune utilisation */







@keyframes lgTravel { from { left: -90px; } to { left: 100%; } }







.lg-loop {



  display: inline-flex; align-items: center; gap: 8px;



  font-size: 11.5px; padding: 7px 13px; border-radius: 12px;



  background: rgba(255,255,255,0.035);



  border: 1px solid rgba(255,255,255,0.08);



  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);



  backdrop-filter: blur(14px);



  -webkit-backdrop-filter: blur(14px);



}







.lg-loop .lg-arc { width: 26px; height: 10px; border: 1.5px dashed currentColor; border-bottom: none; border-radius: 26px 26px 0 0; opacity: .85; animation: lgDash 2.8s linear infinite; }







@keyframes lgDash { to { transform: translateX(0); opacity: .45; } }







@media (prefers-reduced-motion: reduce) {







  .lg-loop .lg-arc { animation: none; }



  .lg-stage, .lg-stage:hover { transform: none; }



}







.lg-rail { position: absolute; pointer-events: none; }







@media (max-width: 900px) { .lg-rail { display: none; } }







/* Barre DIRECT (section YouTube) — pulsation des LED d'etat */







@keyframes ytpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }







@media (prefers-reduced-motion: reduce) {



  [style*="ytpulse"] { animation: none !important; }



}







/* Section YouTube : sous 1500 px, bloc centre classique ; au-dela, 3 colonnes fluides —



   le contenu (1200) garde son axe, le panneau lateral est centre DANS l'espace de droite */







/* position:relative — l'ancre du badge « Source : YouTube » pose en absolu dans



   le coin (YouTubeHub). Sans elle il s'ancrerait au <main> et deriverait au scroll. */







.yt-wrap { max-width: 1520px; margin: 0 auto; position: relative; }







.yt-shell { display: grid; grid-template-columns: minmax(0, 1240px); justify-content: center; }







.yt-side { display: none; }







.yt-navrail { display: none; }







@media (min-width: 1500px) {



  .yt-wrap { max-width: none; margin: 0; }



  /* la nav horizontale du haut disparaît : la console verticale de gauche la remplace */



  .yt-head { display: none; }



  /* rail central calibre sur la largeur RENDUE (1440 interne x zoom 0.85 = 1224) : le



     mou reste dans les gouttieres, les panneaux lateraux y sont centres pour de vrai */



  .yt-shell { grid-template-columns: minmax(240px, 1fr) minmax(0, 1240px) minmax(300px, 1fr); }



  .yt-navrail { grid-column: 1; display: block; padding-top: 18px; }



  /* centrage SANS transform (Backdrop Root : le translateY privait les



     panneaux du rail de leur flou — meme fix que cc-* le 26/08) */



  .yt-navrail-inner { position: sticky; top: max(24px, calc(50vh - 260px)); width: 208px; margin: 0 auto; }



  .yt-content { grid-column: 2; }



  .yt-side { grid-column: 3; display: block; padding-top: 18px; }



  .yt-side-inner { position: sticky; top: max(24px, calc(50vh - 310px)); width: 274px; margin: 0 auto; }



  /* les colonnes latérales doivent être AU MOINS hautes d'un écran, sinon le collage



     sticky n'a pas de place et le panneau se cale en haut, rogné (bug « de temps en



     temps » : il ne se voyait que sur les pages courtes comme Grille ou Montage) */



  .yt-navrail, .yt-side { min-height: calc(100vh - 40px); }



}







/* flottement des panneaux lateraux — amplitude 9px + leger roulis, respiration lente */







@keyframes ytfloat {



  0%, 100% { transform: translateY(0) rotate(0deg); }



  35%      { transform: translateY(-9px) rotate(0.2deg); }



  70%      { transform: translateY(-3px) rotate(-0.15deg); }



}







@media (prefers-reduced-motion: reduce) { [style*="ytfloat"] { animation: none !important; } }







/* ── Cockpit Commandement (25/08) : la structure 3 colonnes de la section



   YouTube (console gauche / contenu / rail droit, rails sticky centres),



   SANS son chrome (grain, ambiance, zoom, accents rouges). Sous 1500 px la



   colonne centrale reprend tout et .cc-fallback affiche mission + pouls. */







.cc-wrap { max-width: 1520px; margin: 0 auto; }







/* zoom deplace sur <main> (26/08) : un conteneur zoome est un Backdrop Root,



   ses vitres ne floutaient jamais le decor situe hors de lui */







.cc-shell { display: grid; grid-template-columns: minmax(0, 1240px); justify-content: center; }







.cc-navrail, .cc-side { display: none; }







.cc-fallback { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }







@media (min-width: 1500px) {



  .cc-wrap { max-width: none; margin: 0; }



  .cc-shell { grid-template-columns: minmax(240px, 1fr) minmax(0, 1240px) minmax(300px, 1fr); }



  .cc-navrail { grid-column: 1; display: block; padding-top: 18px; }



  /* centrage SANS transform : un transform sur l'ancetre devient la racine



     de fond des backdrop-filter enfants -> le flou des panneaux ne voyait



     jamais la planete derriere (spec Backdrop Root, constate chez Albin) */



  .cc-navrail-inner { position: sticky; top: max(24px, calc(50vh - 260px)); width: 216px; margin: 0 auto; }



  .cc-content { grid-column: 2; }



  .cc-side { grid-column: 3; display: block; padding-top: 18px; }



  .cc-side-inner { position: sticky; top: max(24px, calc(50vh - 310px)); width: 278px; margin: 0 auto; }



  .cc-navrail, .cc-side { min-height: calc(100vh - 40px); }



  .cc-fallback { display: none; }



}







/* ============================================================



   THEME ROUGE — section YouTube uniquement (refonte 14/08).



   Les pages consomment var(--accent)/var(--logo)/var(--glow) :



   on les surcharge DANS .yt-wrap, le reste d'ADR OS ne bouge pas.



   Rouge carmin = chrome / titres / nav ; or = la locomotive et



   les valeurs precieuses ; les couleurs d'ETAT (bleu monte,



   jaune non repertorie, vert publie) restent semantiques.



   ============================================================ */







.yt-wrap {



  /* La section forcait le carmin quel que soit le theme choisi : changer de theme ne changeait



     donc rien sur YouTube, qui est l'essentiel de l'application. Elle SUIT le theme maintenant.



     Le carmin reste disponible, c'est le theme Rubis.



     L'ambiance se derive de l'accent au lieu d'etre ecrite en dur, donc elle suit aussi. */



  background:



    radial-gradient(1000px 560px at 88% -6%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 62%),



    radial-gradient(760px 500px at -10% 34%, color-mix(in srgb, var(--accent2) 5%, transparent), transparent 60%),



    radial-gradient(860px 560px at 55% 118%, color-mix(in srgb, var(--accent3, var(--accent)) 4%, transparent), transparent 62%);



}







/* entree en scene des sections (cascade 0/70/140/210 ms) */







@keyframes ytrise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }







.yt-rise   { animation: ytrise .45s cubic-bezier(.22,1,.36,1) backwards; }







.yt-rise-2 { animation: ytrise .45s cubic-bezier(.22,1,.36,1) .07s backwards; }







.yt-rise-3 { animation: ytrise .45s cubic-bezier(.22,1,.36,1) .14s backwards; }







.yt-rise-4 { animation: ytrise .45s cubic-bezier(.22,1,.36,1) .21s backwards; }







/* balise du jour (Grille) et balayages lumineux discrets */







@keyframes ytbeam { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }







@keyframes ytscan { from { background-position: -200% 0; } to { background-position: 300% 0; } }







/* metro des publications (Grille) : la ligne s'eclaire au survol */







.yt-metro tbody tr { transition: background .15s; }







.yt-metro tbody tr:hover td { background-color: rgba(255,255,255,0.03); }







/* Le neon des titres est retire ici aussi. Il avait ete supprime des `h1` globaux, mais cette



   regle plus specifique le remettait sur toute la section YouTube — le titre continuait donc



   de briller alors que le jeton avait change. Aucune des references ne pose de halo sur du



   texte. */







/* ============================================================



   PASSE D'ELEVATION (14/08) — les details qu'on ne remarque pas



   consciemment mais qui font le prix : grain cinema, selection



   teintee, chiffres tabulaires, focus neon.



   Tout est scope .yt-wrap : le reste d'ADR OS ne bouge pas.



   ============================================================ */







/* grain de film : unifie verre, neons et nappes en UNE matiere */







.yt-wrap::after {



  content: '';



  position: fixed;



  inset: 0;



  z-index: 80;



  pointer-events: none;



  opacity: 0.027;



  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");



}







/* barres de defilement : SUPPRIMEES ici (26/08). Ce bloc dessinait un thumb



   carmin de 9px sur toute la section YouTube — c'est lui qu'on voyait en bas



   et a droite des panneaux (Vagues). Il battait la regle globale par sa



   specificite (.yt-wrap *) : il fallait le retirer, pas seulement ajouter une



   regle ailleurs. Les barres invisibles sont desormais definies UNE seule



   fois, plus haut dans ce fichier (« BARRES DE DEFILEMENT INVISIBLES »). */







/* selection de texte aux couleurs de la maison */







.yt-wrap ::selection { background: color-mix(in srgb, #ff2d4d 35%, transparent); color: #fff; }







/* chiffres tabulaires : les colonnes de nombres s'alignent au pixel */







.yt-wrap .num, .yt-wrap [class*='num'] { font-variant-numeric: tabular-nums; }







/* clavier : anneau de focus neon, jamais l'outline bleu du navigateur */







.yt-wrap :focus-visible {



  outline: 1px solid color-mix(in srgb, #ff2d4d 65%, transparent);



  outline-offset: 2px;



  box-shadow: 0 0 10px color-mix(in srgb, #ff2d4d 30%, transparent);



}







/* PANNEAUX v2 : tout panneau de verre (reconnu a son degrade 155deg) recoit un BORD



   SUPERIEUR LUMINEUX qui accroche la lumiere + une bordure plus presente — c'est



   l'arete eclairee qui fait la difference entre une carte sombre et une vitre. */







.yt-wrap [style*='155deg'] { border-color: rgba(255, 255, 255, 0.13) !important; }







.yt-wrap [style*='155deg']::before {



  content: '';



  position: absolute;



  left: 0; right: 0; top: 0;



  height: 1px;



  border-radius: inherit;



  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38) 28%, rgba(255,255,255,0.08) 72%, transparent);



  pointer-events: none;



  z-index: 1;



}







/* echelle du contenu : la colonne centrale est composee a 85 % (retour Albin : « trop



   gros a 100 % ») — les panneaux lateraux et la nav gardent leur taille */







/* largeur des pages : toutes les pages (chaque onglet de chaque axe) posent un



   max-width 1200px inline — on l'etend a 1440 d'un coup, et on garantit le centrage */







.yt-content > .yt-rise > div {



  max-width: 1440px !important;



  margin-left: auto !important;



  margin-right: auto !important;



}







/* respiration sous les titres (toutes pages) : un titre ne se noie plus dans son contenu.



   Cible les SectionTitle (flex baseline + mb 12px inline) et le PageHeader (mb 26px inline). */







.yt-content [style*='align-items: baseline'][style*='margin-bottom: 12px'] { margin-bottom: 26px !important; }







.yt-content [style*='margin-bottom: 26px'] { margin-bottom: 40px !important; }







@media (prefers-reduced-motion: reduce) {



  .yt-rise, .yt-rise-2, .yt-rise-3, .yt-rise-4 { animation: none !important; }



  [style*="ytbeam"], [style*="ytscan"] { animation: none !important; }



}







/* 3d-force-graph injecte un texte d'aide anglais bleute en bas du graphe : masque */







.scene-nav-info { display: none !important; }







[data-theme="aurore"] .btn-primary { color: #08080a; }







/* ── ICONES CARMIN (26/08) : l'iconographie porte la couleur, pas le texte.



   Toute icone svg dans un lien ou bouton est carmin au repos ; dans la gelule



   active elle passe BLANCHE (contraste sur le fond rouge lumineux). */







[data-theme="aurore"] a svg, [data-theme="aurore"] button svg { color: var(--accent); }







/* ── GELULE (26/08, ref kit verre) : l'etat SELECTIONNE est un bouton physique



   eclaire — fond carmin lumineux, relief 3D (rim clair en haut, creux en bas),



   halo. S'applique par className sur les items actifs (nav, console, onglets). */







.gelule-active, .navigation-panel>:is(a.active,button[aria-current=page],button[aria-pressed=true]) {



  background: linear-gradient(180deg, rgba(255, 80, 105, 0.5), rgba(190, 20, 50, 0.42)) !important;



  border-color: rgba(255, 130, 150, 0.55) !important;



  color: #fff !important;



  box-shadow: 0 0 16px rgba(255, 45, 77, 0.4), 0 0 42px rgba(255, 45, 77, 0.16),



    inset 0 1px 0 rgba(255, 200, 210, 0.5), inset 0 -3px 7px rgba(110, 0, 25, 0.6) !important;



  text-shadow: 0 0 12px rgba(255, 120, 140, 0.7);



}







.gelule-active svg { color: #ffffff !important; filter: drop-shadow(0 0 7px rgba(255, 160, 175, 0.95)); }







/* Galaxy black shared by the red/black themes. Keep light mode independent. */







:root[data-theme="aurore"]:not([data-mode="light"]),



:root[data-theme="rubis"]:not([data-mode="light"]) {



  --bg: #020609;



  --surface: #020609;



  --surface2: #0b1116;



  --shell-a: #020609; --shell-b: #020609;



  --main-a: #020609; --main-b: #020609;



  --glass: rgba(2, 6, 9, 0.90); --glass2: rgba(10, 16, 21, 0.94);



}







/* Shared section navigation: same left console as YouTube. */







.section-side-menu button{display:flex!important;align-items:center;gap:9px!important;text-align:left;justify-content:flex-start;font-family:var(--sans)!important;font-size:12.5px!important;letter-spacing:normal!important}







.section-side-menu button[aria-pressed=true],.section-side-menu button[aria-current=page]{color:var(--text)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 48%,#171013),color-mix(in srgb,var(--accent) 28%,#171013))!important;border-color:color-mix(in srgb,var(--accent) 60%,transparent)!important;box-shadow:inset 0 1px 0 #ffffff26,0 4px 18px color-mix(in srgb,var(--accent) 23%,transparent)!important;font-weight:800!important}







.section-side-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}







@media(min-width:1024px){



 .section-nav-page{position:relative;max-width:none!important;min-height:100%;padding-left:260px!important;padding-right:32px!important}



 .section-nav-page>.section-side-menu,.pipelines-page>.workflow-tabs.section-side-menu{position:absolute;left:24px;top:140px;width:208px!important;box-sizing:border-box;display:flex;flex-direction:column;gap:4px!important;padding:12px!important;border:1px solid var(--glass-border)!important;border-radius:16px!important;background:var(--bg)!important;box-shadow:inset 0 1px 0 #ffffff12,0 14px 38px #0005;z-index:6;max-height:calc(100vh - 180px);overflow-y:auto;align-self:auto}



 .section-side-menu button{width:100%;padding:10px 12px!important;border-radius:9px!important;white-space:normal!important;min-height:36px}



 .page.pipelines-page:has(>.workflow-tabs){padding-left:260px!important}



 .yt-navrail-inner>div{animation:none!important}



}







@media(min-width:1024px) and (max-width:1499px){



 .yt-wrap{max-width:none;margin:0}



 .yt-head{display:none}



 .yt-shell{grid-template-columns:240px minmax(0,1fr);justify-content:stretch}



 .yt-navrail{display:block;grid-column:1;padding-top:120px;min-height:calc(100vh - 40px)}



 .yt-navrail-inner{position:sticky;top:110px;width:208px;margin:0 auto}



 .yt-content{grid-column:2;min-width:0}



}







@media(max-width:1023px){



 .section-side-menu{max-width:100%;flex-wrap:nowrap!important;overflow-x:auto}



 .section-side-menu button{white-space:nowrap!important;flex:none}



}







/* Deux identités, même structure et même éclairage périphérique. */







:root,[data-theme="aurore"]{--edge-light:#40142170;--galaxy-edge:#160b13;--theme-rgb:255,77,100;--light-soft:rgba(255,77,100,.12)}







:root[data-theme="glacier"]{--bg:#030611;--surface:#080e20;--surface2:#101b35;--accent:#4d72e8;--accent2:#6485ed;--accent3:#a9baff;--logo:#4d72e8;--text:#edf5fc;--text2:#c3d2df;--muted:#899dac;--border:#5475db20;--border2:#5475db38;--glass-border:#5475db26;--glass:#080e20e8;--glass2:#101831ed;--shell-a:#030611;--shell-b:#030611;--main-a:#030611;--main-b:#030611;--glow:#4d72e828;--c1:#c8d2ff;--c2:#6485ed;--c3:#4d72e8;--c4:#3454c5;--c5:#2843a6;--c6:#203582;--c7:#162657;--green:#63d693;--red:#ff667d;--edge-light:#14286680;--galaxy-edge:#0a1332;--theme-rgb:77,114,232;--light-soft:rgba(77,114,232,.12)}







.adros-theme-light{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at 0 50%,var(--light-soft),transparent 42%),radial-gradient(ellipse at 100% 35%,var(--light-soft),transparent 42%);contain:strict}







[data-theme] .gelule-active,[data-theme] .navigation-panel>:is(a.active,button[aria-current=page],button[aria-pressed=true]){background:linear-gradient(180deg,rgba(var(--theme-rgb),.42),rgba(var(--theme-rgb),.20))!important;border-color:rgba(var(--theme-rgb),.55)!important;box-shadow:0 0 16px rgba(var(--theme-rgb),.3),0 0 42px rgba(var(--theme-rgb),.12),inset 0 1px #ffffff65,inset 0 -3px 7px #0005!important;text-shadow:0 0 12px rgba(var(--theme-rgb),.5)}







[data-theme] .gelule-active svg{filter:drop-shadow(0 0 7px rgba(var(--theme-rgb),.7))}







[data-theme="glacier"] a svg,[data-theme="glacier"] button svg{color:var(--accent)}







[data-theme] .mobile-app{background:radial-gradient(ellipse at 100% 0,var(--edge-light),transparent 60%),var(--bg)}







[data-theme] .m-dock a.active{background:linear-gradient(160deg,rgba(var(--theme-rgb),.48),rgba(var(--theme-rgb),.18))}







[data-mode="light"] .adros-theme-light{opacity:.3}







:root[data-theme="braise"]{--edge-light:#45200f70;--galaxy-edge:#1a0d07;--theme-rgb:255,90,31;--light-soft:rgba(255,90,31,.12)}







/* V14 : la premiere carte chiffree d'une rangee est pleine, degrade orange. Les variables



   sont redefinies DANS la carte : ses styles en ligne (var(--muted), var(--accent)...)



   passent au blanc sans toucher au composant. */







[data-theme="braise"] .stat-card:first-child:not(:only-child) svg{color:#fff!important;stroke:#fff}







[data-theme="braise"] .stat-card:first-child:not(:only-child){background:linear-gradient(140deg,#ff7a45 0%,#ff5a1f 45%,#d9380c 100%)!important;border-color:rgba(255,190,160,.45)!important;box-shadow:0 18px 44px rgba(255,90,31,.28),inset 0 1px 0 rgba(255,255,255,.35)!important;--muted:rgba(255,255,255,.86);--accent:#fff;--fg-strong:#fff;--green:#fff;--red:#fff;--text:#fff;--text2:#fff}







[data-theme="braise"] .stat-card .num{font-family:var(--sans);font-weight:800;letter-spacing:-.035em}







[data-theme="braise"] .cr-pc{border-color:rgba(255,140,95,.3)}



/* Shared ADROS motion: quick feedback, stable menus, no layout animation.
   04/10 : UN systeme de mouvement. Trois durees, deux courbes, un ressort.
   Tout nouvel effet lit ces variables au lieu d'inventer sa propre duree
   (l'inventaire du 04/10 comptait 40 durees et 13 courbes differentes). */
:root{
 --motion-fast:120ms;--motion-ui:180ms;--motion-enter:240ms;--motion-morph:420ms;--motion-draw:900ms;
 --ease-out:cubic-bezier(.22,1,.36,1);
 --ease-in:cubic-bezier(.55,0,.75,.2);
 /* ressort amorti (zeta .8) : 1,5 % de depassement, puis repos. Precis, pas elastique. */
 --ease-spring:linear(0, 0.065, 0.208, 0.377, 0.538, 0.677, 0.788, 0.872, 0.931, 0.97, 0.994, 1.007, 1.013, 1.015, 1.014, 1.012, 1.01, 1.007, 1.005, 1.003, 1);
 --motion-ease:var(--ease-out)
}
@supports not (transition-timing-function:linear(0,1)){:root{--ease-spring:cubic-bezier(.3,1.25,.5,1)}}
@keyframes adros-enter{from{opacity:0}to{opacity:1}}
@keyframes adros-panel-enter{from{opacity:0;translate:-6px 0;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes adros-modal-enter{from{opacity:0;translate:0 10px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
.route-fade{animation:adros-enter var(--motion-enter) var(--motion-ease)}
.page>*:not(.section-side-menu),.page-anim>*:not(.section-side-menu){animation:none}
.context-rail,.carte-navigation,.pipelines-page>.workflow-tabs.section-side-menu,.section-nav-page>.section-side-menu,.yt-navrail-inner>div,.cc-navrail-inner>div{animation:none!important}
.nested-nav-panel{transform-origin:left center;animation:adros-panel-enter var(--motion-morph) var(--ease-spring)}
.nested-nav-backdrop{animation:adros-enter var(--motion-fast) ease-out}
.modal{transform-origin:center 40%;animation:adros-modal-enter var(--motion-morph) var(--ease-spring)}
/* Appui : on s'enfonce vite (80 ms), on revient sur le ressort. */
:where(button,.btn,[role=button],nav a){transition:color var(--motion-fast) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,opacity var(--motion-fast) ease,scale var(--motion-morph) var(--ease-spring)}
:where(button,.btn,[role=button]):not(:disabled):active{scale:.97;transition-duration:var(--motion-fast),var(--motion-fast),var(--motion-fast),var(--motion-fast),80ms;transition-timing-function:ease,ease,ease,ease,var(--ease-out)}
/* index.css pose `.btn{transition:all .14s}` (specificite superieure a :where) :
   sans ces deux regles, les 91 .btn n'avaient pas le ressort. La derniere
   entree gagne pour `scale`, `all` garde les survols existants. */
.btn{transition:all var(--motion-fast) ease,scale var(--motion-morph) var(--ease-spring)}
.btn:not(:disabled):active{transition-duration:var(--motion-fast),80ms;transition-timing-function:ease,var(--ease-out)}
.btn:active{transform:none}
nav a:hover{transform:none}
:where(button,a,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.navigation-panel>:is(a,button){transition:color var(--motion-fast) ease,background-color var(--motion-fast) ease,opacity var(--motion-fast) ease!important}
@media(hover:hover) and (pointer:fine){.navigation-panel>:is(a,button):hover{color:var(--text);background-color:var(--glow)}}

/* Cartes : une seule cascade, courte (40 ms de pas, 160 ms au plus). La page,
   elle, n'a plus d'animation propre : c'est la transition de vue qui l'amene. */
@media (prefers-reduced-motion:no-preference){
 .card{animation-duration:var(--motion-enter);animation-timing-function:var(--ease-out)}
 .card:nth-child(1){animation-delay:0s}
 .card:nth-child(2){animation-delay:.04s}
 .card:nth-child(3){animation-delay:.08s}
 .card:nth-child(4){animation-delay:.12s}
 .card:nth-child(n+5){animation-delay:.16s}
}

/* Messages des chats : ils sortent de leur coin (gauche pour la reponse,
   droite pour moi) sur le ressort. */
@keyframes msgIn{from{opacity:0;translate:0 10px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
.msg-in{transform-origin:left bottom;animation:msgIn var(--motion-morph) var(--ease-spring) backwards}
.msg-in.msg-moi{transform-origin:right bottom}
.chatia-message{transform-origin:left bottom;animation:msgIn var(--motion-morph) var(--ease-spring) backwards}
.chatia-message.chatia-user{transform-origin:right bottom}

/* Courbes : le trace se devoile de gauche a droite une seule fois, a la
   naissance du graphe. La marge de -24px laisse passer la lueur ; le
   remplissage `backwards` rend clip-path a `none` une fois fini, donc rien ne
   reste rogne. */
@keyframes trace-revele{from{clip-path:inset(-24px 100% -24px -24px)}to{clip-path:inset(-24px -24px -24px -24px)}}
.trace-revele{animation:trace-revele var(--motion-draw) var(--ease-out) .12s backwards}

/* ── TRANSITIONS DE PAGE (View Transitions, lib/transitionsPage.jsx) ─────────
   L'ancien fondu en opacite sur .route-fade mettait un ANCETRE des vitres sous
   opacity<1 : leur backdrop-filter mourait 240 ms puis revenait d'un coup.
   MESURE DU 04/10 : nommer .route-fade pour l'animer a part a EXACTEMENT le
   meme defaut (un element capture seul ne voit plus le fond, le verre devient
   net). Donc la page n'est JAMAIS capturee seule : c'est l'ecran entier (root)
   qui se fond, et dans cette image-la le verre est calcule normalement. */
@supports (view-transition-name:none){
 .route-fade{animation:none}
 ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--motion-enter);animation-timing-function:var(--ease-out)}
 /* Clic sur une carte : la carte grandit sur le ressort jusqu'a la zone de la
   page (cible invisible posee par transitionsPage.jsx) et s'y dissout, la
   nouvelle page apparaissant dessous. La carte capturee seule perdrait son
   flou : on le lui rend sur l'image elle-meme, il s'efface avec elle. */
 .vt-cible{position:fixed;pointer-events:none;view-transition-name:adros-carte}
 ::view-transition-group(adros-carte){animation-duration:var(--motion-morph);animation-timing-function:var(--ease-spring);overflow:clip;border-radius:22px}
 ::view-transition-old(adros-carte){animation:vt-sortie 300ms linear both;backdrop-filter:blur(28px) saturate(1.6) brightness(1.1);-webkit-backdrop-filter:blur(28px) saturate(1.6) brightness(1.1)}
 ::view-transition-new(adros-carte){animation:none;opacity:0}
}
@keyframes vt-sortie{to{opacity:0}}

/* State pulses and loading indicators remain; ambient page work pauses in background. */
html[data-motion-hidden] *,html[data-motion-hidden] *::before,html[data-motion-hidden] *::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:active,.btn:active,[role=button]:active{scale:1!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* Original RailNav panel and row styling; only positioning belongs to page CSS. */
.navigation-panel{position:relative;box-sizing:border-box;background:transparent!important;border:1px solid var(--glass-border)!important;border-radius:16px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 38px rgba(0,0,0,.45)!important;padding:13px 12px 11px!important}
.navigation-panel>:is(a,button){display:flex!important;align-items:center;gap:9px!important;padding:8px 10px!important;border-radius:9px!important;border:none!important;border-left:2px solid transparent!important;cursor:pointer;text-align:left;width:100%;background:transparent;color:var(--muted);font:600 12.5px var(--sans)!important;text-decoration:none;transition:all .15s;white-space:nowrap;min-height:0;box-shadow:none}
.navigation-panel>:is(a,button):hover{color:var(--text)}
.navigation-panel>:is(a.active,button[aria-current=page],button[aria-pressed=true]){font-weight:800!important}
.navigation-panel>:is(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nested-nav-trigger{justify-content:space-between}
.menu-item-icon{flex:none}.menu-item-label{flex:1;min-width:0}
.context-rail>.navigation-panel,.nested-nav-panel{display:flex;flex-direction:column;gap:3px}
@media(max-width:1023px){.context-rail>.navigation-panel{flex-direction:row}.context-rail .navigation-panel>:is(a,button){width:auto;flex:none}}

.navigation-panel>:is(a[aria-current=page],button[aria-current=page],button[aria-pressed=true],a.active){background:linear-gradient(180deg,rgba(255,80,105,.5),rgba(190,20,50,.42))!important;color:#fff!important;box-shadow:0 0 16px rgba(255,45,77,.4),0 0 42px rgba(255,45,77,.16),inset 0 1px 0 rgba(255,200,210,.5),inset 0 -3px 7px rgba(110,0,25,.6)!important;text-shadow:0 0 12px rgba(255,120,140,.7);font-weight:800!important}
.navigation-panel [aria-current=page] svg{color:#fff!important}
.context-starlight{background:var(--bg);isolation:isolate}

.adros-starfield{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 45%,transparent 25%,var(--edge-light) 100%)}

.adros-starfield canvas{display:block;width:100%;height:100%;pointer-events:none}

.context-starlight>.context-content{position:relative;z-index:1}

.context-starlight .as-page.is-mobile>.as-thread{background:transparent}

.context-starlight .page.pipelines-page,.context-starlight .workflow-map-wrap,.context-starlight .page.carte-systeme-adros,.context-starlight .chatia-page{background:transparent}

.context-starlight .cs-racine .cs-plein>.cs-scene,.context-starlight .chatia-workspace{background:transparent}

[data-mode=light] .adros-starfield{opacity:.18}

/* The CEO scene spans the page; the menu never changes its centre. */

@media(min-width:1024px){

 .context-shell.context-ceo{display:block}

 .context-ceo>.context-rail{position:absolute;z-index:8;left:clamp(32px,4vw,72px);top:50%;transform:translateY(-50%);margin:0;width:208px;max-height:calc(100% - 64px)}

 .context-ceo .as-page:not(.is-mobile){display:block;height:100%!important;padding:0;min-height:0}

 .context-ceo .as-page>.as-stage{position:absolute;inset:0;display:block;pointer-events:none}

 .context-ceo .as-stage>.as-orb{position:absolute;left:50%;top:50%;margin-left:calc(var(--size)/-2);margin-top:calc(var(--size)/-2);pointer-events:auto}

 .context-ceo .as-stage>.as-state{position:absolute;left:50%;top:calc(50% + 190px);transform:translateX(-50%);margin:0}

 .context-ceo .as-stage>.as-mute{position:absolute;top:calc(50% + 220px);left:calc(50% - 20px);pointer-events:auto}

 .context-ceo .as-stage>.as-caption,.context-ceo .as-stage>.as-error{position:absolute;left:50%;top:calc(50% + 255px);transform:translateX(-50%);width:min(360px,30%);margin:0}

 .context-ceo .as-page>.as-phone{position:absolute;right:clamp(32px,4vw,72px);top:50%;transform:translateY(-50%);width:clamp(280px,22vw,392px);min-width:0;height:min(820px,calc(100% - 64px))}

 .context-ceo .as-floor{left:50%;transform:translateX(-50%);bottom:10%}

}

@media(min-width:1024px) and (max-width:1350px){.context-ceo .as-stage>.as-orb{--size:200px}.context-ceo>.context-rail{left:32px;width:190px}.context-ceo .as-page>.as-phone{right:24px;width:280px}.context-ceo .as-stage>.as-state{top:calc(50% + 135px)}}

.context-shell{height:100%;min-height:0;display:grid;grid-template-columns:240px minmax(0,1fr);position:relative;isolation:isolate}
.context-content{min-width:0;min-height:0;height:100%;overflow:auto;position:relative}
.context-rail{align-self:center;max-height:calc(100% - 80px);overflow:auto;width:208px;margin:0 auto;z-index:8;border:1px solid var(--glass-border);border-radius:16px;background:var(--bg);box-shadow:inset 0 1px 0 #ffffff12,0 14px 38px #0005;padding:12px;box-sizing:border-box}
.context-rail nav{display:flex;flex-direction:column;gap:4px}
.context-rail a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Les menus métier conservent leurs interactions locales : pas de doublon. */
.context-shell:has(.context-content .section-side-menu,.context-content .yt-navrail){display:block}
.context-shell:has(.context-content .section-side-menu,.context-content .yt-navrail)>.context-rail{display:none}
@media(min-width:1500px){.context-shell:has(.context-content .cc-navrail){display:block}.context-shell:has(.context-content .cc-navrail)>.context-rail{display:none}}
@media(max-width:1023px){
 .context-shell{display:flex;flex-direction:column}
 .context-rail{width:calc(100% - 28px);max-height:none;flex:none;align-self:stretch;margin:12px 14px 0;padding:5px;border-radius:13px;overflow-x:auto}
 .context-rail nav{flex-direction:row;gap:3px}.context-rail a{white-space:nowrap;flex:none;padding:8px 11px;min-height:34px}
 .context-content{flex:1;min-height:0}
}

/* Un seul habillage pour les consoles locales et le menu commun. */
.nested-nav-layer{position:fixed;inset:0;z-index:1800}.nested-nav-backdrop{position:absolute;inset:0;background:#02060955;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
@keyframes contextual-float{0%,100%{translate:0 -3px}50%{translate:0 3px}}
@media(min-width:1024px) and (prefers-reduced-motion:no-preference){.context-rail,.carte-navigation,.pipelines-page>.workflow-tabs.section-side-menu,.section-nav-page>.section-side-menu,.yt-navrail-inner>div,.cc-navrail-inner>div{animation:contextual-float 7s ease-in-out infinite!important}.context-rail:hover,.section-side-menu:hover,.yt-navrail-inner>div:hover,.cc-navrail-inner>div:hover{animation-play-state:paused!important}}
@media(prefers-reduced-motion:reduce){.context-rail,.section-side-menu,.yt-navrail-inner>div,.cc-navrail-inner>div{animation:none!important}}
@media(max-width:1023px){.nested-nav-trigger{width:auto;flex:none;white-space:nowrap}}

/* Même ligne de navigation que les consoles Overview / YouTube / TikTok. */
.menu-item-icon{flex:none;color:var(--accent);opacity:.9}.menu-item-label{flex:1;min-width:0}
.context-rail{padding:0;background:none;border:0;box-shadow:none;overflow:visible}
.nested-nav-panel{position:fixed!important;max-height:calc(100dvh - 32px);overflow:auto!important;box-sizing:border-box}
.context-without-menu,.context-overlay{display:block}
.context-overlay>.context-rail{position:absolute;left:clamp(32px,4vw,72px);top:50%;transform:translateY(-50%);margin:0;max-height:calc(100% - 40px);overflow:auto}
@media(max-width:1023px){.context-overlay>.context-rail{width:208px;max-height:65%;}.context-overlay .navigation-panel{flex-direction:column}}
/* Page Assistant / Chat CEO (22/09/2026, refonte). Thème ADROS (Rubis) : tout dérive des variables du thème.
   Signature : la bulle de points vit, son énergie (--lvl, 0..1, posée par la bulle elle-même) éclaire le sol et
   l'écran du téléphone. Aucun backdrop-filter ici (il meurt sous un transform, piège du 26/08). */
.as-page{--lvl:0;position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,5vw,96px);height:calc(100dvh - 72px);padding:clamp(16px,3vh,32px) clamp(20px,4vw,64px);box-sizing:border-box;overflow:hidden;isolation:isolate}
/* nappe de lumière au sol : une ellipse floue sous la scène, qui respire avec la bulle */
.as-floor{position:absolute;left:50%;bottom:-14%;z-index:-1;width:min(70vw,900px);height:38%;transform:translateX(-58%);border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent) 6%,transparent) 45%,transparent 70%);filter:blur(28px);opacity:calc(.35 + var(--lvl)*.65);pointer-events:none}

/* ── Scène ── */
.as-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-width:0;height:100%}
.as-orb{--size:clamp(180px,22vw,300px);position:relative;width:var(--size);height:var(--size);border:0;border-radius:50%;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.as-orb:active{transform:scale(.97)}
.as-orb:focus-visible::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 70%,transparent)}
.as-orb span{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.as-orb-pts{position:absolute;inset:-45%;width:190%;height:190%;pointer-events:none;display:block;will-change:transform;contain:strict;transition:opacity .35s,filter .35s}
.as-stage.is-off .as-orb-pts{opacity:.6;filter:saturate(.7)}
.as-stage.is-mute .as-orb-pts{opacity:.42;filter:saturate(.12)}
.as-stage.is-mute.is-speaking .as-orb-pts{opacity:.85;filter:saturate(.6)}
.as-orb:hover .as-orb-pts{opacity:1;filter:none}
.as-orb-halo{inset:-34%!important;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent) 0%,color-mix(in srgb,var(--accent) 9%,transparent) 42%,transparent 68%);opacity:calc(.22 + var(--lvl)*.78);transform:scale(calc(1 + var(--lvl)*.14));transition:opacity .12s}
/* l'état : un mot en mono, précédé d'un point qui prend la couleur de l'état */
.as-state{display:flex;align-items:center;gap:9px;min-height:16px;margin-top:38px;font:600 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.as-state:not(:empty)::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--muted)}
.as-stage.is-listening .as-state{color:var(--text2)}
.as-stage.is-listening .as-state::before{background:var(--green);box-shadow:0 0 10px var(--green);animation:as-pulse 1.4s ease-in-out infinite}
.as-stage.is-thinking .as-state::before{background:var(--accent3,var(--accent));animation:as-pulse .7s ease-in-out infinite}
.as-stage.is-speaking .as-state{color:var(--text)}
.as-stage.is-speaking .as-state::before{background:var(--accent);box-shadow:0 0 12px var(--accent)}
.as-stage.is-muted .as-state::before{background:var(--red,var(--accent))}
.as-caption{max-width:min(560px,90%);margin:0;text-align:center;font:400 17px/1.5 var(--sans);color:var(--text);text-wrap:balance;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;animation:as-in .3s cubic-bezier(.2,.8,.2,1)}
.as-mute{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--border2);border-radius:50%;background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--text2);cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s}
.as-mute:hover{border-color:var(--accent);color:var(--accent)}
.as-mute:active{transform:scale(.94)}
.as-mute.is-on{background:var(--accent);border-color:var(--accent);color:#000}
.as-mute.is-on svg{color:#000!important}
@keyframes as-pulse{50%{opacity:.35}}
@keyframes as-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Le téléphone (bureau) : un vrai appareil, l'écran éclairé par la bulle ── */
.as-phone{position:relative;width:min(392px,34vw);min-width:320px;height:min(820px,100%);box-sizing:border-box;padding:11px;border-radius:54px;background:linear-gradient(160deg,#1a1a20,#08080a 40%,#111116 100%);box-shadow:0 0 0 1.5px #2a2a31,0 0 0 3px #000,0 40px 90px -20px #000,0 0 90px color-mix(in srgb,var(--accent) calc(6% + var(--lvl)*14%),transparent);transition:box-shadow .3s}
.as-phone::before{content:'';position:absolute;inset:11px;border-radius:44px;box-shadow:inset 0 0 0 1px #ffffff10,inset 0 30px 60px -40px color-mix(in srgb,var(--accent) 35%,transparent);pointer-events:none;z-index:2}
.as-island{position:absolute;top:24px;left:50%;z-index:3;width:104px;height:30px;margin-left:-52px;border-radius:16px;background:#000;box-shadow:inset 0 0 0 1px #ffffff08}
.as-clock{position:absolute;top:29px;left:38px;z-index:3;font:600 14px var(--sans);letter-spacing:.01em;color:var(--fg-strong,#fff)}
.as-phone .as-thread{border-radius:44px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--bg)),var(--bg) 22%)}
.as-phone .as-head{padding-top:58px}

/* ── Le fil ── */
.as-thread{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;background:var(--bg)}
.as-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.as-head strong{flex:1;font:600 13px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.as-avatar{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 80%,#fff),color-mix(in srgb,var(--accent) 30%,#000) 68%);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 45%,transparent)}
.as-avatar.is-busy{animation:as-pulse 1.1s ease-in-out infinite}
.as-icon{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;transition:color .15s,background .15s}
.as-icon:hover{color:var(--text);background:var(--card2)}
.as-icon.is-on{color:var(--accent)}
.as-messages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;padding:14px 12px;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.as-row{display:flex;animation:as-in .22s cubic-bezier(.2,.8,.2,1)}
.as-row.is-first{margin-top:10px}
.as-row.is-me{justify-content:flex-end}
.as-bubble{max-width:82%;padding:9px 13px;border-radius:19px;font:400 15px/1.4 var(--sans);color:var(--text);overflow-wrap:anywhere}
/* coins serrés côté colonne, comme une vraie messagerie : la série se lit comme un bloc */
.as-row.is-me .as-bubble{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 88%,#fff 4%),color-mix(in srgb,var(--accent) 70%,#000));color:#fff;box-shadow:0 6px 18px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.as-row.is-me:not(.is-first) .as-bubble{border-top-right-radius:6px}
.as-row.is-me:not(.is-last) .as-bubble{border-bottom-right-radius:6px}
.as-row.is-ai .as-bubble{background:color-mix(in srgb,var(--surface2,#14121a) 92%,#fff 3%);border:1px solid var(--border)}
.as-row.is-ai:not(.is-first) .as-bubble{border-top-left-radius:6px}
.as-row.is-ai:not(.is-last) .as-bubble{border-bottom-left-radius:6px}
.as-row.is-alert .as-bubble{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
.as-bubble p{margin:0;white-space:pre-wrap}
.as-bubble img{display:block;max-width:100%;max-height:240px;border-radius:12px;margin-bottom:6px}
.as-bubble pre{margin:6px 0;padding:9px;border-radius:9px;background:#0009;overflow-x:auto;font:12px/1.5 var(--mono)}
.as-file{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text2);margin-bottom:4px}
.as-step{display:block;font:11px/1.4 var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.as-center{align-self:center;max-width:none}
.as-error{margin:0;padding:7px 16px;font:12px/1.4 var(--sans);color:var(--red,#ff5a3c)}
.as-stage .as-error{padding:0;text-align:center}
.as-att{display:flex;align-items:center;gap:9px;padding:8px 14px;border-top:1px solid var(--border);font-size:12px;color:var(--text2)}
.as-att img{width:40px;height:40px;object-fit:cover;border-radius:8px}
.as-att span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-composer{display:flex;align-items:flex-end;gap:5px;padding:9px 10px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:color-mix(in srgb,var(--bg) 92%,#fff 2%)}
/* index.css impose min-height:80px, width:100% et un backdrop-filter à tout textarea : remis à plat ici */
.as-composer textarea{flex:1;width:auto;min-width:0;min-height:40px;height:auto;max-height:120px;backdrop-filter:none;-webkit-backdrop-filter:none;field-sizing:content;resize:none;box-sizing:border-box;padding:9px 14px;border:1px solid var(--border2);border-radius:20px;background:var(--surface);color:var(--text);font:400 16px/1.35 var(--sans);outline:none;transition:border-color .15s,box-shadow .15s}
.as-composer textarea:focus{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.as-composer .whisper-mic{border-radius:50%;width:36px;height:36px;border-color:transparent;background:none}
.as-composer .whisper-control small{left:auto;right:0}
.as-send{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border:0;border-radius:50%;background:var(--accent);color:#000;cursor:pointer;transition:transform .12s,opacity .15s}
.as-send:active{transform:scale(.92)}
.as-send svg{color:#000!important}
.as-send:disabled{opacity:.3;cursor:default}

/* ── Téléphone réel : le fil plein écran, la bulle en surimpression ── */
.as-page.is-mobile{display:block;height:calc(100dvh - 178px);padding:0}
.as-voice{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 85%,#fff),color-mix(in srgb,var(--accent) 35%,#000) 75%);color:#000;cursor:pointer;box-shadow:0 0 16px color-mix(in srgb,var(--accent) 40%,transparent)}
.as-voice svg{color:#000!important}
.as-overlay{position:fixed;inset:0;z-index:60;display:flex;background:color-mix(in srgb,var(--bg) 96%,transparent);animation:as-in .25s cubic-bezier(.2,.8,.2,1)}
.as-overlay .as-stage{flex:1}
.as-overlay .as-orb{--size:min(64vw,300px)}
.as-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:2;width:44px;height:44px}
@media(max-width:1100px) and (min-width:768px){.as-page{gap:20px}.as-phone{min-width:300px}}
@media(prefers-reduced-motion:reduce){.as-avatar,.as-row,.as-caption,.as-overlay,.as-state::before{animation:none!important}.as-orb-halo,.as-phone{transition:none!important}}
/* ── Animations du 05/10 : la sphere parle au telephone ───────────────────────
   Le flux est un canvas pose sur la page, transparent aux clics. Le telephone
   s'eclaire quand les particules l'atteignent, s'incline vers la souris
   (variables --prx/--pry, distinctes du tilt global des vitres) et entre en
   scene sur le ressort. `translate`/`scale` pour l'entree, `transform` pour
   l'inclinaison : les deux se composent sans se marcher dessus. */
.flux-particules{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.as-phone{transition:box-shadow .3s,transform .7s var(--ease-out);animation:as-telephone-entre .9s var(--ease-spring) .25s backwards}
.as-phone.is-incline{transform:perspective(1400px) rotateX(var(--prx,0deg)) rotateY(var(--pry,0deg))}
/* Starfield.css centre le telephone par translateY(-50%) (contexte CEO) : l'inclinaison s'y ajoute */
.context-ceo .as-page>.as-phone.is-incline{transform:translateY(-50%) perspective(1400px) rotateX(var(--prx,0deg)) rotateY(var(--pry,0deg))}
.as-phone.is-recoit{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,#2a2a31),0 0 0 3px #000,0 40px 90px -20px #000,0 0 120px color-mix(in srgb,var(--accent) 34%,transparent);transition:box-shadow .12s,transform .7s var(--ease-out)}
@keyframes as-telephone-entre{from{opacity:0;translate:0 60px;scale:.94}}
.as-avatar{scale:calc(1 + var(--lvl,0)*.28)}
/* l'attente : une mini-sphere qui bat avec la grande (--lvl) */
.as-attente{display:inline-flex;align-items:center;gap:9px;min-height:18px}
.as-mini-orbe{flex:none;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 60%,#fff),var(--accent) 45%,color-mix(in srgb,var(--accent) 35%,#000) 85%);box-shadow:0 0 calc(6px + var(--lvl,0)*20px) color-mix(in srgb,var(--accent) 70%,transparent);scale:calc(.8 + var(--lvl,0)*.75)}
.as-page.is-mobile .as-mini-orbe{animation:as-mini-bat 1.1s ease-in-out infinite}
@keyframes as-mini-bat{50%{scale:1.25;box-shadow:0 0 16px color-mix(in srgb,var(--accent) 70%,transparent)}}
/* la reponse se materialise : chaque mot nouveau passe du flou au net. Le texte
   de la bulle ne depend pas de --lvl (ecrit a chaque image) : on l'en isole. */
.as-bubble > div{--lvl:0}
.as-bubble .mot{animation:as-mot-nait .5s var(--ease-out) backwards}
@keyframes as-mot-nait{from{opacity:0;filter:blur(7px)}}
@media(prefers-reduced-motion:reduce){.as-phone,.as-bubble .mot,.as-mini-orbe{animation:none!important}.as-phone{transform:none}}
.chatia-page{display:flex!important;gap:20px;height:calc(100dvh - 48px);min-height:520px;padding-bottom:0!important;color:var(--text);overflow:hidden}.chatia-sidebar{width:245px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--glass-border);padding-right:18px;gap:18px}.chatia-page button,.chatia-page select,.chatia-page textarea{font:inherit}.chatia-page button{cursor:pointer}.chatia-page button:disabled{cursor:default;opacity:.45}.chatia-page button:focus-visible,.chatia-page select:focus-visible,.chatia-page textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.chatia-new{display:flex;align-items:center;gap:9px;border:1px solid var(--glass-border);border-radius:12px;padding:13px;background:var(--glass);color:var(--fg-strong);font-size:13px!important}.chatia-label{font:10px var(--mono);letter-spacing:.1em;color:var(--muted);margin-top:12px}.chatia-sidebar nav{display:flex;flex-direction:column;gap:5px;overflow:auto;flex:1}.chatia-sidebar nav button{display:flex;gap:10px;text-align:left;align-items:center;background:transparent;border:0;border-radius:9px;padding:11px;color:var(--muted);font-size:13px}.chatia-sidebar nav button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatia-sidebar nav button svg{flex-shrink:0}.chatia-sidebar nav button[aria-current],.chatia-sidebar nav button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--fg-strong)}.chatia-circuit{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);padding:15px 3px}.chatia-main{min-width:0;flex:1;display:flex;flex-direction:column}.chatia-header{display:flex;align-items:center;gap:15px;padding:0 0 18px;border-bottom:1px solid var(--glass-border)}.chatia-header h1{font-size:23px;margin:0;color:var(--fg-strong);letter-spacing:-.6px}.chatia-header p{margin:4px 0 0;font-size:12px;color:var(--muted)}.chatia-header label{margin-left:auto;min-width:0;max-width:52%}.chatia-header select{width:100%;max-width:300px;background:var(--bg);color:var(--text);border:1px solid var(--glass-border);padding:10px;border-radius:10px;font-size:12px}.chatia-icon{background:none;border:0;color:var(--muted);padding:8px}.chatia-scroll{flex:1;overflow:auto;min-height:0;overscroll-behavior:contain}.chatia-welcome{max-width:650px;margin:clamp(35px,10vh,110px) auto 40px;text-align:center;padding:20px}.chatia-orb{width:65px;height:65px;margin:auto;display:grid;place-items:center;border-radius:22px;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);background:radial-gradient(circle at top,color-mix(in srgb,var(--accent) 15%,transparent),transparent)}.chatia-welcome h2{font-size:34px;font-weight:550;letter-spacing:-1px;margin:25px 0 12px;color:var(--fg-strong)}.chatia-welcome p{font-size:14px;line-height:1.8;color:var(--muted)}.chatia-suggestions{display:flex;gap:10px;margin-top:30px}.chatia-suggestions button{flex:1;background:transparent;border:1px solid var(--glass-border);border-radius:13px;text-align:left;color:var(--text2);font-size:12px;padding:16px;line-height:1.6}.chatia-suggestions button:hover{border-color:var(--accent)}.chatia-messages{max-width:800px;margin:auto;padding:24px 20px}.chatia-message{margin:0 0 30px;overflow-wrap:anywhere}.chatia-user{max-width:85%;margin-left:auto;background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid var(--glass-border);border-radius:17px;padding:15px 19px}.chatia-author{color:var(--muted);font:11px var(--mono);margin-bottom:10px;display:flex;gap:10px}.chatia-author span{opacity:.7}.chatia-content p{white-space:pre-wrap;line-height:1.7;margin:0;font-size:15px}.chatia-content pre{white-space:pre;overflow:auto;background:var(--bg);border:1px solid var(--glass-border);padding:18px;border-radius:12px;font-size:12px;line-height:1.7}.chatia-actions{display:flex;gap:15px;align-items:center;margin-top:12px;color:var(--muted)}.chatia-actions button{display:flex;align-items:center;gap:6px;background:none;border:0;color:inherit;font-size:11px;padding:4px}.chatia-thinking,.chatia-hint{color:var(--muted);font-size:12px;line-height:1.6}.chatia-footer{width:100%;max-width:840px;margin:0 auto;padding:10px 20px 0}.chatia-footer form{position:relative;border:1px solid var(--glass-border);border-radius:18px;background:color-mix(in srgb,var(--bg) 90%,transparent);padding:14px 60px 12px 17px}.chatia-footer textarea{display:block;resize:vertical;min-height:63px;max-height:180px;width:100%;background:none;border:0;color:var(--fg-strong);font-size:14px;line-height:1.6;outline-offset:5px}.chatia-send{position:absolute;bottom:14px;right:14px;width:36px;height:36px;border:0;border-radius:11px;background:var(--accent);color:white;display:grid;place-items:center}.chatia-footnote{font-size:10px;line-height:1.7;text-align:center;color:var(--muted);margin:10px 0}.chatia-footnote a{color:inherit;text-decoration:underline}.chatia-error{border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);color:var(--text);padding:10px 14px;border-radius:10px;font-size:12px;margin-bottom:10px}.chatia-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:800px){.chatia-page{flex-direction:column;gap:12px;height:calc(100dvh - 90px);min-height:480px}.chatia-sidebar{width:100%;border:0;padding:0;gap:8px;flex-shrink:0}.chatia-sidebar nav{flex-direction:row;max-height:45px}.chatia-sidebar nav button{max-width:170px;flex-shrink:0}.chatia-label,.chatia-circuit{display:none}.chatia-new{padding:9px;width:fit-content}.chatia-header{padding-bottom:12px}.chatia-header h1{font-size:20px}.chatia-header p{display:none}.chatia-header label{max-width:65%}.chatia-welcome{margin:20px auto;padding:10px}.chatia-welcome h2{font-size:28px;margin:15px 0}.chatia-suggestions{flex-direction:column;gap:7px;margin-top:20px}.chatia-suggestions button{padding:10px}.chatia-messages{padding:20px 3px}.chatia-footer{padding:7px 0 0}.chatia-user{max-width:94%}}



/* Chat IA: focused conversation workspace, scoped to this route. */

.chatia-page{--chat-surface:color-mix(in srgb,var(--bg) 94%,var(--text) 6%);--chat-line:color-mix(in srgb,var(--text) 12%,transparent);--muted:color-mix(in srgb,var(--text) 64%,var(--bg));gap:0;width:100%;max-width:none!important;height:calc(100dvh - 26px);min-height:0;margin:0!important;padding:0!important;background:var(--bg);position:relative;font-family:var(--sans)}

.chatia-page>*{animation:none!important;box-sizing:border-box}.chatia-sidebar{width:260px;background:var(--chat-surface);border-right:1px solid var(--chat-line);padding:24px 14px 16px}.chatia-collapsed .chatia-sidebar{display:none}.chatia-new{background:var(--bg);border-color:var(--chat-line);color:var(--text)}.chatia-search{display:flex;align-items:center;gap:9px;padding:0 10px;color:var(--muted)}.chatia-search input{font:inherit;min-width:0;width:100%;background:none;border:0;color:var(--text);font-size:13px;padding:6px 0}.chatia-label{padding:0 10px}.chatia-sidebar nav button[aria-current]{border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);background:color-mix(in srgb,var(--accent) 10%,var(--bg))}.chatia-circuit{padding:15px 10px;border-top:1px solid var(--chat-line)}

.chatia-header{padding:19px 28px;min-height:78px;border-bottom:1px solid var(--chat-line)}.chatia-header>div{min-width:0}.chatia-header h1{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}.chatia-header p{font-size:11px}.chatia-header-actions{margin-left:auto;display:flex;gap:5px}.chatia-icon{display:grid;place-items:center;border-radius:8px}.chatia-icon:hover{background:var(--chat-surface)}

.chatia-scroll{scrollbar-width:thin;scrollbar-color:var(--chat-line) transparent}.chatia-welcome{max-width:740px;margin:clamp(35px,12vh,160px) auto 40px;padding:24px}.chatia-welcome h2{font-family:var(--sans)}.chatia-suggestions button{background:var(--chat-surface);border-color:var(--chat-line);font-size:13px;color:var(--text)}.chatia-messages{max-width:810px;padding:38px 28px 12px}.chatia-message{margin-bottom:36px}.chatia-user{width:fit-content;background:var(--chat-surface);border-color:var(--chat-line);border-radius:20px 20px 5px 20px;padding:14px 20px}.chatia-user .chatia-author{display:none}.chatia-author{color:var(--text);font:600 13px var(--sans);margin-bottom:16px;align-items:center;gap:9px}.chatia-avatar{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 12%,var(--bg));color:var(--accent)}.chatia-author .chatia-model-info{font-size:10px;font-weight:400;color:var(--muted);margin-left:auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatia-content p{line-height:1.85}.chatia-content pre{background:var(--chat-surface);border-color:var(--chat-line);font-size:13px}.chatia-actions button:hover{background:var(--chat-surface)}

.chatia-footer{box-sizing:border-box;max-width:850px;padding:14px 28px 12px}.chatia-footer form{border:1px solid var(--chat-line);border-radius:20px;background:var(--chat-surface);padding:17px 16px 12px;box-shadow:0 8px 35px #0002}.chatia-footer form:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,var(--chat-line))}.chatia-footer textarea{box-sizing:border-box;resize:none;min-height:58px;font-size:15px;line-height:1.7;padding:0 3px}.chatia-footer textarea::placeholder,.chatia-search input::placeholder{color:var(--muted)}.chatia-composer-tools{display:flex;align-items:center;gap:12px;margin-top:10px}.chatia-composer-tools>a{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;white-space:nowrap}.chatia-composer-tools label{margin-left:auto;min-width:0;max-width:60%}.chatia-composer-tools select{max-width:100%;background:var(--chat-surface);color:var(--text);border:0;padding:8px 4px;font-size:12px;cursor:pointer}.chatia-send{position:static;flex-shrink:0;width:34px;height:34px;border-radius:50%}.chatia-page .chatia-send svg{color:#fff!important;stroke:#fff!important}.chatia-footnote{display:flex;justify-content:space-between;gap:12px;text-align:left;font-size:10px;margin:10px 2px 0}.chatia-search input:focus-visible{outline:2px solid var(--accent)}

@media(max-width:1000px){.chatia-sidebar{width:220px}.chatia-header{padding:16px}.chatia-footer{padding:12px 20px}}

@media(max-width:800px){.chatia-page{height:calc(100dvh - 90px);gap:0;min-height:0}.chatia-sidebar{width:100%;padding:10px 14px;gap:8px;border-right:0;border-bottom:1px solid var(--chat-line);max-height:145px}.chatia-sidebar nav{min-height:38px}.chatia-sidebar nav button{max-width:190px;padding:8px}.chatia-search,.chatia-sidebar>.chatia-hint{display:none}.chatia-main{min-height:0}.chatia-header{min-height:60px;padding:10px 14px}.chatia-header h1{max-width:55vw;font-size:14px}.chatia-welcome{margin:18px auto;padding:16px}.chatia-messages{padding:22px 18px 0}.chatia-footer{padding:9px 12px}.chatia-footnote{display:block;text-align:center}.chatia-footnote span{display:none}.chatia-composer-tools label{max-width:65%}.chatia-composer-tools>a{font-size:0}}





.chatia-workspace{background:var(--bg);position:relative}.chatia-mode{height:46px;box-sizing:border-box;display:flex;align-items:center;gap:5px;padding:7px 20px;border-bottom:1px solid var(--border);background:var(--bg)}.chatia-mode button{border:0;border-radius:7px;padding:7px 15px;background:none;color:var(--muted);font:12px var(--sans);cursor:pointer}.chatia-mode button[aria-selected=true]{background:color-mix(in srgb,var(--accent) 12%,var(--bg));color:var(--text)}.chatia-workspace .chatia-page{height:calc(100dvh - 26px)}.chatia-agent-page{flex-direction:column}.chatia-agent-page .chatia-header>a{margin-left:auto;font-size:12px;color:var(--accent)}.chatia-agent-body{flex:1;min-height:0;width:100%;max-width:850px;margin:0 auto;padding:20px 28px;box-sizing:border-box;overflow:auto}.chatia-agent-body>div{height:100%!important;min-height:0!important}.chatia-agent-body button[type=submit] svg{color:white!important}.chatia-workspace [hidden]{display:none!important}@media(max-width:800px){.chatia-workspace .chatia-page{height:calc(100dvh - 136px)}.chatia-agent-body{padding:12px}.chatia-mode{padding-left:12px}}





.whisper-control{position:relative;display:inline-flex;align-items:center;flex-shrink:0}.whisper-mic{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--accent);cursor:pointer}.whisper-mic.recording{background:var(--accent);color:white}.whisper-mic.recording svg{color:white!important}.whisper-control small{position:absolute;bottom:44px;left:0;z-index:10;width:180px;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:11px;line-height:1.5}.whisper-mic:disabled{opacity:.5}



.chatia-main{position:relative}.chatia-drop-overlay{position:absolute;inset:80px 20px 120px;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px dashed color-mix(in srgb,var(--accent) 80%,transparent);border-radius:20px;background:color-mix(in srgb,var(--bg) 88%,var(--accent) 12%);color:var(--text);pointer-events:none;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 8%,transparent),0 20px 60px #0008}.chatia-drop-overlay svg{color:var(--accent)}.chatia-drop-overlay strong{font-size:17px}.chatia-drop-overlay span{font-size:12px;color:var(--muted)}.chatia-attach-button{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--chat-line);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}.chatia-attach-button:hover{border-color:var(--accent);color:var(--accent)}.chatia-attachment-image{display:block;max-width:min(520px,85%);max-height:320px;border:1px solid var(--chat-line);border-radius:13px;margin:0 0 10px auto}.chatia-attachment-file,.chatia-attachment-video{display:flex;align-items:center;gap:9px;width:fit-content;max-width:85%;margin:0 0 10px auto;padding:10px 13px;border:1px solid var(--chat-line);border-radius:11px;background:var(--chat-surface);color:var(--text);font-size:12px}.chatia-attachment-file svg,.chatia-attachment-video svg{color:var(--accent);flex-shrink:0}.chatia-attachment-preview{position:relative;display:flex;align-items:center;gap:10px;border-top:1px solid var(--chat-line);padding:10px 0 7px;color:var(--muted);font-size:11px}.chatia-attachment-preview img{width:58px;height:58px;object-fit:cover;border-radius:9px;border:1px solid var(--chat-line)}.chatia-attachment-video{margin:0;max-width:280px}.chatia-attachment-preview>button{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--chat-line);border-radius:50%;background:var(--chat-surface);color:var(--muted);cursor:pointer}.chatia-attachment-preview>button:hover{color:var(--accent);border-color:var(--accent)}.chatia-attachment-preview small{margin-left:auto}@media(max-width:800px){.chatia-drop-overlay{inset:70px 10px 100px}.chatia-attachment-preview small{display:none}.chatia-attachment-image{max-width:94%}}



.chatia-shorts-page{display:block!important;overflow:auto;padding:28px!important}.shorts-panel{max-width:820px;margin:0 auto;padding:10px 0 40px}.shorts-header{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--chat-line);padding:0 0 20px}.shorts-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:13px;background:color-mix(in srgb,var(--accent) 10%,var(--bg));color:var(--accent)}.shorts-header h1{margin:0;font-size:22px}.shorts-header p{margin:5px 0 0;color:var(--muted);font-size:12px}.shorts-form{display:grid;gap:15px;padding:24px 0}.shorts-form label{display:grid;gap:7px;color:var(--muted);font-size:12px}.shorts-form input,.shorts-form textarea,.shorts-form select{font:inherit;color:var(--text);background:var(--chat-surface);border:1px solid var(--chat-line);border-radius:11px;padding:11px 13px;resize:vertical}.shorts-options{display:flex;align-items:end;gap:12px}.shorts-options label{flex:1}.shorts-submit,.shorts-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:10px;padding:11px 15px;background:color-mix(in srgb,var(--accent) 15%,var(--bg));color:var(--text);cursor:pointer}.shorts-submit:hover,.shorts-actions button:hover{background:color-mix(in srgb,var(--accent) 25%,var(--bg))}.shorts-notice{display:flex;align-items:center;gap:8px;padding:10px 12px;color:var(--text);font-size:12px;border:1px solid var(--chat-line);border-radius:10px}.shorts-active{padding:18px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:14px;background:var(--chat-surface)}.shorts-active>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.shorts-active>p{white-space:pre-wrap;line-height:1.6;color:var(--text);font-size:13px}.shorts-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}.status-complete{color:#8be28b}.status-failed{color:#ff7690}.shorts-actions{display:flex;gap:8px;flex-wrap:wrap}.shorts-history{margin-top:28px}.shorts-history h2{font-size:14px;color:var(--text);margin:0 0 10px}.shorts-job{display:flex;justify-content:space-between;gap:15px;width:100%;border:0;border-bottom:1px solid var(--chat-line);background:none;color:var(--text);padding:12px 2px;text-align:left}.shorts-job:hover{color:var(--accent)}.shorts-job span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shorts-job small{color:var(--muted);flex-shrink:0}@media(max-width:700px){.chatia-shorts-page{padding:18px!important}.shorts-options{align-items:stretch;flex-direction:column}.shorts-submit{width:100%}}



.chatia-live-dot{display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--accent);animation:chatia-pulse 1.2s ease-in-out infinite}

@keyframes chatia-pulse{0%,100%{opacity:.35}50%{opacity:1}}

.chatia-steps{display:flex;flex-direction:column;gap:3px;margin:0 0 8px;padding:9px 11px;border:1px solid var(--chat-line);border-radius:10px;background:var(--chat-surface)}

.chatia-step{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);white-space:pre-wrap;word-break:break-word}

.chatia-project{position:relative;margin-top:5px;max-width:100%}.chatia-project-current{display:flex;align-items:center;gap:6px;max-width:100%;padding:4px 9px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--chat-line));border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,var(--bg));color:var(--text);font-size:11px!important}.chatia-project-current span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatia-project-current svg{flex-shrink:0;color:var(--accent)}.chatia-project-current:hover{border-color:var(--accent)}

.chatia-project-menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:250px;max-height:min(420px,60vh);overflow:auto;margin:0;padding:6px;list-style:none;background:var(--bg);border:1px solid var(--chat-line);border-radius:12px;box-shadow:0 14px 40px #0008}.chatia-project-item{display:block;width:100%;text-align:left;border:0;border-radius:8px;padding:7px 12px;background:none;color:var(--text);font-size:12.5px!important;white-space:nowrap}.chatia-project-item:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}.chatia-project-item[aria-selected=true]{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--fg-strong);font-weight:600}.chatia-project-item.is-pause{color:var(--muted)}.chatia-project-item.is-archive{color:var(--muted);opacity:.5}



.chatia-steps{max-height:260px;overflow-y:auto}

.chatia-step.is-think{opacity:.55;font-style:italic}

.chatia-analysis{margin-top:10px;font-size:12px;color:var(--muted)}.chatia-analysis summary{cursor:pointer;width:fit-content}.chatia-content .chatia-analysis pre{white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto;margin:8px 0 0;padding:12px 14px;font-size:11px;line-height:1.6;color:var(--text2)}



/* thinking-orbs (22/09/2026) : l'orbe remplace l'icone et les phrases d'attente */

.chatia-welcome .chatia-orb{border:0;background:none;width:auto;height:auto}.chatia-thinking,.whisper-orb{display:inline-flex;align-items:center;vertical-align:middle}



/* A growing composer with one quiet outer frame. */

.chatia-footer form{border-radius:24px;padding:12px 14px;background:color-mix(in srgb,var(--bg) 94%,var(--accent));box-shadow:0 8px 28px #0003}

.chatia-footer form:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,var(--chat-line))}

.chatia-footer textarea{display:block;box-sizing:border-box;width:100%;min-height:48px;max-height:min(240px,35dvh);padding:10px 4px;line-height:1.5;resize:none;border:0!important;outline:none!important;box-shadow:none!important;background:transparent!important;overflow-x:hidden;overflow-wrap:anywhere;white-space:pre-wrap}

.chatia-footer{flex-shrink:0}.chatia-content{min-width:0;overflow-wrap:anywhere}

.chatia-main .chatia-header h1{text-transform:none}

.mobile-app .chatia-footer{padding:8px 12px 10px}.mobile-app .chatia-footer form{padding:8px 10px;border-radius:22px}.mobile-app .chatia-footer textarea{max-height:min(180px,30dvh)}

.mobile-app .chatia-footer .chatia-composer-tools{gap:6px}.mobile-app .chatia-footer .chatia-composer-tools>a{display:none}

.mobile-app .chatia-welcome{padding:20px 12px}.mobile-app .chatia-prompts{grid-template-columns:1fr}


.chatia-sidebar .chatia-thread-list{gap:2px;overflow-y:auto;overflow-x:hidden}.chatia-thread-list h2{font:600 11px var(--font);color:var(--muted);margin:18px 10px 7px;text-transform:none}
.chatia-thread-row{position:relative;display:flex;align-items:center;min-height:34px;border-radius:9px;flex-shrink:0}.chatia-thread-row:hover,.chatia-thread-row[data-active=true]{background:#ffffff0b}
.chatia-sidebar nav .chatia-thread-open{min-width:0;flex:1;border:0;background:none!important;padding:7px 8px;font-size:13px;line-height:20px;min-height:34px;height:34px}.chatia-thread-open>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatia-thread-menu{flex:none;margin-right:4px}.chatia-thread-menu summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:28px;height:28px;color:var(--muted)}.chatia-thread-menu summary::-webkit-details-marker{display:none}.chatia-thread-menu>div{position:absolute;right:5px;top:30px;z-index:50;padding:5px;width:154px;background:var(--surface2);border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 24px #0007}.chatia-thread-menu[open]{z-index:51}.chatia-sidebar nav .chatia-thread-menu button{width:100%;display:flex;gap:8px;align-items:center;border:0;padding:9px;background:none;font-size:12px;border-radius:7px}.chatia-thread-menu button:hover{background:#ffffff0c}
.chatia-usage-button{display:flex;align-items:center;gap:10px;padding:12px 8px;color:var(--text2);background:none;border:0;border-top:1px solid var(--border);font-size:13px}.chatia-mode-switch{display:flex;gap:4px}.chatia-mode-switch button{display:flex;align-items:center;gap:6px;border:0;border-radius:9px;background:none;color:var(--muted);padding:9px 13px;font-size:14px}.chatia-mode-switch button[aria-pressed=true]{background:#ffffff0d;color:var(--text)}.chatia-header-actions{margin-left:auto}.chatia-header{min-height:64px}
.chatia-code-caption{padding:8px 24px;font:11px var(--mono);color:var(--muted);display:flex;align-items:center;gap:8px}.chatia-code-mode .chatia-steps{background:#020408d9;border:1px solid var(--border);border-radius:10px;padding:12px;max-height:320px}.chatia-code-mode .chatia-step{font:12px/1.6 var(--mono);white-space:pre-wrap}.chatia-code-mode .chatia-content pre{border:1px solid var(--border);border-radius:12px;background:#03050ae8}.chatia-undo{display:flex;align-items:center;gap:10px;padding:8px 18px;font-size:12px}.chatia-undo button{border:0;background:none;color:var(--accent);cursor:pointer}
.chat-usage{width:min(780px,calc(100vw - 24px));max-height:85dvh;overflow:auto;padding:24px;color:var(--text);background:var(--surface);border:1px solid var(--border2);border-radius:22px;box-shadow:0 24px 90px #0009}.chat-usage::backdrop{background:#0009;backdrop-filter:blur(6px)}.chat-usage header{display:flex;justify-content:space-between;gap:12px}.chat-usage h2{margin:0;font-size:21px}.chat-usage p{color:var(--muted);font-size:12px;line-height:1.6}.chat-usage button{min-width:40px;min-height:40px;border:0;border-radius:9px;background:#ffffff08;color:var(--text)}.usage-controls{display:flex;align-items:center;justify-content:space-between;margin:20px 0}.usage-controls label{font-size:13px}.usage-controls select{margin-left:10px;background:var(--surface2);color:var(--text);padding:8px;border:1px solid var(--border);border-radius:8px}.usage-totals{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.usage-totals strong{display:block;font-size:25px}.usage-totals span{font-size:12px;color:var(--muted)}.usage-table{overflow-x:auto}.usage-table table{width:100%;border-collapse:collapse;font-size:12px}.usage-table th,.usage-table td{padding:12px 9px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}.usage-table th:first-child{text-align:left}
@media(max-width:767px){.chatia-sidebar nav .chatia-thread-open{height:44px;min-height:44px}.chatia-thread-menu summary{width:44px;height:44px}.chatia-thread-menu>div{top:40px}.chatia-mode-switch button{min-height:44px;padding:8px 12px}.chatia-header{gap:6px}.chat-usage{padding:18px}.chatia-code-caption{padding:7px 12px}.mobile-app .chatia-header-actions{gap:0}.mobile-app .chatia-sidebar{top:64px!important}}

.chatia-code-mode .chatia-composer-tools>label,.chatia-code-mode .chatia-composer-tools>a{display:none}

/* Conversation actions are portalled outside the clipped scrolling history. */
.chatia-sidebar nav .chatia-thread-menu-trigger{display:grid;place-items:center;flex:0 0 32px;min-width:32px;width:32px;height:32px;margin:0 3px 0 0;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted)}
.chatia-sidebar nav .chatia-thread-menu-trigger:hover,.chatia-sidebar nav .chatia-thread-menu-trigger[aria-expanded=true]{background:var(--chat-surface);color:var(--text)}
.chatia-conversation-actions{position:fixed;z-index:10000;width:192px;max-width:calc(100vw - 16px);padding:6px;box-sizing:border-box;border:1px solid var(--border2,var(--border));border-radius:12px;background:var(--surface2,var(--bg));box-shadow:0 12px 36px #0007;color:var(--text);isolation:isolate}
.chatia-conversation-actions button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:10px 12px;text-align:left;white-space:nowrap;font:13px var(--sans);color:var(--text);background:transparent;border:0;border-radius:7px;cursor:pointer}
.chatia-conversation-actions button:hover,.chatia-conversation-actions button:focus-visible{background:color-mix(in srgb,var(--accent) 16%,var(--bg));outline:none}
.chatia-conversation-actions button:disabled{opacity:.4;cursor:default}
.chatia-conversation-actions svg{flex-shrink:0;color:var(--accent)}
@media(max-width:767px){.chatia-sidebar nav .chatia-thread-menu-trigger{flex-basis:44px;width:44px;height:44px}.chatia-conversation-actions button{min-height:44px}}
/* Lecteur de musique ADROS (05/10/2026). Tout est prefixe lm- : le panneau est porte
   sur document.body, hors de .mobile-app et du rail, il ne doit rien heriter d'eux. */
.lm-bouton{display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;padding:0}
.lm-bouton img{width:100%;height:100%;object-fit:cover;border-radius:inherit;animation:lm-tourne 8s linear infinite}
.lm-rail{width:100%;height:32px;margin-bottom:4px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--muted)}
.lm-rail:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.lm-rail.lm-actif{color:var(--accent)}
.lm-rail.lm-actif img{width:22px;height:22px;border-radius:50%}
.lm-dock.lm-actif{color:white}
.lm-dock.lm-actif img{width:26px;height:26px;border-radius:50%}
@keyframes lm-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lm-bouton img{animation:none}}

.lm-fond{position:fixed;inset:0;z-index:2999}
.lm-panneau{position:fixed;z-index:3000;box-sizing:border-box;width:300px;max-width:calc(100vw - 24px);padding:10px;border-radius:18px;
  background:rgba(8,8,10,.94);border:1px solid var(--glass-border,#ffffff24);box-shadow:0 18px 50px #0008;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--text,#fff);font-family:var(--sans,inherit)}
.lm-panneau-dock{width:auto;max-width:none}
.lm-panneau ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow:auto}
.lm-panneau li button{width:100%;display:flex;align-items:center;gap:12px;padding:8px;min-height:52px;border:0;border-radius:12px;
  background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}
.lm-panneau li button:hover{background:#ffffff0d}
.lm-panneau li button.lm-courante{background:color-mix(in srgb,var(--accent,#b73753) 22%,transparent)}
.lm-panneau li img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none}
.lm-panneau li span{display:flex;flex-direction:column;min-width:0}
.lm-panneau li b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lm-panneau li small{font-size:12px;color:var(--muted,#9aa7b3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lm-erreur{margin:8px 8px 0;font-size:12px;color:var(--red,#ff5a6a)}
.lm-barre{position:relative;height:4px;margin:12px 8px 4px;border-radius:2px;background:#ffffff1f;cursor:pointer}
.lm-barre::before{content:"";position:absolute;inset:-10px 0}
.lm-barre i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--accent,#b73753)}
.lm-commandes{display:flex;align-items:center;justify-content:center;gap:18px;padding-top:6px}
.lm-commandes button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;
  background:transparent;color:inherit;cursor:pointer}
.lm-commandes button:hover{background:#ffffff12}
.lm-commandes .lm-principal{width:52px;height:52px;background:var(--accent,#b73753);color:white}
.lm-commandes .lm-principal:hover{background:var(--accent,#b73753);filter:brightness(1.12)}
/* Une regle globale d'ADROS peint les svg en couleur d'accent : sur le bouton
   principal (fond accent) l'icone devenait invisible. Blanc force ici. */
.lm-commandes .lm-principal svg{color:#fff!important;stroke:#fff!important}
.lm-commandes .lm-principal svg *{stroke:#fff!important}
.lm-volume{display:flex;align-items:center;gap:10px;padding:8px 8px 2px}
.lm-volume button{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;
  background:transparent;color:var(--muted,#9aa7b3);cursor:pointer}
.lm-volume button:hover{color:var(--text,#fff);background:#ffffff12}
.lm-volume input{flex:1;min-width:0;height:4px;accent-color:var(--accent,#b73753);cursor:pointer}
.lm-panneau button:focus-visible{outline:2px solid var(--accent,#b73753);outline-offset:2px}
/* Compteur reseau (20/10) : meme verre que les panneaux, chiffres qui roulent. */
.cr{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1;color:var(--text2)}
.cr-point{width:6px;height:6px;border-radius:50%;background:var(--green,#2fd47a);box-shadow:0 0 0 0 color-mix(in srgb,var(--green,#2fd47a) 60%,transparent);animation:cr-pouls 2s ease-out infinite;flex-shrink:0}
.cr-rouleau{display:inline-flex;overflow:hidden}
.cr-chiffre{display:inline-block;animation:cr-roule .45s cubic-bezier(.2,.9,.3,1.2)}
.cr-sep{display:inline-block;min-width:.28em}
.cr-unite{color:var(--muted);font-size:.78em;letter-spacing:.08em;text-transform:uppercase}
.cr-jour{color:var(--green,#2fd47a);font-size:.82em;font-weight:600}
.cr-pc{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface,#0b1018) 55%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cr-mobile{font-size:12px;font-weight:700}
.cr-bande{display:flex;justify-content:center;padding:6px 12px 2px}
.cr-bande:empty{display:none}
.cr-perime .cr-point{animation:none;background:var(--muted);box-shadow:none}
@keyframes cr-roule{from{transform:translateY(-70%);opacity:0}to{transform:none;opacity:1}}
@keyframes cr-pouls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green,#2fd47a) 55%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){.cr-chiffre,.cr-point{animation:none}}
.cr-coin{position:fixed;right:22px;bottom:20px;z-index:900;pointer-events:none}
.cr-coin-mobile{right:12px;bottom:calc(env(safe-area-inset-bottom) + var(--cr-dock,84px))}
.cr-coin-mobile .cr-pc{font-size:11px;padding:5px 10px}
html.adros-mobile-typing .cr-coin{display:none}
.mobile-app{height:var(--mobile-height,100dvh);display:flex;flex-direction:column;background:radial-gradient(ellipse at 100% 0,#10212c,transparent 55%),#03080c;color:var(--text);overflow:hidden;padding-top:env(safe-area-inset-top);box-sizing:border-box}
.mobile-app main{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.m-dock{flex:none;display:flex;align-items:center;margin:8px 12px calc(8px + env(safe-area-inset-bottom));padding:6px;border:1px solid #ffffff24;border-radius:25px;background:linear-gradient(145deg,#ffffff12,#ffffff04),#10151be8;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px #ffffff18,0 8px 30px #0005;gap:3px}
.m-dock a{flex:1;min-height:50px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;border-radius:19px;color:#9ca9b4;text-decoration:none;font-size:11px;font-weight:600}.m-dock a svg{width:20px;height:20px}.m-dock a.active{color:white;background:linear-gradient(160deg,#b73753,#571828);box-shadow:inset 0 1px #ffffff38}.m-dock button{background:none;border:0;color:#9ca9b4;min-width:44px;min-height:48px}
.mobile-app button:focus-visible,.mobile-app a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mobile-app input,.mobile-app textarea,.mobile-app select{font-size:16px!important}
.m-overview{padding:24px 18px 12px;max-width:600px;margin:auto}.m-overview header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.m-overview h1{font-size:25px;margin:0 0 5px}.m-overview time,.m-metric span,.m-empty{font-size:12px;color:#9aa7b3}.m-overview header button{border:1px solid #ffffff22;border-radius:50%;background:#ffffff08;color:var(--text);width:44px;height:44px}.m-metric{padding:20px 16px;margin-bottom:16px;background:#ffffff04;border:1px solid #ffffff12;border-radius:20px;overflow:hidden}.m-metric h2{font-size:15px;margin:0 0 16px}.m-metric h3{font-size:12px;color:#9aa7b3;margin:20px 0 8px}.m-metric strong{display:block;font-size:30px;line-height:1.3;font-variant-numeric:tabular-nums}.m-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.m-pair strong{font-size:26px}.m-accounts>div{display:flex;justify-content:space-between;gap:10px;padding-top:16px}.m-accounts b{font-size:12px}.m-accounts small{font-weight:400;color:#9aa7b3}
.mobile-app .as-page.is-mobile{height:100%!important;min-height:0;padding:0;background:transparent}.mobile-app .as-thread{height:100%;border-radius:0;background:transparent}.mobile-app .as-thread-head{padding:14px 18px}.mobile-app .as-composer{padding-bottom:8px}.mobile-app .as-icon{min-width:44px;min-height:44px}.mobile-app .as-messages{overscroll-behavior:contain}.m-voice{height:100%;display:flex;flex-direction:column}.m-voice>header{display:flex;align-items:center;gap:16px;padding:14px 18px}.m-voice>header button{min-height:44px;border:1px solid #ffffff22;border-radius:20px;padding:0 16px;background:none;color:var(--text)}.m-voice .as-stage{position:relative;inset:auto;transform:none;flex:1;width:100%;min-height:0;display:flex;flex-direction:column;justify-content:center}.m-voice .as-orb{width:240px!important;height:240px!important}.m-voice .as-caption{max-width:90%}
.mobile-app .chatia-workspace{height:100%}.mobile-app .chatia-workspace .chatia-page{height:100%;min-height:0;padding:0!important;margin:0;display:flex;position:relative;max-width:none}.mobile-app .chatia-main{min-width:0;width:100%;height:100%}.mobile-app .chatia-header{padding:12px;gap:8px}.mobile-app .chatia-icon{min-width:44px;min-height:44px}.mobile-app .chatia-sidebar{position:absolute!important;inset:64px 0 0!important;width:auto!important;z-index:20;background:#080e14;padding:18px;overflow:auto}.mobile-app .chatia-collapsed .chatia-sidebar{display:none!important}.mobile-app .chatia-header h1{font-size:17px}.mobile-app .chatia-circuit,.mobile-app .chatia-footnote,.mobile-app .chatia-composer-tools>a{display:none}.mobile-app .chatia-composer{padding:10px 12px}.mobile-app .chatia-composer textarea{min-height:50px;max-height:120px}.mobile-app .chatia-composer-tools{flex-wrap:wrap}.mobile-app .chatia-composer-tools label{min-width:0;flex:1}.mobile-app .chatia-composer-tools select{max-width:100%;width:100%;font-size:12px!important}.mobile-app .chatia-project-menu{min-width:220px;max-width:calc(100vw - 32px)}.mobile-app .chatia-content{overflow-wrap:anywhere}.mobile-app .chatia-content pre{overflow:auto;max-width:100%}
.mobile-app .chatia-send,.mobile-app .chatia-attach-button,.mobile-app .as-send,.mobile-app .as-voice{min-width:44px;min-height:44px}.mobile-app .as-head{padding:12px 16px}.mobile-app .m-overview h1{text-transform:none}

/* Mobile app viewport: only page content scrolls, never the document or dock. */
html.adros-mobile-locked,html.adros-mobile-locked body{position:fixed!important;inset:0;width:100%;height:100%;min-width:0!important;overflow:hidden!important;overscroll-behavior:none}
html.adros-mobile-locked #root{width:100%;height:100%;min-width:0;overflow:hidden}
.mobile-app.mobile-app{position:fixed!important;top:var(--mobile-top,0px);left:0;right:0;bottom:var(--mobile-bottom,0px);width:100%;max-width:100%;height:var(--mobile-height,auto);min-width:0;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;transform:none!important;animation:none!important;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.mobile-app *{box-sizing:border-box}
.mobile-app>main{width:100%;min-width:0;max-width:100%;min-height:0;overflow-x:hidden;overscroll-behavior:none;touch-action:pan-y pinch-zoom}
.mobile-app>main.m-screen-chat{overflow:hidden}
.mobile-app>main.m-screen-overview{overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-app>.m-dock{position:relative!important;inset:auto!important;min-width:0;width:auto;flex-shrink:0;z-index:30;margin:0;padding:6px 12px 6px;border-radius:0;border-width:1px 0 0;transform:none!important;animation:none!important}
.mobile-app .m-dock a{min-width:0;transform:none!important;transition:background .15s,color .15s}
.mobile-app .m-overview{width:100%;min-width:0;overflow-wrap:anywhere}
.mobile-app .m-overview header{gap:8px}.mobile-app .m-overview header>div{min-width:0;flex:1}.mobile-app .m-overview header button{flex-shrink:0}
.mobile-app .m-pair{grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-app .m-pair>div,.mobile-app .m-accounts>div>*{min-width:0}.mobile-app .m-accounts>div>b{flex-shrink:0}
.mobile-app .vitre-bloc,.mobile-app .card,.mobile-app .m-metric{transform:none!important;animation:none!important}
.mobile-app .chatia-main,.mobile-app .chatia-header>div,.mobile-app .chatia-footer,.mobile-app .as-thread{min-width:0;max-width:100%}
.mobile-app .chatia-messages,.mobile-app .as-messages{min-width:0;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y pinch-zoom;overflow-wrap:anywhere}

/* The navigation must not occupy space while composing on mobile. */
html.adros-mobile-typing .mobile-app>.m-dock{display:none!important}
html.adros-mobile-typing .mobile-app.mobile-app{grid-template-rows:minmax(0,1fr)}

/* One continuous mobile backdrop, including the iPhone status-bar safe area.
   Desktop workspace surfaces must not restart below the safe-area inset. */
.mobile-app .chatia-workspace,
.mobile-app .chatia-workspace .chatia-page,
.mobile-app .chatia-main,
.mobile-app .chatia-header{background:transparent}
.mobile-app .chatia-workspace .chatia-page{border-radius:0}
/* ═══ V14 (21/10) — interface facon « Dashboard V14 » de Code XR, recreee d'apres le reel.
   Verre et menus d'ADROS gardes. Hub YouTube : plus de menu a gauche, barre en haut a
   pastille qui glisse. Overview : panneaux en grille (heros orange, petites cartes,
   barres, tableau). Les couleurs viennent du theme (var(--accent)...). ═══ */

/* ── Hub YouTube : barre du haut, plus de console a gauche ── */
/* ContextNavigation.css cachait son panneau « Accueil, Carte... » quand la page avait
   la console .yt-navrail ; sans elle il revenait a gauche et poussait le contenu. */
.context-shell:has(.context-content .yt-v14){display:block}
.context-shell:has(.context-content .yt-v14)>.context-rail{display:none}
.yt-v14 .yt-head,.yt-v14 .yt-navrail{display:none!important}
.yt-v14{max-width:none!important;margin:0!important}
.yt-v14 .yt-shell{display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-content:stretch!important;max-width:1560px;margin:0 auto;padding:0 clamp(12px,2vw,28px)}
.yt-v14 .yt-content{grid-column:1!important;min-width:0}
/* meme largeur que l'ancien `.yt-content > .yt-rise > div` (index.css) */
.yt-content > .v14-page > div{max-width:1440px!important;margin-left:auto!important;margin-right:auto!important}
/* les onglets qui gardent leur propre .yt-rise : un fondu sur un ANCETRE des vitres coupe
   leur flou, et la cascade V14 fait deja l'entree */
.yt-v14 .yt-rise,.yt-v14 .yt-rise-2,.yt-v14 .yt-rise-3,.yt-v14 .yt-rise-4{animation:none!important}
.yt-v14 .yt-side{display:none!important}
/* z-index 40 : au-dessus de ce seuil lib/vitres.js n'en fait pas une vitre qui bascule */
.v14-barre{position:sticky;top:10px;z-index:40;display:flex;align-items:center;gap:10px;max-width:1560px;box-sizing:border-box;margin:86px auto 4px;width:calc(100% - 2*clamp(12px,2vw,28px));padding:7px;border:1px solid var(--glass-border);border-radius:18px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 44px rgba(0,0,0,.4)}
.v14-barre-source{flex-shrink:0;display:flex;align-items:center;padding:0 4px}
.v14-sep{width:1px;align-self:stretch;margin:4px 2px;background:var(--border);flex-shrink:0}

/* Pastille qui glisse (groupes et onglets) */
.v14-glissiere{position:relative;display:flex;align-items:center;gap:2px;min-width:0}
.v14-glissiere.v14-onglets{flex:1;overflow-x:auto;scrollbar-width:none}
.v14-glissiere.v14-onglets::-webkit-scrollbar{display:none}
.v14-glissiere :is(button,a){text-decoration:none;position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;flex-shrink:0;white-space:nowrap;border:0;background:transparent;cursor:pointer;color:var(--muted);transition:color var(--motion-ui,180ms) ease}
.v14-glissiere :is(button,a):hover{color:var(--text)}
.v14-glissiere :is(button[aria-pressed=true],a[data-actif=true]){color:var(--fg-strong)}
.v14-groupes button{padding:8px 13px;border-radius:12px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.v14-onglets :is(button,a){padding:8px 14px;border-radius:12px;font-family:var(--sans);font-size:13px;font-weight:600}
.v14-onglets :is(button[aria-pressed=true],a[data-actif=true]){font-weight:800}
.v14-pastille{position:absolute;left:0;top:0;z-index:0;border-radius:12px;pointer-events:none;background:linear-gradient(180deg,rgba(var(--theme-rgb),.46),rgba(var(--theme-rgb),.2));border:1px solid rgba(var(--theme-rgb),.55);box-shadow:0 0 18px rgba(var(--theme-rgb),.28),inset 0 1px 0 rgba(255,255,255,.35)}
.v14-pastille.is-pret{transition:transform var(--motion-morph,420ms) var(--ease-spring,ease),width var(--motion-morph,420ms) var(--ease-spring,ease),height var(--motion-morph,420ms) var(--ease-spring,ease)}
.v14-groupes .v14-pastille{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* ── En-tete de page ── */
.v14-entete{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:6px 0 20px}
.v14-surtitre{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.v14-titre{margin:0;text-transform:none;font-family:var(--display);font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1.02;color:var(--fg-strong)}
.v14-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── Cartes ── */
.v14-carte{position:relative;box-sizing:border-box;min-width:0;border:1px solid var(--glass-border);border-radius:22px;padding:18px 20px;background:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 50px rgba(0,0,0,.45);overflow:hidden}
.v14-entete-carte{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.v14-libelle{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.v14-mini .v14-moyen{white-space:nowrap}
.v14-titre-carte{font-family:var(--display);font-size:16px;font-weight:600;color:var(--fg-strong)}
.v14-compte{font-family:var(--mono);font-size:11px;color:var(--muted);padding:3px 9px;border:1px solid var(--border);border-radius:999px}
.v14-icone{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex-shrink:0;background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.v14-icone-clair{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35)}
.v14-gros{font-family:var(--sans);font-size:clamp(34px,3.4vw,50px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;margin:4px 0 10px}
.v14-moyen{font-family:var(--sans);font-size:clamp(22px,2vw,30px);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--fg-strong);font-variant-numeric:tabular-nums;margin:2px 0 10px}
.v14-delta{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid}
.v14-hausse{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent);border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.v14-baisse{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.v14-plat{color:var(--muted);border-color:var(--border)}
.v14-delta-clair{color:#fff!important;background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.4)!important}
.v14-hausse-txt{color:var(--green)}
.v14-baisse-txt{color:var(--red)}

/* grille de l'Overview : colonnes ECRITES une a une (index.css ecrase les repeat() en mobile) */
.v14-grille-haut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:14px;margin-bottom:14px;align-items:stretch}
.v14-mini-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media(max-width:1180px){.v14-grille-haut{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.v14-grille-haut>.v14-barres{grid-column:1 / -1}}

/* heros orange */
/* trois classes : le verre (.vitre-bloc.vitre-bloc, !important) impose sa face sinon */
.v14-carte.v14-hero.v14-hero{background:linear-gradient(145deg,var(--accent2) 0%,var(--accent) 48%,color-mix(in srgb,var(--accent) 70%,#000) 100%)!important;border-color:color-mix(in srgb,var(--accent) 40%,#fff)!important;box-shadow:0 22px 60px rgba(var(--theme-rgb),.32),inset 0 1px 0 rgba(255,255,255,.35)!important;display:flex;flex-direction:column}
.v14-hero .v14-libelle{color:rgba(255,255,255,.88)}
.v14-hero .v14-delta,.v14-barres .v14-delta{align-self:flex-start}
.v14-hero::after{content:"";position:absolute;inset:auto -30% -60% 30%;height:120%;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);pointer-events:none}
.v14-ligne-svg{display:block;width:100%;height:64px;margin:12px 0 10px}
/* 4000 px de tiret : plus long que toute courbe a l'ecran ; la derniere image rend le
   trait plein (dasharray:none) pour qu'aucune fin de courbe ne reste cachee */
.v14-trace{stroke-dasharray:4000;stroke-dashoffset:4000;animation:v14-trace 1.3s cubic-bezier(.22,1,.36,1) .25s forwards}
@keyframes v14-trace{99.9%{stroke-dasharray:4000;stroke-dashoffset:0}100%{stroke-dasharray:none;stroke-dashoffset:0}}
.v14-puces{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:auto}
/* contour en ombre et pas en bordure : une bordure en ferait une « vitre » (lib/vitres.js) */
.v14-puce{min-width:0;padding:9px 10px;border-radius:14px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);color:#fff;display:flex;flex-direction:column;gap:3px}
.v14-puce-nom{font-size:10.5px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v14-puce b{font-size:15px;font-weight:800;letter-spacing:-.02em}
.v14-puce-part{font-family:var(--mono);font-size:10px;opacity:.8}

/* barres */
.v14-barres{display:flex;flex-direction:column}
.v14-barres-svg{display:block;width:100%;height:auto;margin-top:auto;overflow:visible}
.v14-axe{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.v14-barre-j{transform-box:fill-box;transform-origin:50% 100%;animation:v14-pousse .8s var(--ease-spring,cubic-bezier(.3,1.25,.5,1)) backwards;animation-delay:calc(var(--i) * 32ms + 220ms)}
@keyframes v14-pousse{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* tableau des chaines */
.v14-table{margin-top:14px}
.v14-grille{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,1.6fr);gap:12px;align-items:center;padding:11px 8px;font-size:13px;color:var(--text2)}
.v14-grille-tete{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);padding-top:4px}
.v14-rangee{border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);border-radius:12px;transition:background var(--motion-fast,120ms) ease;animation:v14-rangee .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i) * 38ms + 260ms)}
.v14-rangee:last-child{border-bottom:0}
.v14-rangee:hover{background:rgba(255,255,255,.04)}
.v14-rangee b{color:var(--fg-strong);font-weight:800}
@keyframes v14-rangee{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.v14-nom{display:flex;align-items:center;gap:10px;min-width:0;color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v14-nom i{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 10px currentColor}
.v14-part{position:relative;display:flex;align-items:center;gap:10px}
.v14-part>span{display:block;height:7px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left;animation:v14-part .9s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i) * 38ms + 380ms)}
.v14-part em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted)}
@keyframes v14-part{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* panneau graphe : periodes dans l'en-tete */
.v14-graphe{margin-bottom:14px}

/* ── Global View (CommandCenter) ── */
/* sans la console .cc-navrail, ContextNavigation remettait son panneau a gauche */
.context-shell:has(.context-content .gv14){display:block}
.context-shell:has(.context-content .gv14)>.context-rail{display:none}
.gv14{max-width:1480px;margin:0 auto;padding:0 clamp(14px,2vw,30px) 48px}
.v14-barre-page{width:100%;margin:86px 0 6px}
.v14-lien.gv14-vues{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
/* le brief du matin peut faire 2 ecrans : on le borne, il defile dans sa carte */
.gv14-rang>div{max-height:340px;overflow:auto;scrollbar-width:thin}
.gv14-vues .num{font-family:var(--sans);font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--fg-strong);line-height:1}
.gv14-vues small{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gv14-haut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,.95fr);gap:14px;margin-bottom:14px;align-items:stretch}
.gv14-rang{margin-bottom:14px}
.gv14-revenus{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;margin-bottom:14px;align-items:stretch}
.gv14-business{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.gv14-trois{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.gv14-cerveau{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px}
.gv14-biz{padding:16px 18px}
@media(max-width:1250px){
 .gv14-haut{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .gv14-haut>:last-child{grid-column:1 / -1}
 .gv14-business{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
 .gv14-trois{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.v14-lien{display:block;min-width:0;color:inherit;text-decoration:none}
.v14-lien>.v14-carte{height:100%}
.v14-lien-texte{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}
.v14-hero{height:100%}
.v14-objectif{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#fff;font-size:12px;font-weight:600}
.v14-objectif-barre{flex:1;min-width:90px;height:7px;border-radius:99px;background:rgba(255,255,255,.24);overflow:hidden}
.v14-objectif-barre>span{display:block;height:100%;border-radius:inherit;background:#fff;transform-origin:left;animation:v14-part .9s cubic-bezier(.22,1,.36,1) .3s backwards}
.gv14-puce-choix{padding:5px 11px;border-radius:10px;cursor:pointer;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);background:transparent}
.gv14-puce-choix[aria-pressed=true]{color:var(--fg-strong);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 22%,transparent)}

/* ── Vague du changement de theme (View Transition) ── */
html.vt-theme::view-transition-old(root){animation:none}
html.vt-theme::view-transition-new(root){animation:v14-vague .75s cubic-bezier(.65,0,.35,1) both}
@keyframes v14-vague{from{clip-path:circle(0 at var(--vx,50%) var(--vy,50%))}to{clip-path:circle(150vmax at var(--vx,50%) var(--vy,50%))}}

@media(prefers-reduced-motion:reduce){.v14-trace{stroke-dasharray:none;stroke-dashoffset:0;animation:none}.v14-pastille.is-pret{transition:none}.v14-barre-j,.v14-rangee,.v14-part>span{animation:none}}
.brain-galaxy{position:relative;flex:1;min-height:480px;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#010305 0%,#020609 36%,var(--galaxy-edge,#08141e) 100%);color:#eff6fa;isolation:isolate;color-scheme:dark}



.brain-galaxy__canvas{position:absolute;inset:0}



.brain-galaxy__canvas canvas{display:block;touch-action:none}



.brain-galaxy__top{position:absolute;top:26px;left:30px;pointer-events:none}



.brain-galaxy__eyebrow{font:500 10px/1.5 var(--mono,monospace);letter-spacing:.2em;color:#899ba8}



.brain-galaxy__count{font-size:12px;margin-top:7px;color:#ced9e1}



.brain-galaxy__word{position:absolute;top:43%;font-size:clamp(25px,3.7vw,58px);font-weight:500;letter-spacing:-.065em;pointer-events:none;line-height:1.1}



.brain-galaxy__word--left{left:5%}.brain-galaxy__word--right{right:5%}



.brain-galaxy__bottom{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:min(640px,calc(100% - 36px));display:flex;flex-direction:column;align-items:center;gap:12px}



.brain-galaxy button{font:inherit;cursor:pointer;color:inherit}



.brain-galaxy button:focus-visible,.brain-galaxy input:focus-visible{outline:2px solid #cdeaff;outline-offset:4px}



.brain-galaxy__search{position:relative;width:min(390px,100%);display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(9,17,23,.85);border:1px solid #27343e;border-radius:30px;backdrop-filter:blur(12px);color:#9bacb9}



.brain-galaxy__search input{width:100%;border:0;background:transparent!important;color:#f0f6fa!important;outline:none;font-size:13px;box-shadow:none;padding:0}



.brain-galaxy__search input::placeholder{color:#9bacb9}



.brain-galaxy__results{position:absolute;bottom:calc(100% + 10px);left:0;right:0;max-height:240px;overflow:auto;background:#0a131c;border:1px solid #344451;border-radius:16px;padding:6px;box-shadow:0 10px 40px #0008}



.brain-galaxy__results button{display:flex;justify-content:space-between;align-items:center;text-align:left;gap:8px;width:100%;border:0;background:none;padding:12px;font-size:12px;border-radius:10px;line-height:1.5}



.brain-galaxy__results button:hover{background:#1a2a37}.brain-galaxy__results p{font-size:12px;padding:8px}



.brain-galaxy__controls{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;color:#acbcc8;font-size:11px}



.brain-galaxy__controls button{display:flex;align-items:center;gap:6px;background:none;border:0;padding:4px}



.brain-galaxy__controls button:hover{color:#fff}.brain-galaxy__controls label{display:flex;align-items:center;gap:6px;cursor:pointer}.brain-galaxy input[type=checkbox]{accent-color:#a7d2ef;width:12px;height:12px}



.brain-galaxy__hint{font-size:10px;color:#8799a6;text-align:center;margin:0;line-height:1.6}



.brain-galaxy__note{display:flex;align-items:center;gap:12px;max-width:100%;padding:10px 15px;background:#0b1722ed;border:1px solid #405668;border-radius:14px;font-size:12px!important}.brain-galaxy__note span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}



.brain-galaxy__error{position:absolute;top:25%;left:50%;transform:translateX(-50%);width:min(420px,85%);padding:20px;border:1px solid #405362;background:#0b1722f5;border-radius:16px;font-size:13px;text-align:center;line-height:1.6}.brain-galaxy__error button{display:block;margin:12px auto 0;background:#25394a;border:1px solid #577289;border-radius:8px;padding:6px 16px}



@media(max-width:650px){.brain-galaxy{min-height:520px}.brain-galaxy__top{left:18px;top:18px}.brain-galaxy__word{top:37%;font-size:28px}.brain-galaxy__word--left{left:6%}.brain-galaxy__word--right{right:6%}.brain-galaxy__controls{gap:9px;font-size:10px}.brain-galaxy__bottom{bottom:18px}.brain-galaxy__hint{max-width:280px}}







.brain-galaxy__labels{position:absolute;inset:0;pointer-events:none}



.brain-galaxy__label{position:absolute;max-width:195px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;padding:6px 10px;border:1px solid #456275aa;border-radius:7px;background:#08121be8;color:#c9e7fa!important;font-size:10px!important;text-align:left;box-shadow:0 2px 12px #0006}



.brain-galaxy__label.is-active{border-color:#a2d6f6;color:#fff!important;background:#182c3af2}



.brain-galaxy__label:hover{border-color:#fff}



.brain-galaxy__selection{width:min(430px,100%);background:#08121be8;border:1px solid #344b5d;border-radius:14px;padding:5px}



.brain-galaxy__selection .brain-galaxy__note{border:0;background:transparent;width:100%}



.brain-galaxy__selection summary{font-size:11px;color:#a6c7dd;cursor:pointer;padding:3px 12px 7px}



.brain-galaxy__related{max-height:140px;overflow:auto;padding:2px 6px}



.brain-galaxy__related button{width:100%;display:flex;justify-content:space-between;gap:6px;text-align:left;border:0;background:transparent;padding:8px 6px;font-size:11px;line-height:1.4}



.brain-galaxy__related button:hover{background:#193246}






/* Panneau superposé : le canvas conserve toute la largeur de la page. */


.brain-galaxy__bottom{left:auto;right:clamp(24px,3.8vw,72px);top:50%;bottom:auto;transform:translateY(-50%);width:270px;max-height:calc(100% - 120px);overflow:auto;align-items:stretch;gap:16px;padding:20px 16px;box-sizing:border-box;border:1px solid var(--glass-border,#ffffff20);border-radius:22px;background:linear-gradient(145deg,#ffffff05,transparent),#070c10d9;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #ffffff12,0 14px 38px #0005;z-index:8}


.brain-galaxy__panel-title{margin:0;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text)}


.brain-galaxy__search{display:grid;grid-template-columns:16px minmax(0,1fr);width:100%;box-sizing:border-box;border-radius:12px;padding:11px 10px;background:#02060988;border-color:var(--glass-border,#ffffff20);gap:8px}


.brain-galaxy__search input{min-width:0;font-size:12px}


.brain-galaxy__results{position:static;grid-column:1/-1;max-height:300px;margin-top:6px;padding:4px 0 0;border:0;border-top:1px solid #ffffff12;border-radius:0;background:none;box-shadow:none}


.brain-galaxy__results button{padding:11px 6px;white-space:normal;overflow-wrap:anywhere}.brain-galaxy__results button svg{flex:none;color:var(--accent)}.brain-galaxy__results button:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}


.brain-galaxy__controls{border-top:1px solid #ffffff12;padding-top:14px;justify-content:flex-start;gap:12px;font-size:11px}.brain-galaxy__controls label{width:100%}.brain-galaxy__controls button{padding:5px 2px}.brain-galaxy__selection{order:3;width:100%;box-sizing:border-box;background:transparent;border-color:#ffffff12}.brain-galaxy__note span{white-space:normal;text-align:left}


@media(max-width:1000px){.brain-galaxy__bottom{right:18px;width:230px;padding:16px 12px}}


@media(max-width:650px){.brain-galaxy__bottom{top:auto;bottom:16px;left:16px;right:16px;transform:none;width:auto;max-height:45%}.brain-galaxy__results{max-height:150px}.brain-galaxy__controls label{width:auto}}



/* Le classifieur verre ajoute vitre-bloc : son position:relative ne doit pas déplacer ce panneau. */
.brain-galaxy > .brain-galaxy__bottom.brain-galaxy__bottom{position:absolute;}
/* Automatisations (22/09/2026) : un état = une couleur, un chiffre = une tuile. Tons : ok (vert), warn (ambre), bad (rouge), live (bleu), idle (gris). */
.au-page{--ok:var(--green,#2dd4a0);--warn:var(--accent3,#ffb02d);--bad:var(--red,#ff5a3c);--live:#5b8def;--idle:var(--muted)}
.au-muted{color:var(--muted)}
.au-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 14px}
.au-top .au-link{margin-left:auto}
.au-link,.au-foot a{font:600 12px var(--sans);color:var(--accent);text-decoration:none}
.au-link:hover,.au-foot a:hover{text-decoration:underline}
.au-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:600 11.5px/1 var(--sans);letter-spacing:.02em;white-space:nowrap;border:1px solid transparent}
.au-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.au-pill.is-ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.au-pill.is-warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.au-pill.is-bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.au-pill.is-live{color:var(--live);background:color-mix(in srgb,var(--live) 12%,transparent);border-color:color-mix(in srgb,var(--live) 30%,transparent)}
.au-pill.is-live::before{animation:au-blink 1s ease-in-out infinite}
.au-pill.is-idle{color:var(--text2);background:var(--card2);border-color:var(--border)}
@keyframes au-blink{50%{opacity:.3}}
.au-alert{display:grid;gap:4px;margin:0 0 14px;padding:10px 14px;border-radius:12px;font:400 13px/1.45 var(--sans);color:var(--text)}
.au-alert.is-warn{background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);box-shadow:inset 3px 0 0 var(--warn)}
.au-alert.is-bad{background:color-mix(in srgb,var(--bad) 10%,transparent);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);box-shadow:inset 3px 0 0 var(--bad)}
.au-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px}
.au-card{position:relative;display:grid;gap:10px;padding:14px 16px 12px;border-radius:16px;background:var(--card);border:1px solid var(--border);overflow:hidden}
/* liseré de gauche à la couleur de l'état : lisible en un coup d'œil, même sans lire */
.au-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--idle)}
.au-card.is-ok::before{background:var(--ok)}.au-card.is-warn::before{background:var(--warn)}.au-card.is-bad::before{background:var(--bad)}.au-card.is-live::before{background:var(--live)}
.au-card.au-wide{margin-top:12px}
.au-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.au-head h2{margin:0;font:600 15px var(--sans);color:var(--text);letter-spacing:-.01em}
.au-proof{margin:0;font:400 12.5px/1.4 var(--sans);color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.au-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.au-stats div{display:grid;gap:2px;padding:8px 10px;border-radius:10px;background:var(--card2);border:1px solid var(--border)}
.au-stats b{font:700 18px/1 var(--display);color:var(--text);font-variant-numeric:tabular-nums}
.au-stats span{font:500 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-bar{height:3px;border-radius:2px;background:var(--border)}
.au-bar i{display:block;height:100%;border-radius:2px;background:var(--ok);transition:width .4s}
.au-card.is-warn .au-bar i{background:var(--warn)}.au-card.is-bad .au-bar i{background:var(--bad)}.au-card.is-idle .au-bar i{background:var(--text2)}
.au-foot{display:flex;align-items:center;gap:12px;font:500 11.5px var(--sans);color:var(--muted)}
.au-mono{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.au-history{margin-left:auto}
.au-history summary{cursor:pointer;color:var(--muted);font:500 11.5px var(--sans);list-style:none}
.au-history summary::after{content:' ▾';font-size:10px}
.au-history[open] summary::after{content:' ▴'}
.au-history[open]{margin-left:0;flex-basis:100%}
.au-run{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--border);font:400 12px var(--sans);color:var(--text2)}
.au-run small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-chips{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:768px){.au-stats b{font-size:16px}.au-top .au-link{margin-left:0}}
.cia-page{max-width:1480px;margin:auto;padding-bottom:48px}.cia-header{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:12px 0 16px}.cia-eyebrow,.cia-timestamp,.cia-metrics>div>span,.cia-panel-heading>span,.cia-node-top{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted)}.cia-header h1{font:700 clamp(30px,4vw,48px)/1.12 var(--display);letter-spacing:-.04em;color:var(--logo);margin:8px 0}.cia-header p{color:var(--text2);font-size:14px;margin:0}.cia-button{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--border2);border-radius:10px;background:var(--glass);color:var(--text);padding:10px 15px;font:500 12px var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap}.cia-button:disabled{opacity:.6;cursor:wait}.cia-button:focus-visible{outline:2px solid var(--logo);outline-offset:4px}.cia-timestamp{letter-spacing:0;margin-bottom:24px}.cia-metrics{display:grid;grid-template-columns:1.2fr 1fr 1fr;border-block:1px solid var(--border);margin-bottom:30px}.cia-metrics>div{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:23px 26px;border-right:1px solid var(--border)}.cia-metrics>div:first-child{padding-left:0}.cia-metrics>div:last-child{border-right:0}.cia-metrics strong{font:700 clamp(24px,3vw,36px) var(--display);letter-spacing:-.03em}.cia-metrics small{color:var(--text2);font-size:12px}.cia-panel{border:1px solid var(--border);border-radius:20px;background:var(--glass);padding:25px;min-width:0}.cia-panel-heading{display:flex;gap:10px;align-items:center;color:var(--logo);margin-bottom:25px;flex-wrap:wrap}.cia-panel-heading h2{font:600 15px var(--sans);color:var(--text);margin:0;flex:1}.cia-panel-heading>span{letter-spacing:.05em}.cia-primary{display:flex;align-items:center;gap:20px;padding:22px;border:1px solid var(--border2);border-radius:15px;background:color-mix(in srgb,var(--logo) 4%,transparent)}.cia-number{font:12px var(--mono);color:var(--muted)}.cia-primary-icon{color:var(--logo)}.cia-primary>div:nth-child(3){flex:1}.cia-primary h3,.cia-node h3,.cia-provider h3{font-size:15px;margin:0 0 7px;font-weight:600}.cia-primary p,.cia-caption,.cia-fact p{color:var(--text2);font-size:12px;line-height:1.65;margin:0}.cia-branch{display:flex;align-items:center;gap:12px;font:11px var(--mono);color:var(--muted);padding:21px 16px}.cia-branch span{width:1px;height:25px;background:var(--border2)}.cia-chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}.cia-node{position:relative;padding:16px;border:1px solid var(--border2);border-radius:12px;min-height:116px}.cia-node:first-child{border-color:var(--logo)}.cia-node-top{display:flex;justify-content:space-between;margin-bottom:18px;letter-spacing:0}.cia-node small{font-size:11px;color:var(--text2);line-height:1.5;display:block}.cia-node.cia-muted{opacity:.55}.cia-arrow{position:absolute;right:-21px;top:50%;color:var(--muted)}.cia-caption{margin-top:20px;font-size:11px}.cia-bottom{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;margin-top:22px}.cia-provider{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 0;border-bottom:1px solid var(--border)}.cia-provider:first-child{padding-top:0}.cia-provider small{color:var(--muted);font-size:12px}.cia-status{display:inline-flex;gap:7px;align-items:center;font:11px var(--mono);color:var(--muted);white-space:nowrap;letter-spacing:0}.cia-status i{height:6px;width:6px;border-radius:50%;background:currentColor}.cia-good{color:var(--green,#5ed99a)}.cia-warn{color:var(--amber,#ffb454)}.cia-fact+ .cia-fact{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}.cia-fact strong{font-size:12px}.cia-fact p{margin-top:6px}.cia-empty{font-size:13px;color:var(--muted);padding:18px 0}.cia-alert{padding:12px 16px;border:1px solid var(--amber,#ffb454);border-radius:10px;color:var(--text);font-size:13px;margin-bottom:15px}@media(max-width:1000px){.cia-chain{grid-template-columns:1fr 1fr}.cia-arrow{display:none}.cia-bottom{grid-template-columns:1fr}}@media(max-width:600px){.cia-header{align-items:flex-start;flex-direction:column;gap:16px}.cia-metrics{grid-template-columns:1fr}.cia-metrics>div,.cia-metrics>div:first-child{padding:18px 0;border-right:0;border-bottom:1px solid var(--border)}.cia-metrics>div:last-child{border-bottom:0}.cia-panel{padding:18px}.cia-primary{flex-wrap:wrap;padding:16px;gap:12px}.cia-primary .cia-button{width:100%}.cia-primary p{font-size:11px}.cia-chain{grid-template-columns:1fr}.cia-node{min-height:90px}.cia-provider{flex-wrap:wrap}.cia-branch{line-height:1.7;padding:16px 0}}
/* Schéma des autres workflows (22/09/2026). Couleur = machine, point = état. */
.wi{--on:var(--green,#2dd4a0);--pause:var(--accent3,#ffb02d);--off:var(--muted)}
.wi-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-bottom:6px}
.wi-head h2{margin:0;font:600 20px var(--sans);color:var(--text);letter-spacing:-.01em}
.wi-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font:500 11.5px var(--sans);color:var(--text2)}
.wi-key{display:inline-flex;align-items:center;gap:6px}
.wi-key::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted))}
.wi-key-group::before{border-radius:3px}
.wi-key.is-on::before{background:var(--on)}.wi-key.is-pause::before{background:var(--pause)}.wi-key.is-off::before{background:var(--off)}
.wi-when{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wi-svg{display:block;width:100%;height:auto;overflow:visible}
.wi-col{font:600 10.5px var(--mono);letter-spacing:.2em;fill:var(--muted);text-anchor:middle}
.wi-link{fill:none;stroke-width:1.4;stroke-opacity:.55;transition:stroke-opacity .2s}
.wi-link.is-pause{stroke-dasharray:5 5;stroke-opacity:.4}
.wi-link.is-off{stroke:var(--muted)!important;stroke-dasharray:2 5;stroke-opacity:.35}
.wi-link.is-dim{stroke-opacity:.06}
.wi-end circle{fill:var(--card2);stroke:var(--border2);stroke-width:1.2}
.wi-end text{font:500 13px var(--sans);fill:var(--text)}
.wi-end.is-dim{opacity:.25}
.wi-end,.wi-node,.wi-link{transition:opacity .2s,stroke-opacity .2s}
.wi-group > rect{fill:color-mix(in srgb,var(--c) 5%,transparent);stroke:color-mix(in srgb,var(--c) 30%,transparent);stroke-width:1}
.wi-glabel{font:700 10.5px var(--mono);letter-spacing:.18em;fill:var(--c)}
.wi-node{cursor:default;outline:none}
.wi-node > rect{fill:var(--card);stroke:var(--border);stroke-width:1}
.wi-node:hover > rect,.wi-node:focus-visible > rect{stroke:var(--c)}
.wi-node.is-dim{opacity:.3}
.wi-node .wi-dot{fill:var(--off)}
.wi-node.is-on .wi-dot{fill:var(--on);filter:drop-shadow(0 0 4px var(--on))}
.wi-node.is-pause .wi-dot{fill:var(--pause)}
.wi-name{font:500 12.5px var(--sans);fill:var(--text)}
.wi-node.is-off .wi-name{fill:var(--text2)}
.wi-time{font:500 10px var(--mono);letter-spacing:.04em;fill:var(--muted)}
@media(max-width:768px){.wi-svg{min-width:760px}.wi{overflow-x:auto}}
.pipelines-page{padding:28px;display:flex;flex-direction:column;gap:18px;height:100%;overflow:hidden}
.pipelines-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pipelines-header h1{margin:4px 0 0;font-size:22px}
.pipelines-back{color:var(--muted);font-size:12px;text-decoration:none}
.pipelines-back:hover{color:var(--accent)}
.pipelines-icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--chat-line);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;flex-shrink:0}
.pipelines-icon:hover{border-color:var(--accent);color:var(--accent)}

.pipelines-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.pipeline-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:1;border:1px solid var(--chat-line);border-radius:16px;background:var(--chat-surface);color:var(--text);text-decoration:none;font-size:13px}
.pipeline-tile:hover{border-color:var(--accent);color:var(--accent)}

.pipelines-add-form{display:flex;gap:8px}
.pipelines-add-form input{flex:1;font:inherit;color:var(--text);background:var(--chat-surface);border:1px solid var(--chat-line);border-radius:10px;padding:9px 12px}
.pipelines-add-form button{border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:10px;padding:9px 15px;background:color-mix(in srgb,var(--accent) 15%,var(--bg));color:var(--text);cursor:pointer}
.pipelines-add-form button:disabled{opacity:.5;cursor:default}
.pipelines-error{padding:8px 12px;border:1px solid #ff7690;border-radius:10px;color:#ff7690;font-size:12px}
.pipelines-hint{color:var(--muted);font-size:12px}

.pipelines-board{display:flex;gap:14px;overflow-x:auto;flex:1;min-height:0}
.pipelines-column{display:flex;flex-direction:column;min-width:220px;flex:1 0 220px;background:var(--chat-surface);border:1px solid var(--chat-line);border-radius:14px;overflow:hidden}
.pipelines-column-head{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;font-size:12px;font-weight:600;border-bottom:1px solid var(--chat-line);color:var(--text)}
.pipelines-count{color:var(--muted);font-size:11px}
.pipelines-column-body{display:flex;flex-direction:column;gap:8px;padding:10px;overflow-y:auto;flex:1}
.pipelines-empty{color:var(--muted);font-size:11px;text-align:center;margin:10px 0}

.pipelines-card{border:1px solid var(--chat-line);border-radius:11px;background:var(--bg);padding:10px 11px;display:flex;flex-direction:column;gap:8px}
.pipelines-card-title{font-size:12.5px;color:var(--text);word-break:break-word}
.pipelines-card-actions{display:flex;align-items:center;justify-content:space-between}
.pipelines-card-actions button{width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--chat-line);border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.pipelines-card-actions button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pipelines-card-actions button:disabled{opacity:.3;cursor:default}
.pipelines-card-remove:hover{border-color:#ff7690!important;color:#ff7690!important}

@media(max-width:700px){.pipelines-page{padding:16px}.pipelines-board{flex-direction:column;overflow-x:visible}.pipelines-column{min-width:0}}

.pipelines-page .pipeline-tile{align-items:flex-start;text-align:left;gap:14px;padding:24px;border:1px solid var(--border);border-radius:18px;background:var(--bg);min-height:145px;aspect-ratio:auto;transition:border-color .18s,background .18s}
.pipelines-page .pipeline-tile:hover{border-color:var(--accent);background:var(--glow)}
.pipelines-page .pipeline-tile small{font-size:11px;line-height:1.6;color:var(--muted)}
.pipelines-page .pipelines-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;overflow:auto;min-height:0}
@media(max-width:540px){.pipelines-page .pipelines-grid{grid-template-columns:1fr}}

.pipelines-grid[hidden]{display:none!important}
.pipelines-page:has(.workflow-tabs){overflow:auto}
.workflow-tabs{display:flex;gap:8px;flex-wrap:wrap}
.workflow-tabs button,.workflow-map-tools button,.workflow-map-tools a{border:1px solid var(--border2);border-radius:10px;background:var(--bg);padding:9px 14px;color:var(--text2);font:inherit;font-size:13px;text-decoration:none;cursor:pointer}
.workflow-tabs button[aria-pressed=true]{border-color:var(--accent);background:var(--glow);color:var(--text)}
.workflow-map-wrap{background:var(--bg);min-height:580px;flex:1}
.workflow-map-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.workflow-map-tools span{font-size:12px;color:var(--muted)}
.workflow-map{position:relative;height:580px;--cs-marge-haut:10px;--cs-marge-bas:10px}
.workflow-map .cs-ordre,.workflow-map .cs-file{display:none!important}
.workflow-map .cs-p-n2>.cs-nom{color:var(--text)}
@media(max-width:767px){.workflow-map{height:560px;min-width:760px}.workflow-map-wrap{overflow:auto}.workflow-map-tools{position:sticky;left:0}}

/* Full workspace: the map is the page, not a card over the global scenery. */
.page.pipelines-page{max-width:none;width:100%;margin:0;position:relative;z-index:1;background:var(--bg);min-height:100%;padding:28px 32px;box-sizing:border-box}
.pipelines-page:has(.workflow-tabs){gap:16px}
.pipelines-page:has(.workflow-map-wrap){height:100%;overflow:hidden}
.pipelines-page>.pipelines-header{min-height:46px;flex:none}
.pipelines-page>.pipelines-header h1{font-size:22px;letter-spacing:-.03em}
.workflow-tabs{flex:none;align-self:flex-start;padding:4px;gap:3px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}
.workflow-tabs button{border-color:transparent;border-radius:9px;padding:8px 14px;font-size:12px}
.workflow-tabs button[aria-pressed=true]{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.workflow-map-wrap{position:relative;display:flex;flex-direction:column;min-height:0;flex:1}
.workflow-map-tools{position:absolute;right:0;top:0;z-index:5;gap:8px}
.workflow-map-tools button,.workflow-map-tools a{font-size:12px;padding:8px 12px;border-radius:9px}
.workflow-map{height:auto;min-height:0;flex:1;width:100%;--cs-marge-haut:42px;--cs-marge-bas:10px}
.workflow-map .cs-p-n2>.cs-nom{font-weight:500;font-size:14px}
.workflow-map .cs-point>.cs-orbe{border-color:color-mix(in srgb,var(--text) 65%,transparent)}
.workflow-map .cs-l-rayon{stroke-width:1.35}
.pipelines-page:has(.workflow-map-wrap)>*{animation:none}
@media(max-width:767px){
 .page.pipelines-page:has(.workflow-map-wrap){height:calc(100dvh - 70px);min-height:620px}
 .workflow-tabs{max-width:100%;flex-wrap:nowrap;overflow-x:auto;align-self:stretch}
 .workflow-tabs button{white-space:nowrap;padding:8px 10px}
 .workflow-map-wrap{overflow-x:auto;overflow-y:hidden}
 .workflow-map{min-width:760px;min-height:440px}
 .workflow-map-tools{position:sticky;top:0;left:0;right:auto;align-self:flex-start;flex:none}
}

/* Tous les tableaux vidéo suivent un flux vertical. */
.pipelines-board{flex-direction:column;overflow-y:auto;overflow-x:hidden;gap:16px;padding:2px 8px 20px 30px;position:relative}
.pipelines-column{flex:none;min-width:0;width:100%;box-sizing:border-box;border:1px solid var(--border2);border-radius:16px;background:var(--surface);overflow:visible;position:relative}
.pipelines-column:not(:last-child)::after{content:'';position:absolute;left:-18px;top:38px;bottom:-50px;width:1px;background:color-mix(in srgb,var(--accent) 35%,transparent)}
.pipelines-column::before{content:'';position:absolute;left:-22px;top:27px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--glow)}
.pipelines-column-head{padding:16px 20px;gap:12px;border-bottom:1px solid var(--border);font-size:14px}
.pipeline-step-number{font:600 12px var(--mono);color:var(--accent)}
.pipeline-step-title{flex:1}.pipelines-count{padding:4px 9px;background:var(--glow);border-radius:7px;color:var(--text2)}
.pipeline-step-add{display:grid;place-items:center;width:30px;height:30px;background:transparent;border:1px solid var(--border2);border-radius:8px;color:var(--accent);cursor:pointer}
.pipelines-column-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px;padding:16px 20px;overflow:visible}
.pipelines-empty{text-align:left;margin:0;font-size:12px;color:var(--muted)}
.pipelines-card{border:1px solid var(--border2);padding:15px;background:var(--bg)}
.pipelines-card-actions{justify-content:flex-end;gap:8px}.pipelines-card-actions button{width:32px;height:32px}
.pipelines-add-form{flex-shrink:0;flex-wrap:wrap}.pipelines-add-form input{min-width:160px}.pipelines-add-form select{background:var(--bg);color:var(--text);border:1px solid var(--border2);border-radius:10px;padding:8px}
@media(max-width:700px){.pipelines-board{overflow-y:auto;overflow-x:hidden;padding-left:24px}.pipelines-column-head,.pipelines-column-body{padding:12px}.pipelines-column:not(:last-child)::after{left:-15px}.pipelines-column::before{left:-19px}}

/* Navigation persistante, y compris dans chaque workflow. */
.workflow-tabs a{display:flex;align-items:center;min-height:36px;box-sizing:border-box;padding:10px 12px;color:var(--text2);font:500 12.5px var(--sans);text-decoration:none;border:1px solid transparent;border-radius:9px}
.workflow-tabs a:hover{color:var(--text);background:var(--glow)}
.workflow-tabs a[aria-current=page]{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 48%,#171013),color-mix(in srgb,var(--accent) 28%,#171013));border-color:color-mix(in srgb,var(--accent) 60%,transparent);color:var(--text);box-shadow:inset 0 1px 0 #ffffff26,0 4px 18px var(--glow);font-weight:800}
.workflow-tabs a:focus-visible,.pipeline-step-title:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.workflow-nav-divider{height:1px;background:var(--border);margin:8px 0;flex:none}
.page.workflow-detail-page{overflow:hidden!important}
.workflow-detail-page>.pipelines-header,.workflow-detail-page>.pipelines-add-form,.workflow-detail-page>.pipelines-error,.workflow-detail-page>.pipelines-board{width:100%;max-width:920px;box-sizing:border-box;margin-left:auto;margin-right:auto}
.pipeline-step-title{display:flex;align-items:center;justify-content:space-between;gap:12px;align-self:stretch;text-align:left;border:0;background:transparent;color:var(--text);font:600 14px var(--sans);cursor:pointer;padding:0}
.pipeline-step-title[aria-expanded=true] svg{transform:rotate(180deg)}
.pipeline-step-detail{padding:0 20px 12px;border-bottom:1px solid var(--border)}
.pipeline-step-detail dl{display:grid;gap:9px;margin:12px 0 0}.pipeline-step-detail dl>div{display:grid;grid-template-columns:94px 1fr;gap:12px;font-size:12px;line-height:1.5}.pipeline-step-detail dt{color:var(--muted)}.pipeline-step-detail dd{margin:0;color:var(--text2)}
@media(min-width:1024px){.pipelines-page>.workflow-tabs.section-side-menu{top:50%!important;transform:translateY(-50%)!important;animation:none!important;max-height:calc(100% - 120px)!important}}
@media(max-width:1023px){.workflow-tabs a{white-space:nowrap;flex:none}.workflow-nav-divider{width:1px;height:28px;margin:4px 6px}.workflow-detail-page>.workflow-tabs{align-self:stretch;flex-shrink:0}}

/* Same floating rail placement as the reference consoles; outside document flow. */
@media(min-width:1024px){.pipelines-page>.workflow-tabs.section-side-menu{position:absolute!important;left:clamp(32px,4vw,72px)!important;top:50%!important;transform:translateY(-50%)!important;background:transparent!important;padding:13px 12px 11px!important;gap:3px!important}.page.pipelines-page:has(>.workflow-tabs){padding-left:300px!important}}

/* Workflow cockpit: original navigation, vertical pipeline, two information panels. */
.page.pipelines-page.workflow-detail-page:has(>.workflow-tabs){display:grid;grid-template-columns:240px minmax(0,1fr) 294px;gap:32px;padding:32px!important;height:100%;overflow:auto!important;align-items:start}
.workflow-detail-page>.workflow-tabs.section-side-menu{position:sticky!important;grid-column:1;top:calc(50vh - 110px)!important;left:auto!important;transform:none!important;width:208px!important;max-width:100%;margin:0 auto;flex-direction:column;max-height:calc(100vh - 80px)!important}
.workflow-main{grid-column:2;min-width:0;display:flex;flex-direction:column;gap:20px;width:100%;max-width:1240px;margin:0 auto}
.workflow-main .pipelines-header{min-height:52px}
.workflow-main .pipelines-header h1{color:var(--accent);font-size:28px;letter-spacing:-.03em}
.workflow-main .pipelines-board{overflow:visible;flex:none;padding:2px 2px 24px 26px}
.workflow-main .pipelines-column{background:transparent;transition:border-color .16s,box-shadow .16s}
.workflow-main .pipelines-column.is-selected{border-color:color-mix(in srgb,var(--accent) 65%,transparent);box-shadow:0 0 22px var(--glow)}
.workflow-main .pipeline-step-title svg{transform:rotate(-90deg)}
.workflow-main .pipeline-step-title[aria-pressed=true]{color:var(--accent)}
.workflow-insights{grid-column:3;position:sticky;top:32px;display:grid;gap:16px;min-width:0;margin-top:74px}
.workflow-info-card{position:relative;overflow:hidden;background:transparent;border:1px solid var(--glass-border);border-radius:16px;padding:14px 15px 12px;box-shadow:inset 0 1px 0 #ffffff14,0 14px 38px #00000073}
.workflow-info-card h2{display:flex;align-items:center;gap:8px;font:800 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.workflow-info-card h2::before{content:'◈';font-size:11px}.workflow-info-card h2::after{content:'';height:1px;background:var(--border);flex:1}
.workflow-info-card h3{margin:0 0 14px;font-size:17px;color:var(--text)}
.workflow-total{font-size:32px;font-weight:800;line-height:1.2}.workflow-total span{display:block;color:var(--muted);font:11px var(--sans);margin-top:4px}
.workflow-summary-counts{margin:16px 0;display:grid;gap:9px}.workflow-summary-counts>div{display:flex;justify-content:space-between;font-size:12px}.workflow-summary-counts dt{color:var(--muted)}.workflow-summary-counts dd{margin:0;font-weight:700}
.workflow-stage-shortcuts{display:flex;gap:4px}.workflow-stage-shortcuts button{flex:1;min-width:0;display:grid;gap:6px;background:transparent;border:1px solid var(--border);border-radius:7px;padding:7px 2px;color:var(--text2);cursor:pointer;font:10px var(--sans)}.workflow-stage-shortcuts button[aria-pressed=true]{border-color:var(--accent);background:var(--glow);color:var(--text)}
.workflow-step-facts{margin:0;display:grid;gap:14px}.workflow-step-facts dt{font:10px var(--mono);color:var(--muted);margin-bottom:5px}.workflow-step-facts dd{margin:0;font-size:12px;line-height:1.6;overflow-wrap:anywhere;color:var(--text2)}
.workflow-stage-shortcuts button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(min-width:1800px){.page.pipelines-page.workflow-detail-page:has(>.workflow-tabs){grid-template-columns:minmax(240px,1fr) minmax(0,1240px) minmax(294px,1fr)}.workflow-insights{width:274px;justify-self:center}}
@media(max-width:1199px){.page.pipelines-page.workflow-detail-page:has(>.workflow-tabs){grid-template-columns:208px minmax(0,1fr);gap:24px;padding:24px!important}.workflow-insights{grid-column:2;position:static;margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-main{grid-column:2}.workflow-detail-page>.workflow-tabs{grid-row:1 / span 2}}
@media(max-width:767px){.page.pipelines-page.workflow-detail-page:has(>.workflow-tabs){display:flex;gap:20px;padding:18px!important}.workflow-detail-page>.workflow-tabs.section-side-menu{position:relative!important;top:auto!important;left:auto!important;width:100%!important;flex-direction:row;flex-wrap:wrap;transform:none!important;margin:0;max-height:none!important}.workflow-insights{grid-template-columns:1fr;width:100%}.workflow-main .pipelines-header h1{font-size:23px}.workflow-main .pipelines-column-head{gap:8px}.workflow-main .pipelines-add-form input{min-width:0;width:100%;flex-basis:100%}}
.workflow-detail-page .workflow-insights{padding-bottom:24px}
@media(max-width:767px){.workflow-detail-page>.workflow-tabs.section-side-menu{flex-wrap:wrap!important}.workflow-detail-page>.workflow-tabs.section-side-menu>a,.workflow-detail-page>.workflow-tabs.section-side-menu>.nested-nav{width:auto;flex:1 1 45%;min-width:0}.workflow-detail-page>.workflow-tabs.section-side-menu .nested-nav-trigger{width:100%}}

/* Activity follows worker state, independently of the selected information panel. */
.pipeline-live-status{margin:-10px 0 0;font-size:11px;color:var(--muted)}
.pipeline-running-label{font-size:11px;color:#72edb0;white-space:nowrap}
.workflow-main .pipelines-column.is-running{border-color:#36d98a66;box-shadow:0 0 22px #28cc7810}
.pipelines-column.is-running::before{background:#72edb0;box-shadow:0 0 14px #36d98a}
.pipeline-energy{position:absolute;pointer-events:none;z-index:1;left:-20px;top:38px;bottom:-50px;width:5px;overflow:hidden;background:#36d98a30;border-radius:4px;box-shadow:0 0 10px #36d98a30}
.pipelines-column:last-child .pipeline-energy{bottom:16px}
.pipeline-energy>span{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0%,#36d98a80 15%,#afffd5 26%,transparent 30%);animation:pipeline-energy-down 1.8s linear infinite;transform:translateY(-30%)}
@keyframes pipeline-energy-down{to{transform:translateY(100%)}}
@media(max-width:700px){.pipeline-energy{left:-17px}.pipeline-running-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){.pipeline-energy>span{animation:none;transform:none;background:#72edb0}}

/* Cartes vivantes (10/10) : le mouvement est dans lib/cartesVivantes.js ; ici les etats.
   Couleur d'etat par data-teinte, le seul contour qui survit au verre (index.css). */
.pipelines-card{position:relative}
.carte-etat-lu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pipelines-card[data-etat=en-cours]{--teinte-bord:#36d98a55;--teinte-arete:#72edb0}
.pipelines-card[data-etat=bloquee]{--teinte-bord:#ff769070;--teinte-arete:#ff7690}
.pipelines-card[data-etat=bloquee] .pipelines-card-title{color:#ffb3c1}
.carte-progres{position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;overflow:hidden;background:#36d98a22;pointer-events:none}
.carte-progres>span{position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,transparent,#72edb0,transparent);animation:carte-balayage 1.7s var(--ease-out) infinite}
.carte-progres.is-mesure>span{width:calc(var(--progres) * 100%);background:#72edb0;box-shadow:0 0 8px #36d98a;animation:none;transition:width var(--motion-morph) var(--ease-spring)}
@keyframes carte-balayage{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
.pipelines-card.carte-en-vol{z-index:4}
.pipelines-card.carte-arrivee{animation:carte-arrivee 1.4s var(--ease-out)}
@keyframes carte-arrivee{from{box-shadow:0 0 0 1px #ffffffb3,0 0 26px #ffffff2e,0 22px 54px #00000094}to{box-shadow:0 0 0 1px #000000d1,0 22px 54px #00000094}}
.pipelines-card.carte-alerte,.pipelines-card.carte-arrivee.carte-alerte{animation:carte-alerte 1.1s var(--ease-out)}
@keyframes carte-alerte{0%,12%{box-shadow:0 0 0 2px #ff7690,0 0 34px #ff769080,0 22px 54px #00000094}to{box-shadow:0 0 0 1px #000000d1,0 22px 54px #00000094}}
@media(prefers-reduced-motion:reduce){.carte-progres>span{animation:none;transform:none;width:100%;background:#72edb0}}
/* carte-schema.css : Carte du système ADROS (v3 finale).
   Toutes les classes sont préfixées cs-, toutes les règles sont limitées à .cs-racine.
   Aucune règle hors du module, aucun flou d'arrière-plan, aucune police distante.
   Les couleurs viennent des variables de l'application ; valeurs de repli ci-dessous.
   Le conteneur de l'hôte ne reçoit que des variables : sa mise en page (position, taille, affichage, débordement)
   reste la sienne ; la grille est portée par le cadre interne .cs-cadre, qui occupe 100 % du conteneur
   (le conteneur doit donc avoir une hauteur définie). */

.cs-racine{
  --cs-a: var(--accent, #ff2d4d);
  --cs-a2: var(--accent2, #ff7a8a);
  --cs-c1: var(--c1, #ffd4db);
  --cs-c2: var(--c2, #ffaab8);
  --cs-c3: var(--c3, #ff8095);
  --cs-ok: var(--green, #2dd4a0);
  --cs-bloc: var(--accent3, #ffb02d);
  --cs-t: var(--text, #f8eef0);
  --cs-t2: var(--text2, rgba(248,238,240,.82));
  --cs-m: var(--muted, rgba(248,238,240,.55));
  --cs-bd: var(--border, #291720);
  --cs-bd2: var(--border2, #3a2230);
  --cs-fond: var(--bg, #0a0608);
  --cs-verre: var(--glass, rgba(30,17,22,.52));
  --cs-verre-b: var(--glass-border, rgba(255,255,255,.09));
  --cs-sans: var(--sans, Inter, system-ui, sans-serif);
  --cs-mono: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  /* blanc et ombre du module : dérivés du thème (texte, fond) ; seuls littéraux de couleur hors valeurs de repli */
  --cs-blanc: color-mix(in srgb, var(--cs-t) 20%, #fff);
  --cs-ombre: color-mix(in srgb, var(--cs-fond) 30%, #000);

  --cs-a03: color-mix(in srgb, var(--cs-a) 3%, transparent);
  --cs-a06: color-mix(in srgb, var(--cs-a) 6%, transparent);
  --cs-a08: color-mix(in srgb, var(--cs-a) 8%, transparent);
  --cs-a10: color-mix(in srgb, var(--cs-a) 10%, transparent);
  --cs-a14: color-mix(in srgb, var(--cs-a) 14%, transparent);
  --cs-a18: color-mix(in srgb, var(--cs-a) 18%, transparent);
  --cs-a24: color-mix(in srgb, var(--cs-a) 24%, transparent);
  --cs-a30: color-mix(in srgb, var(--cs-a) 30%, transparent);
  --cs-a40: color-mix(in srgb, var(--cs-a) 40%, transparent);
  --cs-a55: color-mix(in srgb, var(--cs-a) 55%, transparent);
  --cs-t04: color-mix(in srgb, var(--cs-t) 4%, transparent);
  --cs-t06: color-mix(in srgb, var(--cs-t) 6%, transparent);
  --cs-t10: color-mix(in srgb, var(--cs-t) 10%, transparent);
  --cs-t14: color-mix(in srgb, var(--cs-t) 14%, transparent);
  --cs-t20: color-mix(in srgb, var(--cs-t) 20%, transparent);
  --cs-t30: color-mix(in srgb, var(--cs-t) 30%, transparent);
  --cs-t40: color-mix(in srgb, var(--cs-t) 40%, transparent);
  --cs-b015: color-mix(in srgb, var(--cs-blanc) 1.5%, transparent);
  --cs-b04: color-mix(in srgb, var(--cs-blanc) 4%, transparent);
  /* reflets rosés (cœur des orbes, particules) : dérivés de --c1 du thème */
  --cs-reflet: color-mix(in srgb, var(--cs-c1) 45%, var(--cs-blanc));
  --cs-reflet-doux: color-mix(in srgb, var(--cs-c1) 55%, var(--cs-blanc));
  --cs-reflet-vif: color-mix(in srgb, var(--cs-c1) 30%, var(--cs-blanc));
  /* détourage couleur fond derrière chaque libellé : aucun trait ne se voit entre les lettres */
  --cs-detour: 0 0 1px var(--cs-fond), 0 0 2px var(--cs-fond), 0 0 3px var(--cs-fond), 0 0 5px var(--cs-fond), 0 0 9px var(--cs-fond);
}
.cs-racine .cs-cadre{
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--cs-t);
  font: 400 13px/1.35 var(--cs-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* remises à zéro sous :where() : elles ne pèsent pas plus qu'une classe du module */
.cs-racine :where(.cs-cadre, .cs-cadre *, .cs-cadre *::before, .cs-cadre *::after){ box-sizing: border-box; }
.cs-racine :where(.cs-cadre button){ font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.cs-racine :where(.cs-cadre) :focus-visible{ outline: 1px solid var(--cs-a2); outline-offset: 3px; border-radius: 6px; }

/* ───────── file « À toi » ───────── */
.cs-racine .cs-file{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 32px; padding: 0 8px; }
.cs-racine .cs-cle{ font: 500 11px/1 var(--cs-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cs-m); }
.cs-racine .cs-pilule{
  border: 1px solid var(--cs-bd2); border-radius: 999px; padding: 6px 15px;
  background: linear-gradient(180deg, var(--cs-a10), var(--cs-a03));
  color: var(--cs-t2); font-size: 12.5px; white-space: nowrap;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.cs-racine .cs-pilule:hover{ border-color: var(--cs-a); color: var(--cs-t); box-shadow: 0 0 22px var(--cs-a24); }

/* ───────── scène ───────── */
.cs-racine .cs-scene{
  position: relative; min-height: 0; overflow: hidden;
  border: 1px solid var(--cs-bd); border-radius: 24px;
  background:
    radial-gradient(120% 140% at 50% -10%, color-mix(in srgb, var(--cs-blanc) 2%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--cs-fond) 62%, transparent), color-mix(in srgb, var(--cs-fond) 34%, transparent));
  box-shadow: inset 0 1px 0 var(--cs-b04), 0 40px 90px -50px var(--cs-ombre);
}
.cs-racine .cs-vue{ position: absolute; inset: 0; }
.cs-racine .cs-liens{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.cs-racine .cs-voile{
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(125% 115% at 50% 47%, transparent 56%, color-mix(in srgb, var(--cs-fond) 36%, transparent) 88%, color-mix(in srgb, var(--cs-fond) 60%, transparent) 100%);
}
.cs-racine .cs-calque{ position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cs-racine .cs-calque > *{ pointer-events: auto; }

/* décor SVG : orbites, cadrans */
.cs-racine .cs-orbite{ fill: none; stroke: var(--cs-t06); stroke-width: 1; }
.cs-racine .cs-orbite-a{ fill: none; stroke: var(--cs-t14); stroke-width: 1; stroke-dasharray: 2 7; stroke-linecap: round; }
.cs-racine .cs-orbite-b{ fill: none; stroke: var(--cs-t10); stroke-width: 1; stroke-dasharray: 1 6; stroke-linecap: round; }
.cs-racine .cs-cadran line{ stroke: var(--cs-t10); stroke-width: 1; }
.cs-racine .cs-cadran line.cs-maj{ stroke: var(--cs-t20); }

/* liens : dégradé centré sur la source de lumière, neutre au loin */
.cs-racine .cs-l{ fill: none; stroke-linecap: round; transition: stroke .2s, stroke-opacity .2s, opacity .22s; }
.cs-racine .cs-l-rayon{ stroke-width: 1; }
.cs-racine .cs-l-faisceau{ stroke-width: 1.7; }
.cs-racine .cs-l-lueur{ stroke-width: 9; stroke-opacity: .05; }
.cs-racine .cs-l-branche{ stroke-width: 1.2; }
.cs-racine .cs-l-brin{ stroke-width: 1; }
.cs-racine .cs-l.cs-chaud{ stroke: var(--cs-a2); stroke-opacity: .95; }
.cs-racine .cs-l-lueur.cs-chaud{ stroke-opacity: .14; }
.cs-racine .cs-eclaire .cs-l:not(.cs-chaud){ opacity: .38; }

/* vie : trajet de l'agent jusqu'au cœur (seulement quand un agent est présent) */
.cs-racine .cs-flux{ fill: none; stroke: var(--cs-a2); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 8; stroke-opacity: .85; animation: cs-flux 2.4s linear infinite; }
/* comète de longueur réelle (36 px) quelle que soit la longueur du trajet (--L posé par le module) */
.cs-racine .cs-comete{ fill: none; stroke: var(--cs-c1); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 36px 100000px; stroke-dashoffset: 36px; animation: cs-comete 3.2s cubic-bezier(.45,.05,.55,.95) -1.2s infinite; }
@keyframes cs-flux{ to{ stroke-dashoffset: -100; } }
@keyframes cs-comete{ from{ stroke-dashoffset: 36px; } to{ stroke-dashoffset: calc(-1 * var(--L, 600px)); } }

/* ───────── nœuds ───────── */
.cs-racine .cs-noeud{ position: absolute; width: 0; height: 0; cursor: pointer; outline: none; --g: 9px; }
.cs-racine .cs-noeud.cs-inerte{ cursor: default; }
.cs-racine .cs-p-coeur{ z-index: 6; }
.cs-racine .cs-p-axe{ z-index: 5; }
.cs-racine .cs-p-ancre{ z-index: 5; }
.cs-racine .cs-p-n2, .cs-racine .cs-p-dedans{ z-index: 4; --g: 10px; }
.cs-racine .cs-p-socle{ z-index: 3; --g: 8px; }
.cs-racine .cs-p-n3, .cs-racine .cs-p-petit{ z-index: 2; --g: 8px; }
.cs-racine .cs-p-mini{ z-index: 2; --g: 7px; }

.cs-racine .cs-orbe{
  position: absolute; left: 0; top: 0; width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%;
  transition: transform .26s cubic-bezier(.3,1.35,.5,1), box-shadow .26s;
}
.cs-racine .cs-orbe > i{ position: absolute; border-radius: 50%; pointer-events: none; display: block; }

/* points (tout sauf les sources de lumière) : l'état se lit à la forme */
.cs-racine .cs-point > .cs-orbe{
  border: 1.2px solid var(--cs-t40);
  background: radial-gradient(circle at 50% 38%, var(--cs-t10), transparent 72%);
}
.cs-racine .cs-point.cs-s-ok > .cs-orbe{
  border-color: transparent;
  background: radial-gradient(circle at 40% 34%, color-mix(in srgb, var(--cs-ok) 60%, var(--cs-blanc)), color-mix(in srgb, var(--cs-ok) 78%, var(--cs-fond)) 60%, color-mix(in srgb, var(--cs-ok) 45%, var(--cs-fond)));
  box-shadow: 0 0 5px color-mix(in srgb, var(--cs-ok) 20%, transparent);
}
.cs-racine .cs-p-socle.cs-s-ok > .cs-orbe{ opacity: .8; box-shadow: none; }
/* dans une boîte, un nœud en bonne santé est un anneau à cœur vert : il ne domine pas les axes */
.cs-racine .cs-p-dedans.cs-s-ok > .cs-orbe{
  border: 1.2px solid color-mix(in srgb, var(--cs-ok) 55%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--cs-ok) 82%, var(--cs-blanc)) 0 23%, color-mix(in srgb, var(--cs-ok) 24%, transparent) 30%, transparent 68%);
  box-shadow: none;
}
.cs-racine .cs-point.cs-s-alerte > .cs-orbe{
  width: max(var(--d), 19px); height: max(var(--d), 19px);
  margin: calc(max(var(--d), 19px) / -2) 0 0 calc(max(var(--d), 19px) / -2);
  border: 1.5px solid var(--cs-a); background: var(--cs-a18);
  box-shadow: 0 0 12px var(--cs-a40);
}
.cs-racine .cs-o-marque{ display: grid !important; place-items: center; inset: 0; z-index: 2; font: 700 11px/1 var(--cs-mono); color: var(--cs-c1); }
.cs-racine .cs-o-marque::after{ content: '!'; }
.cs-racine .cs-o-double{ inset: -4.5px; border: 1px solid var(--cs-t14); }
.cs-racine .cs-o-guet{ inset: -7px; border: 1px dashed color-mix(in srgb, var(--cs-a2) 75%, transparent); }
.cs-racine .cs-source > .cs-orbe > .cs-o-guet{ inset: -12px; }
/* bloqué : arc ouvert autour de l'orbe, dans sa teinte propre (le rouge reste aux alertes) ; la santé reste dessous */
.cs-racine .cs-o-bloc{ inset: -4px; border: 1.8px solid var(--cs-bloc); border-right-color: transparent; transform: rotate(-38deg);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cs-bloc) 30%, transparent); }
.cs-racine .cs-bloque > .cs-orbe > .cs-o-guet{ inset: -8.5px; }
/* agent présent : anneau fin + halo */
.cs-racine .cs-point.cs-vivant > .cs-orbe{ box-shadow: 0 0 0 1px color-mix(in srgb, var(--cs-a2) 60%, transparent), 0 0 16px var(--cs-a55); }
/* état hors « actif » : estompé dans la vue générale */
.cs-racine .cs-v-carte .cs-noeud.cs-inactif{ opacity: .45; }

/* survol et focus */
.cs-racine .cs-noeud:hover > .cs-orbe, .cs-racine .cs-noeud:focus-visible > .cs-orbe{ transform: scale(1.2); }
.cs-racine .cs-source:hover > .cs-orbe, .cs-racine .cs-source:focus-visible > .cs-orbe{ transform: scale(1.05); }
.cs-racine .cs-inerte:hover > .cs-orbe{ transform: none; }
.cs-racine .cs-noeud:focus-visible > .cs-orbe{ outline: 1px solid var(--cs-a2); outline-offset: 5px; }
.cs-racine .cs-noeud:hover > .cs-nom, .cs-racine .cs-noeud.cs-vif > .cs-nom{ color: var(--cs-blanc); }

/* sources de lumière : cœur, axes, orbe d'arrivée ; l'état se lit au noyau */
.cs-racine .cs-noyau{
  left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 1.5px solid color-mix(in srgb, var(--cs-blanc) 86%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--cs-blanc) 30%, transparent), inset 0 0 6px color-mix(in srgb, var(--cs-blanc) 18%, transparent);
}
.cs-racine .cs-source.cs-s-ok > .cs-orbe > .cs-noyau{
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-color: transparent;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--cs-ok) 35%, var(--cs-blanc)), var(--cs-ok) 62%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cs-ok) 60%, transparent);
}
/* cœur : même noyau que les axes, plus grand (anneau creux = inconnu, point plein = ok) */
.cs-racine .cs-p-coeur > .cs-orbe > .cs-noyau{
  width: 20px; height: 20px; margin: -10px 0 0 -10px; border-width: 1.6px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-fond) 45%, transparent), 0 0 12px color-mix(in srgb, var(--cs-blanc) 35%, transparent), inset 0 0 6px color-mix(in srgb, var(--cs-blanc) 18%, transparent);
}
.cs-racine .cs-p-coeur.cs-s-ok > .cs-orbe > .cs-noyau{ width: 14px; height: 14px; margin: -7px 0 0 -7px; }
/* alerte d'une source : anneau rouge plein autour de l'orbe + noyau rouge plein portant un « ! » sombre */
.cs-racine .cs-source > .cs-orbe > .cs-o-marque{ inset: -6px; border: 1.6px solid var(--cs-a); box-shadow: 0 0 16px var(--cs-a40), inset 0 0 12px var(--cs-a24);
  font: 800 13px/1 var(--cs-mono); color: var(--cs-fond); }
.cs-racine .cs-source.cs-s-alerte:not(.cs-bloque) > .cs-orbe > .cs-noyau{
  width: 22px; height: 22px; margin: -11px 0 0 -11px; border-color: var(--cs-a); background: var(--cs-a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-fond) 50%, transparent), 0 0 14px var(--cs-a);
}
/* bloqué (source) : le noyau devient un arc ouvert dans la teinte « bloqué » ; en alerte, le « ! » reste lisible au centre */
.cs-racine .cs-source.cs-bloque > .cs-orbe > .cs-noyau{
  width: 18px; height: 18px; margin: -9px 0 0 -9px; background: color-mix(in srgb, var(--cs-fond) 62%, transparent);
  border: 2.4px solid var(--cs-bloc); border-right-color: transparent; transform: rotate(-38deg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-fond) 45%, transparent), 0 0 10px color-mix(in srgb, var(--cs-bloc) 40%, transparent);
}
.cs-racine .cs-p-coeur.cs-bloque > .cs-orbe > .cs-noyau{ width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.cs-racine .cs-source.cs-s-alerte.cs-bloque > .cs-orbe > .cs-o-marque{ color: var(--cs-c1); }

/* 22/09/2026 : plus de rond derrière la bulle de points, seule l'aura reste (les règles colorées par branche suivent plus bas) */
.cs-racine .cs-p-axe > .cs-orbe{ border: 0; background: none; box-shadow: 0 0 26px var(--cs-a18), 0 0 60px var(--cs-a08); }
.cs-racine .cs-p-axe > .cs-orbe > .cs-o-double{ display: none; }

.cs-racine .cs-p-coeur > .cs-orbe{ background: none; }
.cs-racine .cs-p-coeur > .cs-orbe > .cs-o-r1{ inset: 14%; border: 1px solid color-mix(in srgb, var(--cs-c1) 30%, transparent); box-shadow: inset 0 0 26px var(--cs-a18); }
.cs-racine .cs-p-coeur > .cs-orbe > .cs-o-r2{ inset: -10%; border: 1px solid var(--cs-a24); }
.cs-racine .cs-sphere{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* orbe de points (22/09/2026) : déborde un peu du rond, à la couleur de la branche (--cs-br posé par le module) */
.cs-racine .cs-orbe-pts{ position: absolute; inset: -18%; width: 136%; height: 136%; pointer-events: none; display: block; will-change: transform; contain: strict; }  /* calque propre : la bulle se repeint sans repeindre la carte */
/* aura de lumière à la couleur de la branche, derrière la bulle (22/09/2026) */
/* L'aura est un halo CENTRE derriere la sphere (::before), pas une ombre portee du cercle : une ombre laissait le centre
   sans lumiere, ce qui dessinait un disque noir autour de la sphere (Workflows, 22/09). */
.cs-racine .cs-p-axe > .cs-orbe, .cs-racine .cs-p-coeur > .cs-orbe, .cs-racine .cs-p-ancre > .cs-orbe{ box-shadow: none; }
.cs-racine .cs-p-axe > .cs-orbe::before, .cs-racine .cs-p-coeur > .cs-orbe::before, .cs-racine .cs-p-ancre > .cs-orbe::before{ content: ''; position: absolute; inset: -55%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--cs-br, var(--cs-a)) 42%, transparent) 0%, color-mix(in srgb, var(--cs-br, var(--cs-a)) 16%, transparent) 30%, color-mix(in srgb, var(--cs-br, var(--cs-a)) 4%, transparent) 52%, transparent 68%); }
.cs-racine .cs-p-coeur > .cs-orbe::before{ inset: -70%; }
.cs-racine .cs-orbe-pts{ z-index: 1; }
.cs-racine .cs-p-axe > .cs-nom{ text-shadow: var(--cs-detour), 0 0 20px color-mix(in srgb, var(--cs-br, var(--cs-a)) 45%, transparent); }
/* points et liens d'une branche : sa couleur ; la santé (vert, alerte) garde ses codes */
.cs-racine .cs-point[data-branche]:not(.cs-s-ok):not(.cs-s-alerte) > .cs-orbe{ border-color: color-mix(in srgb, var(--cs-br) 70%, transparent); background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cs-br) 22%, transparent), transparent 72%); }
.cs-racine .cs-l[data-branche]{ stroke: var(--cs-br); stroke-opacity: .34; }
.cs-racine .cs-l-brin[data-branche]{ stroke-opacity: .26; }
.cs-racine .cs-p-axe .cs-sphere{ opacity: .42; }
.cs-racine .cs-sphere .cs-pt-c{ fill: var(--cs-reflet-vif); }
.cs-racine .cs-sphere .cs-pt-a{ fill: var(--cs-c3); }

.cs-racine .cs-p-ancre > .cs-orbe{ background: none; box-shadow: none; }

/* axe dans une boîte (boîte du cœur) : orbe rosé à noyau d'état, plus grand que le socle */
.cs-racine .cs-point.cs-k-axe > .cs-orbe{
  border: 1px solid color-mix(in srgb, var(--cs-a2) 55%, transparent);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cs-a2) 34%, transparent) 0 22%, color-mix(in srgb, var(--cs-a) 22%, transparent) 42%, var(--cs-a06) 66%, transparent 74%);
  box-shadow: 0 0 18px var(--cs-a24), inset 0 0 10px var(--cs-a14);
}
.cs-racine .cs-point.cs-k-axe.cs-s-alerte > .cs-orbe{ border: 1.5px solid var(--cs-a); box-shadow: 0 0 14px var(--cs-a40); }
.cs-racine .cs-point.cs-k-axe.cs-vivant > .cs-orbe{ box-shadow: 0 0 0 1px color-mix(in srgb, var(--cs-a2) 60%, transparent), 0 0 18px var(--cs-a55); }
.cs-racine .cs-k-axe > .cs-orbe > .cs-noyau{
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-width: 1.3px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--cs-blanc) 28%, transparent);
}
.cs-racine .cs-k-axe.cs-s-ok > .cs-orbe > .cs-noyau{
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-color: transparent;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--cs-ok) 35%, var(--cs-blanc)), var(--cs-ok) 62%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cs-ok) 60%, transparent);
}

/* pulsation d'un agent présent : un seul anneau, créé seulement quand il sert */
.cs-racine .cs-pouls{ position: absolute; left: 0; top: 0; width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; pointer-events: none;
  border: 1px solid var(--cs-a2); opacity: 0; animation: cs-pouls 2.6s cubic-bezier(.2,.6,.35,1) infinite; }
.cs-racine .cs-source > .cs-pouls{ animation-name: cs-pouls-l; }
/* l'onde part hors de l'orbe : elle ne referme jamais l'arc d'un nœud bloqué */
@keyframes cs-pouls{ 0%{ transform: scale(1.4); opacity: .8; } 100%{ transform: scale(3.2); opacity: 0; } }
@keyframes cs-pouls-l{ 0%{ transform: scale(1); opacity: .6; } 100%{ transform: scale(1.8); opacity: 0; } }

/* ───────── libellés ───────── */
.cs-racine .cs-lib{
  position: absolute; left: 0; top: 0; white-space: nowrap;
  display: flex; align-items: center; gap: 8px; line-height: 1.2;
  color: var(--cs-t2);
  text-shadow: var(--cs-detour);
  transition: color .2s;
}
.cs-racine .cs-a-up{ transform: translate(-50%, calc(-100% - var(--d) / 2 - var(--g))); }
.cs-racine .cs-a-dn{ transform: translate(-50%, calc(var(--d) / 2 + var(--g))); }
.cs-racine .cs-a-lf{ transform: translate(calc(-100% - var(--d) / 2 - var(--g)), -50%); }
.cs-racine .cs-a-rt{ transform: translate(calc(var(--d) / 2 + var(--g)), -50%); }
/* titres d'axes : côté cœur, posés sur le faisceau (aucun rayon ne passe là) */
.cs-racine .cs-a-hr{ transform: translate(calc(var(--d) / 2 + var(--g)), calc(-100% - 6px)); }
.cs-racine .cs-a-hl{ transform: translate(calc(-100% - var(--d) / 2 - var(--g)), calc(-100% - 6px)); }
/* titre d'une voie dans une boîte : au-dessus du rail, aligné sur le départ ; serré quand la hauteur manque */
.cs-racine .cs-a-titre{ transform: translate(-8px, calc(-100% - var(--d) / 2 - 16px)); gap: 10px; }
.cs-racine .cs-titre-serre > .cs-a-titre{ transform: translate(-8px, calc(-100% - var(--d) / 2 - 8px)); }

.cs-racine .cs-p-coeur > .cs-nom{ font: 500 22px/1 var(--cs-sans); letter-spacing: .06em; color: var(--cs-blanc); text-shadow: var(--cs-detour), 0 0 26px var(--cs-a40); }
.cs-racine .cs-p-axe > .cs-nom{ font: 500 19px/1 var(--cs-sans); letter-spacing: .03em; color: var(--cs-blanc); text-shadow: var(--cs-detour), 0 0 20px var(--cs-a40); }
.cs-racine .cs-p-n2 > .cs-nom{ font-size: 13.5px; color: color-mix(in srgb, var(--cs-t) 92%, transparent); }
.cs-racine .cs-p-socle > .cs-nom{ font-size: 12px; color: color-mix(in srgb, var(--cs-t) 74%, transparent); }
.cs-racine .cs-p-n3 > .cs-nom{ font-size: 12px; color: color-mix(in srgb, var(--cs-t) 78%, transparent); }
.cs-racine .cs-p-dedans > .cs-nom{ font-size: 14.5px; color: var(--cs-t); }
.cs-racine .cs-p-dedans > .cs-a-titre .cs-nom-t{ font-size: 15.5px; }
.cs-racine .cs-titre-serre > .cs-a-titre .cs-nom-t{ font-size: 14px; }
.cs-racine .cs-p-dedans.cs-k-axe > .cs-nom{ font-size: 17px; font-weight: 500; letter-spacing: .02em; color: var(--cs-blanc); text-shadow: var(--cs-detour), 0 0 16px var(--cs-a30); }
.cs-racine .cs-p-dedans.cs-k-socle > .cs-nom{ font-size: 13.5px; color: color-mix(in srgb, var(--cs-t) 84%, transparent); }
.cs-racine .cs-p-petit > .cs-nom{ font-size: 12.5px; color: color-mix(in srgb, var(--cs-t) 82%, transparent); }
.cs-racine .cs-p-mini > .cs-nom{ font-size: 12px; color: color-mix(in srgb, var(--cs-t) 70%, transparent); }
/* fiche liée : icône discrète, titre de la fiche au survol (attribut title) */
.cs-racine .cs-nom-f{ display: inline-flex; align-items: center; flex: none; color: color-mix(in srgb, var(--cs-t) 46%, transparent); cursor: help; transition: color .2s; }
.cs-racine .cs-nom-f:hover{ color: var(--cs-c2); }
.cs-racine .cs-nom-f svg{ display: block; }
.cs-racine .cs-bloque > .cs-nom{ color: color-mix(in srgb, var(--cs-bloc) 50%, var(--cs-t)); }
.cs-racine .cs-s-alerte > .cs-nom{ color: var(--cs-c1); }

/* aperçu des étapes d'un pipeline : une perle par étape réelle, état compris */
.cs-racine .cs-micro{ position: relative; display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.cs-racine .cs-micro::before{ content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 1px; background: var(--cs-t20); }
.cs-racine .cs-micro b{ position: relative; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--cs-t40); background: var(--cs-fond); }
.cs-racine .cs-micro b.cs-e-fait{ background: var(--cs-a2); border-color: transparent; }
.cs-racine .cs-micro b.cs-e-en_cours{ background: var(--cs-a); border-color: var(--cs-a2); box-shadow: 0 0 6px var(--cs-a); }
.cs-racine .cs-micro b.cs-e-a_venir{ border-style: dashed; }

.cs-racine .cs-pastille{
  position: absolute; left: calc(var(--d) * .36 + 5px); top: calc(var(--d) * -.36 - 5px);
  transform: translate(-50%, -50%);
  font: 600 11px/1 var(--cs-mono); color: var(--cs-c1);
  background: color-mix(in srgb, var(--cs-fond) 62%, var(--cs-a) 22%);
  border: 1px solid var(--cs-a40); border-radius: 999px; padding: 3px 6px;
  box-shadow: 0 0 12px var(--cs-a24); text-shadow: none;
}
.cs-racine .cs-pastille.cs-pastille-g{ left: calc(var(--d) * -.36 - 5px); }
.cs-racine .cs-agent{
  font: 500 11px/1 var(--cs-mono); letter-spacing: .06em; color: var(--cs-c1);
  background: color-mix(in srgb, var(--cs-fond) 70%, var(--cs-a) 22%);
  border: 1px solid var(--cs-a40); border-radius: 999px; padding: 4px 9px 4px 8px; gap: 6px;
  text-shadow: none; box-shadow: 0 0 14px var(--cs-a24); z-index: 1;
}
.cs-racine .cs-agent::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cs-a2); box-shadow: 0 0 8px var(--cs-a2); animation: cs-clign 1.6s ease-in-out infinite; }
/* capsule d'agent : positions candidates, le module garde la première libre (mesurée) ; --lw = largeur du libellé */
.cs-racine .cs-agent.cs-a-sous-lf{ transform: translate(calc(-100% - var(--d) / 2 - var(--g)), 12px); }
.cs-racine .cs-agent.cs-a-sur-lf{ transform: translate(calc(-100% - var(--d) / 2 - var(--g)), calc(-100% - 12px)); }
.cs-racine .cs-agent.cs-a-avant-lf{ transform: translate(calc(-100% - var(--d) / 2 - var(--g) - var(--lw, 0px) - 10px), -50%); }
.cs-racine .cs-agent.cs-a-sous-rt{ transform: translate(calc(var(--d) / 2 + var(--g)), 12px); }
.cs-racine .cs-agent.cs-a-sur-rt{ transform: translate(calc(var(--d) / 2 + var(--g)), calc(-100% - 12px)); }
.cs-racine .cs-agent.cs-a-apres-rt{ transform: translate(calc(var(--d) / 2 + var(--g) + var(--lw, 0px) + 10px), -50%); }
.cs-racine .cs-agent.cs-a-bas-avant-lf{ transform: translate(calc(-100% - var(--d) / 2 - var(--g) - var(--lw, 0px) - 6px), 6px); }
.cs-racine .cs-agent.cs-a-haut-avant-lf{ transform: translate(calc(-100% - var(--d) / 2 - var(--g) - var(--lw, 0px) - 6px), calc(-100% - 6px)); }
.cs-racine .cs-agent.cs-a-bas-apres-rt{ transform: translate(calc(var(--d) / 2 + var(--g) + var(--lw, 0px) + 6px), 6px); }
.cs-racine .cs-agent.cs-a-haut-apres-rt{ transform: translate(calc(var(--d) / 2 + var(--g) + var(--lw, 0px) + 6px), calc(-100% - 6px)); }
.cs-racine .cs-agent.cs-a-sous-dn{ transform: translate(-50%, calc(var(--d) / 2 + var(--g) + 20px)); }
.cs-racine .cs-agent.cs-a-sur-orbe{ transform: translate(-50%, calc(-100% - var(--d) / 2 - 10px)); }
.cs-racine .cs-agent.cs-a-sur-up{ transform: translate(-50%, calc(-100% - var(--d) / 2 - var(--g) - 20px)); }
.cs-racine .cs-agent.cs-a-sous-o{ transform: translate(-50%, calc(var(--d) / 2 + 12px)); }
.cs-racine .cs-agent.cs-a-sur-o{ transform: translate(-50%, calc(-100% - var(--d) / 2 - 12px)); }
.cs-racine .cs-agent.cs-a-apres-t{ transform: translate(calc(var(--lw, 0px) + 6px), calc(-100% - var(--d) / 2 - 15px)); }
.cs-racine .cs-titre-serre > .cs-agent.cs-a-apres-t{ transform: translate(calc(var(--lw, 0px) + 6px), calc(-100% - var(--d) / 2 - 7px)); }
.cs-racine .cs-agent.cs-a-cache{ display: none; }
@keyframes cs-clign{ 0%, 100%{ opacity: 1; } 50%{ opacity: .25; } }

/* ───────── boîte ───────── */
.cs-racine .cs-boite{ display: flex; flex-direction: column; padding: 20px 22px 18px 24px; container-type: inline-size; }
.cs-racine .cs-tete{ display: flex; gap: 16px; align-items: flex-start; flex: none; padding-bottom: 14px; min-width: 0; }
.cs-racine .cs-retour{
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; margin-top: 3px;
  border: 1px solid var(--cs-bd); border-radius: 11px; color: var(--cs-t2); background: var(--cs-b015);
  transition: border-color .2s, color .2s, background .2s;
}
.cs-racine .cs-retour:hover{ border-color: var(--cs-a); color: var(--cs-a2); background: var(--cs-a06); }
.cs-racine .cs-tete-col{ min-width: 0; flex: none; max-width: 46%; }
.cs-racine .cs-miettes{ display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; }
.cs-racine .cs-miette{ font-size: 12px; color: var(--cs-m); letter-spacing: .02em; transition: color .18s; }
.cs-racine .cs-miette:hover{ color: var(--cs-a2); }
.cs-racine .cs-miette.cs-ici{ color: var(--cs-t2); cursor: default; }
.cs-racine .cs-sep{ color: var(--cs-m); font-size: 11px; }
.cs-racine .cs-nom-boite{ margin: 0; font: 300 34px/1.05 var(--cs-sans); letter-spacing: .003em; color: var(--cs-t); white-space: nowrap; }
.cs-racine .cs-puces{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.cs-racine .cs-puce{
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  border: 1px solid var(--cs-bd); background: var(--cs-b015); border-radius: 999px;
  padding: 4px 12px 5px; font-size: 12px; color: var(--cs-t2);
}
.cs-racine .cs-puce .cs-d{ width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--cs-t30); }
.cs-racine .cs-puce.cs-s-ok .cs-d{ background: var(--cs-ok); border-color: transparent; box-shadow: 0 0 9px color-mix(in srgb, var(--cs-ok) 60%, transparent); }
.cs-racine .cs-puce.cs-s-alerte{ border-color: var(--cs-a40); color: var(--cs-c1); }
.cs-racine .cs-puce.cs-s-alerte .cs-d{ border-color: var(--cs-a); background: var(--cs-a); box-shadow: 0 0 9px var(--cs-a); }
.cs-racine .cs-puce.cs-bloquee{ border-color: color-mix(in srgb, var(--cs-bloc) 45%, transparent); color: color-mix(in srgb, var(--cs-bloc) 55%, var(--cs-t)); background: color-mix(in srgb, var(--cs-bloc) 8%, transparent); }
.cs-racine .cs-puce.cs-agent-p{ border-color: var(--cs-a30); color: var(--cs-c1); }
.cs-racine .cs-puce.cs-agent-p .cs-d{ border: 0; background: var(--cs-a2); box-shadow: 0 0 8px var(--cs-a2); animation: cs-clign 1.6s ease-in-out infinite; }
.cs-racine .cs-puce.cs-etat{ font: 400 11px/1.3 var(--cs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cs-m); }

/* scène basse : tête compacte (titre et puces sur une ligne, marges réduites) */
.cs-racine .cs-boite.cs-ras{ padding-top: 14px; }
.cs-racine .cs-ras .cs-tete{ padding-bottom: 10px; }
.cs-racine .cs-ras .cs-tete-col{ max-width: 62%; }
.cs-racine .cs-ras .cs-tete-ligne{ display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.cs-racine .cs-ras .cs-nom-boite{ font-size: 28px; }
.cs-racine .cs-ras .cs-puces{ margin-top: 0; }
.cs-racine .cs-ras .cs-carte{ padding: 9px 14px 10px; }
.cs-racine .cs-ras .cs-lignes{ gap: 3px; }

/* cartes de détail compactes, dans la tête, à droite */
.cs-racine .cs-cartes{ margin-left: auto; display: flex; align-items: stretch; justify-content: flex-end; gap: 12px; min-width: 0; flex: 0 1 auto; }
/* rien dans le plateau sous le bloc de détail : il se range contre le titre */
.cs-racine .cs-tete.cs-tete-liee .cs-cartes{ margin-left: 44px; justify-content: flex-start; }
.cs-racine .cs-carte{
  min-width: 0; border: 1px solid var(--cs-verre-b); background: var(--cs-verre); border-radius: 16px; padding: 12px 16px 13px;
  box-shadow: 0 26px 60px -38px var(--cs-ombre), inset 0 1px 0 var(--cs-b04);
}
.cs-racine .cs-carte-t{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cs-racine .cs-carte-t .cs-cle-bloc{ margin: 0; flex: 1; }
.cs-racine .cs-c-atoi{ max-width: 300px; }
.cs-racine .cs-c-fiche{ max-width: 340px; }
.cs-racine .cs-c-page{ max-width: 240px; }
.cs-racine .cs-c-exemple{ max-width: 470px; }
.cs-racine .cs-c-pb{ width: 150px; flex: none; }
.cs-racine .cs-marque{ font: 500 11px/1 var(--cs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cs-c2);
  border: 1px solid var(--cs-a30); border-radius: 999px; padding: 3px 8px; }
.cs-racine .cs-grand{ font: 200 40px/.95 var(--cs-mono); color: var(--cs-c2); letter-spacing: -.02em; text-shadow: 0 0 22px var(--cs-a30); }
.cs-racine .cs-lignes{ display: flex; flex-direction: column; gap: 6px; }
.cs-racine .cs-ligne{ display: flex; gap: 10px; font-size: 12.5px; line-height: 1.4; color: var(--cs-t2); }
.cs-racine .cs-ligne::before{ content: ''; flex: none; width: 5px; height: 5px; margin-top: 7px; border-radius: 50%; background: var(--cs-a2); box-shadow: 0 0 8px var(--cs-a40); }
.cs-racine .cs-fiche{ font: 400 12px/1.5 var(--cs-mono); color: var(--cs-t2); word-break: break-word; }
.cs-racine .cs-page{ font: 400 12px/1.4 var(--cs-mono); color: var(--cs-c2); letter-spacing: .04em; }

.cs-racine .cs-corps{ flex: 1; min-height: 0; display: flex; gap: 22px; }
.cs-racine .cs-autour{ width: 196px; flex: none; display: flex; flex-direction: column; min-height: 0; }
.cs-racine .cs-voisins{ display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.cs-racine .cs-cle-bloc{ display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  font: 500 11px/1 var(--cs-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cs-m); }
.cs-racine .cs-cle-bloc::after{ content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--cs-t14), transparent); }
.cs-racine .cs-voisin{
  display: flex; align-items: center; gap: 9px; padding: 7px 12px; text-align: left; white-space: nowrap; overflow: hidden;
  border: 1px solid var(--cs-bd); border-radius: 11px; background: color-mix(in srgb, var(--cs-blanc) 1.2%, transparent);
  color: var(--cs-t2); font-size: 12.5px; transition: border-color .18s, background .18s, color .18s;
}
.cs-racine .cs-voisin span{ overflow: hidden; text-overflow: ellipsis; flex: 1; }
.cs-racine .cs-voisin:hover{ border-color: var(--cs-a40); background: var(--cs-a06); color: var(--cs-t); }
.cs-racine .cs-voisin .cs-d{ width: 7px; height: 7px; flex: none; border-radius: 50%; border: 1px solid var(--cs-t30); }
.cs-racine .cs-voisin.cs-s-ok .cs-d{ background: var(--cs-ok); border-color: transparent; box-shadow: 0 0 8px color-mix(in srgb, var(--cs-ok) 50%, transparent); }
.cs-racine .cs-voisin.cs-s-alerte .cs-d{ border-color: var(--cs-a); background: var(--cs-a); }
.cs-racine .cs-voisin.cs-bloque .cs-d{ border: 1.4px solid var(--cs-bloc); border-right-color: transparent; background: transparent; transform: rotate(-38deg); box-shadow: 0 0 8px color-mix(in srgb, var(--cs-bloc) 40%, transparent); }
.cs-racine .cs-voisin.cs-vivant:not(.cs-bloque) .cs-d{ border: 0; background: var(--cs-a2); box-shadow: 0 0 8px var(--cs-a2); animation: cs-clign 1.6s ease-in-out infinite; }
.cs-racine .cs-voisin.cs-vivant.cs-bloque .cs-d{ animation: cs-clign 1.6s ease-in-out infinite; }
/* attente ouverte chez le voisin : anneau pointillé autour du point ; problèmes : pastille chiffrée */
.cs-racine .cs-voisin.cs-attente .cs-d{ outline: 1px dashed color-mix(in srgb, var(--cs-a2) 75%, transparent); outline-offset: 2px; }
.cs-racine .cs-v-pb{ flex: none; font: 600 11px/1 var(--cs-mono); color: var(--cs-c1); padding: 2px 6px; border-radius: 999px;
  border: 1px solid var(--cs-a40); background: color-mix(in srgb, var(--cs-fond) 62%, var(--cs-a) 22%); }
/* ⊚ : ce voisin contient d'autres boîtes */
.cs-racine .cs-dedans{ position: relative; flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--cs-t30); }
.cs-racine .cs-dedans::after{ content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--cs-t40); }

.cs-racine .cs-plateau{ position: relative; flex: 1; min-width: 0; }
/* contenu plus haut que le plateau : la boîte entière défile (le module fixe la hauteur du plateau) */
.cs-racine .cs-boite.cs-defile{ overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cs-t14) transparent; }

/* étapes d'un pipeline : capsules, rond d'état dedans (o à venir, ● en cours, ✓ fait) ; l'ordre se lit aux chevrons */
.cs-racine .cs-etape{
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); z-index: 3;
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 15px; white-space: nowrap;
  border: 1px solid var(--cs-t20); border-radius: 23px;
  background: color-mix(in srgb, var(--cs-fond) 90%, var(--cs-t) 5%);
  box-shadow: 0 10px 24px -14px var(--cs-ombre), inset 0 1px 0 color-mix(in srgb, var(--cs-blanc) 3.5%, transparent);
  font-size: 15px; color: var(--cs-t); text-shadow: none;
}
.cs-racine .cs-etape .cs-rond{ position: relative; width: 9px; height: 9px; flex: none; border-radius: 50%; border: 1.2px solid var(--cs-t40); }
.cs-racine .cs-etape.cs-t-grand{ height: 56px; border-radius: 28px; padding: 0 26px 0 19px; gap: 12px; font-size: 17px; }
.cs-racine .cs-etape.cs-t-grand .cs-rond{ width: 12px; height: 12px; }
.cs-racine .cs-etape.cs-t-petit{ height: 28px; border-radius: 14px; padding: 0 12px 0 10px; gap: 7px; font-size: 12.5px; }
.cs-racine .cs-etape.cs-t-petit .cs-rond{ width: 7px; height: 7px; }
.cs-racine .cs-etape.cs-e-fait{ border-color: color-mix(in srgb, var(--cs-a2) 45%, transparent); background: color-mix(in srgb, var(--cs-fond) 84%, var(--cs-a) 13%); }
.cs-racine .cs-etape.cs-e-fait .cs-rond{ border-color: transparent; background: var(--cs-a2); }
.cs-racine .cs-etape.cs-e-fait .cs-rond::after{ content: ''; position: absolute; left: 32%; top: 14%; width: 26%; height: 48%; border: solid var(--cs-fond); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.cs-racine .cs-etape.cs-e-en_cours{ border-color: var(--cs-a); box-shadow: 0 0 18px var(--cs-a30), 0 10px 24px -14px var(--cs-ombre); }
.cs-racine .cs-etape.cs-e-en_cours .cs-rond{ border-color: var(--cs-a2); background: var(--cs-a2); box-shadow: 0 0 8px var(--cs-a2); animation: cs-clign 1.4s ease-in-out infinite; }
.cs-racine .cs-etape.cs-e-a_venir{ border-style: dashed; color: var(--cs-t2); background: color-mix(in srgb, var(--cs-fond) 94%, transparent); }
.cs-racine .cs-etape.cs-e-a_venir .cs-rond{ border-style: dashed; }
.cs-racine .cs-voie{ fill: none; stroke: var(--cs-t30); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-racine .cs-voie.cs-v-fait{ stroke: var(--cs-a2); }
.cs-racine .cs-voie-lueur{ fill: none; stroke: var(--cs-t); stroke-opacity: .04; stroke-width: 9; stroke-linecap: round; }
.cs-racine .cs-chevron{ fill: none; stroke: color-mix(in srgb, var(--cs-t) 55%, transparent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cs-racine .cs-fin{ fill: var(--cs-fond); stroke: var(--cs-t40); stroke-width: 1.2; }
.cs-racine .cs-fin-p{ fill: var(--cs-t40); }

/* petit écran : rail plus étroit, cartes plus serrées */
@container (max-width: 1400px){
  .cs-racine .cs-autour{ width: 176px; }
  .cs-racine .cs-voisin{ gap: 7px; padding: 7px 10px; }
  .cs-racine .cs-v-pb{ padding: 2px 5px; }
  .cs-racine .cs-corps{ gap: 18px; }
  .cs-racine .cs-c-fiche{ max-width: 300px; }
  .cs-racine .cs-etape.cs-t-moyen{ height: 42px; padding: 0 15px 0 12px; gap: 8px; font-size: 14px; }
  .cs-racine .cs-nom-boite{ font-size: 30px; }
}
/* compactage des capsules quand la largeur manque (après la règle de petit écran : elles priment) :
   d'abord le remplissage, puis la police d'un cran (11,5 px au plus petit) */
.cs-racine .cs-etape.cs-c2{ padding: 0 13px 0 11px; gap: 7px; }
.cs-racine .cs-etape.cs-t-grand.cs-c2{ padding: 0 18px 0 14px; gap: 9px; }
.cs-racine .cs-etape.cs-t-petit.cs-c2{ padding: 0 9px 0 8px; gap: 6px; }
.cs-racine .cs-etape.cs-c3{ font-size: 13px; }
.cs-racine .cs-etape.cs-t-grand.cs-c3{ font-size: 15px; }
.cs-racine .cs-etape.cs-t-petit.cs-c3{ font-size: 11.5px; }

/* ───────── barre d'ordre ───────── */
.cs-racine .cs-ordre{
  display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 18px;
  border: 1px solid var(--cs-bd); border-radius: 16px; background: var(--cs-b015);
  transition: border-color .2s, box-shadow .3s;
}
.cs-racine .cs-ordre:focus-within{ border-color: var(--cs-bd2); }
.cs-racine .cs-ordre.cs-parti{ border-color: var(--cs-a); box-shadow: 0 0 26px var(--cs-a24); }
.cs-racine .cs-ordre input{ flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--cs-t); font: 400 13px var(--cs-sans); padding: 11px 0; }
/* invite : 58 % du texte, au-dessus du seuil de contraste AA sur le fond */
.cs-racine .cs-ordre input::placeholder{ color: color-mix(in srgb, var(--cs-t) 58%, transparent); }
.cs-racine .cs-envoyer{
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px;
  color: var(--cs-a); border: 1px solid var(--cs-a30); background: var(--cs-a06); transition: background .2s, box-shadow .2s;
}
.cs-racine .cs-envoyer:hover{ background: var(--cs-a14); box-shadow: 0 0 20px var(--cs-a24); }

/* ───────── pleine page (options.pleinePage) ─────────
   Aucun cadre : la scène remplit tout le conteneur, sans bordure, coin ni ombre, sur un fond plein couleur fond (un
   décor animé de l'hôte ne passe jamais sous un libellé, et aucun bord n'est perceptible puisque la scène EST le fond).
   La file et la barre d'ordre flottent par-dessus ; la vue (le schéma ou la boîte) se tient dans la zone mesurée entre
   elles (--cs-zone-haut, --cs-zone-bas, posées par le module) et entre les marges latérales de l'hôte. */
.cs-racine .cs-cadre.cs-plein{ display: block; }
.cs-racine .cs-plein > .cs-scene{ position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--cs-fond); }
.cs-racine .cs-plein .cs-vue{
  top: var(--cs-zone-haut, 0px); bottom: var(--cs-zone-bas, 0px);
  left: var(--cs-marge-gauche, 0px); right: var(--cs-marge-droite, 0px);
}
.cs-racine .cs-plein > .cs-file, .cs-racine .cs-plein > .cs-ordre{ position: absolute; z-index: 30; left: var(--cs-marge-gauche, 0px); right: var(--cs-marge-droite, 0px); }
.cs-racine .cs-plein > .cs-file{ top: var(--cs-marge-haut, 0px); pointer-events: none; }
.cs-racine .cs-plein > .cs-file > *{ pointer-events: auto; }
.cs-racine .cs-plein > .cs-ordre{ bottom: var(--cs-marge-bas, 0px); }
/* boîte : la tête s'aligne sur le bord de la file et de la barre (l'écart avec elles est déjà dans la zone) */
.cs-racine .cs-plein .cs-boite{ padding: 4px 8px 0; }

/* ───────── transitions ───────── */
.cs-racine .cs-entree{ animation: cs-entree .3s cubic-bezier(.22,.92,.3,1) both; }
.cs-racine .cs-arrivee{ animation: cs-arrivee .45s cubic-bezier(.22,.92,.3,1); }
.cs-racine .cs-sortie{ animation: cs-sortie .22s ease-in both; pointer-events: none; }
@keyframes cs-entree{ from{ opacity: 0; transform: scale(.975); } to{ opacity: 1; transform: none; } }
@keyframes cs-arrivee{ from{ transform: scale(.985); } to{ transform: none; } }
@keyframes cs-sortie{ to{ opacity: 0; transform: scale(1.05); } }
.cs-racine .cs-fantome{ position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; z-index: 20;
  background: radial-gradient(circle, var(--cs-a40), var(--cs-a06) 55%, transparent 72%); }

@media (prefers-reduced-motion: reduce){
  .cs-racine *, .cs-racine *::before, .cs-racine *::after{ animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
}
/* Carte du système v3.1 : la page n'est qu'un cadre ; tout le dessin vient du module (lib/carteSchema/carte-schema.css).
   Sur PC le schéma EST la page : la scène du module (option pleinePage) couvre toute la zone principale d'ADROS, sans
   cadre ; l'en-tête, la file « À toi », la barre d'ordre et la ligne de retour flottent par-dessus. Couleurs : variables
   d'ADROS uniquement. Téléphone (< 768 px) : inchangé depuis la v3 (liste de la v1.1). */
.carte-systeme-adros{max-width:none;padding:30px 24px 14px;display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;overflow:hidden}

/* en-tête à la hauteur de l'horloge d'ADROS (bande top:30px, 46px de haut, centrée) : rien au centre */
.carte-entete{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-height:46px;padding:0 8px}
/* groupes gauche (identité, santé) et droite (avis, erreur) : sans boîte hors PC, l'en-tête se lit comme en v3 */
.carte-entete-g,.carte-entete-d{display:contents}
.carte-entete h1{margin:0;font:600 21px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.carte-sante{font:400 12px/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
/* sondes de plus de 2 h : point creux pointillé, teinte plus présente */
.carte-sante.is-perime{color:var(--c2)}
.carte-sante.is-perime::before{content:'';display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;border:1px dashed var(--c2);vertical-align:1px}
.carte-degrade{font:400 12px/1 var(--mono);color:var(--text);border:1px dashed var(--border2);border-radius:999px;padding:4px 10px}
.carte-avis{font:400 12px/1 var(--mono);color:var(--c2);border:1px dashed var(--border2);border-radius:999px;padding:4px 10px}
.carte-erreur{margin-left:auto;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text);border:1px solid var(--red);border-radius:10px;padding:6px 12px}

/* cadre du module ; la montée d'entrée des pages (.page > *) est coupée : le module a la sienne et mesure son dessin au montage */
.carte-cadre{position:relative;flex:1;min-height:0}
.carte-systeme-adros > .carte-cadre{animation:none}
/* le module exige une hauteur définie : le conteneur remplit le cadre (le module y pose cs-racine et son cadre interne .cs-cadre) */
.carte-module{position:absolute;inset:0}
.carte-attente{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
/* chargement en échec : l'ancien état reste, grisé (filtre et non opacité) ; la barre d'ordre reste utilisable */
.carte-cadre.is-perime .cs-file{opacity:.45}
.carte-systeme-adros .carte-cadre.is-perime .cs-scene{filter:grayscale(1) brightness(.55)}

/* index.css habille TOUS les input (spécificité 0,4,1 : fond vitré, bordure, halo au focus) :
   la barre d'ordre du module retrouve le champ nu de la maquette */
.carte-module .cs-ordre input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]){width:auto;flex:1;min-width:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0;padding:11px 0;font:400 13px var(--sans);color:var(--text);box-shadow:none}
.carte-module .cs-ordre input:focus{border-color:transparent;box-shadow:none}

/* retour de l'ordre : une ligne réservée (aucun redimensionnement du module quand elle se remplit) */
.carte-retour{display:flex;align-items:center;gap:10px;height:18px;padding:0 18px;min-width:0;font-size:12px;color:var(--muted)}
.carte-retour b{flex:none;font-weight:500;color:var(--text2)}
.carte-retour em{flex:none;font-style:normal;color:var(--c2)}
.carte-retour span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.carte-retour a{flex:none;color:var(--text)}
.carte-retour.is-erreur b{color:var(--red)}
.carte-retour.is-erreur span{color:var(--text)}

/* ───────── PC : pleine page (v3.1) ─────────
   La section remplit le main d'ADROS sans retrait. Les éléments flottants de la page (en-tête, ligne de retour) ont une
   place fixe ; celles du module (file sous l'en-tête, barre au-dessus de la ligne de retour) lui sont données en
   variables : --cs-marge-haut = bande de l'horloge (30 + 46 px) + 8 px ; --cs-marge-bas = ligne de retour (14 + 18 px)
   + 8 px ; marges latérales = retrait de la v3. Le module tient son schéma entre la file et la barre (mesurées).
   L'en-tête ne passe jamais à la ligne (sinon il descendrait sur la file) : trois colonnes, la centrale (240 px) est
   laissée à l'horloge d'ADROS, centrée sur la même bande ; les pastilles trop longues se tronquent. */
@media(min-width:768px){
  .carte-systeme-adros{position:relative;display:block;padding:0}
  .carte-entete{position:absolute;z-index:6;top:30px;left:24px;right:24px;height:46px;min-height:0;padding:0 8px;display:grid;grid-template-columns:minmax(0,1fr) 240px minmax(0,1fr);align-items:center;pointer-events:none}
  .carte-entete-g,.carte-entete-d{display:flex;align-items:center;gap:14px;min-width:0;overflow:hidden}
  .carte-entete-d{grid-column:3;justify-content:flex-end}
  .carte-entete-g > *,.carte-entete-d > *{pointer-events:auto;flex:none}
  .carte-entete .carte-degrade,.carte-entete .carte-avis,.carte-entete .carte-erreur{flex:0 1 auto;min-width:0;max-width:none;margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .carte-cadre{position:absolute;inset:0}
  .carte-module{--cs-marge-haut:84px;--cs-marge-bas:40px;--cs-marge-gauche:24px;--cs-marge-droite:24px}
  .carte-retour{position:absolute;z-index:6;left:24px;right:24px;bottom:14px}
  /* fond : scène OPAQUE sur toute la zone (option a, tranchée par les captures du 21/09 ; c'est le fond par défaut de
     la pleine page du module). L'option b (scène transparente, voile sous le schéma) laissait les bulles d'ADROS passer
     sous l'en-tête, la file, l'horloge et la barre d'ordre (verre), et dessinait un bord horizontal perceptible là où
     le décor s'arrêtait. */
}

/* liste téléphone (composant ListeMobile de la v1.1, inchangé) : rendue en permanence, c'est le CSS qui choisit */
.carte-liste{display:none;list-style:none;margin:0;padding:0;flex:1;min-width:0;overflow-y:auto}
.carte-liste ul{list-style:none;margin:0;padding:0}
.carte-liste-ligne{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--border)}
.carte-liste-ligne.is-focus{background:var(--card)}
.carte-liste-plier{width:24px;height:24px;color:var(--muted);background:transparent;border:0;font-size:16px;cursor:pointer}
.carte-liste-nom{font:inherit;font-size:14px;color:var(--text);background:transparent;border:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.carte-liste-pion{font-size:11px;color:var(--bg);background:var(--accent);border-radius:999px;padding:2px 8px}
.carte-liste-sante{font-size:14px;color:var(--muted)}
.carte-liste-sante.is-ok{color:var(--green)}
.carte-liste-sante.is-alerte{color:var(--red);font-weight:800}
.carte-liste-sante.is-bloque{text-decoration:underline}

/* téléphone : le module ne gère pas les petits écrans. Sa scène est masquée (sa file « À toi » et sa barre d'ordre restent),
   la liste prend sa place sous la barre d'ordre. Choix par media query, jamais par mesure JavaScript.
   La pleine page du module (file et barre flottantes) est annulée : l'écran reste celui de la v3 (la barre d'ordre
   y est en position relative, comme la pose le verre d'ADROS, .vitre-bloc, sur tout panneau à bordure). */
@media(max-width:767px){
  .carte-systeme-adros{height:auto;overflow:visible}
  .carte-entete{min-height:0;padding:0}
  .carte-erreur{max-width:100%;white-space:normal}
  .carte-cadre{flex:none}
  .carte-module{position:static}
  .carte-systeme-adros .carte-module .cs-cadre{height:auto;grid-template-rows:auto auto}
  .carte-systeme-adros .carte-module .cs-scene{display:none}
  .carte-systeme-adros .carte-module .cs-cadre.cs-plein{display:grid}
  .carte-systeme-adros .carte-module .cs-plein > .cs-file{position:static}
  .carte-systeme-adros .carte-module .cs-plein > .cs-ordre{position:relative}
  .carte-retour{height:auto;min-height:18px;flex-wrap:wrap;padding:0 8px}
  .carte-liste{display:block;order:1}
}

/* Exploration directe et lisibilité, sans modifier la disposition organique. */
.carte-outils{display:flex;align-items:center;gap:12px;z-index:9;position:relative;min-width:0}
.carte-recherche{position:relative;flex:0 1 330px;min-width:160px}
.carte-recherche input{width:100%;padding:11px 35px 11px 14px!important;border-radius:12px!important;background:var(--bg)!important;font-size:13px!important}
.carte-effacer{position:absolute;right:9px;top:7px;border:0;background:transparent;color:var(--text2);font-size:22px;cursor:pointer}
.carte-overview,.carte-ouvrir{display:inline-flex;align-items:center;white-space:nowrap;padding:10px 13px;border:1px solid var(--border2);border-radius:12px;background:var(--bg);color:var(--text2);font-size:12px;text-decoration:none;cursor:pointer}
.carte-overview:hover,.carte-ouvrir:hover{border-color:var(--accent);color:var(--text)}
.carte-overview:focus-visible,.carte-trouves button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.carte-trouves{position:absolute;top:calc(100% + 8px);left:0;width:max(100%,300px);max-width:85vw;max-height:360px;overflow:auto;padding:6px;border:1px solid var(--border2);border-radius:14px;background:var(--bg);box-shadow:0 14px 38px #0008}
.carte-trouves button{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;padding:11px;border:0;border-radius:8px;color:var(--text);background:transparent;cursor:pointer}
.carte-trouves button:hover{background:var(--glow)}
.carte-trouves small,.carte-trouves p{color:var(--muted);font-size:11px}
.carte-mode-emploi{margin-left:auto;text-align:right;font-size:12px;color:var(--text2)}
.carte-mode-emploi small{display:block;margin-top:4px;color:var(--muted);font-size:11px}
.carte-module .cs-p-socle > .cs-nom,.carte-module .cs-p-n3 > .cs-nom,.carte-module .cs-p-mini > .cs-nom{color:var(--text2);font-weight:500}
.carte-module .cs-point > .cs-orbe{border-color:color-mix(in srgb,var(--text) 60%,transparent)}
.carte-module .cs-l-rayon,.carte-module .cs-l-brin{stroke-width:1.35}
.carte-module .cs-noeud:focus-visible > .cs-nom,.carte-module .cs-noeud:hover > .cs-nom{color:var(--text);text-decoration:underline;text-underline-offset:5px}
@media(min-width:768px){.carte-outils{position:absolute;top:84px;left:32px;right:32px;height:42px}.carte-module{--cs-marge-haut:140px}}
@media(max-width:1100px){.carte-mode-emploi{display:none}.carte-ouvrir{max-width:200px;overflow:hidden;text-overflow:ellipsis;display:block}}
@media(max-width:767px){.carte-outils{flex-wrap:wrap;margin:8px 0}.carte-recherche{flex:1 1 100%}.carte-trouves{width:100%}.carte-liste{flex:none;overflow:visible}.carte-module .cs-pilule{max-width:100%;white-space:normal;text-align:left}.carte-module .cs-ordre{min-width:0;width:100%}}

/* Navigation commune : Tout et branches réelles de la carte. */
.carte-navigation{display:flex;gap:4px;padding:10px;border:1px solid var(--glass-border);border-radius:16px;background:var(--bg);z-index:10}
.carte-navigation button{border:1px solid transparent;background:transparent;color:var(--text2);padding:10px 12px;border-radius:9px;cursor:pointer}
.carte-navigation button:hover{color:var(--text);background:var(--glow)}
@media(min-width:1024px){
 .carte-navigation{position:absolute;left:24px;top:140px;width:208px;box-sizing:border-box;flex-direction:column;max-height:calc(100% - 170px);overflow-y:auto;box-shadow:inset 0 1px 0 #ffffff12,0 14px 38px #0005}
 .carte-systeme-adros{background:var(--bg)}
 .carte-cadre{left:240px}
 .carte-outils{left:264px}
 .carte-retour{left:264px}
}
@media(min-width:768px) and (max-width:1023px){
 .carte-navigation{position:absolute;top:136px;left:24px;right:24px}
 .carte-module{--cs-marge-haut:200px}
}
@media(max-width:767px){.carte-navigation{flex-shrink:0}}

/* Carte épurée : navigation centrale, conversation via le menu. */
.carte-systeme-adros .cs-file,.carte-systeme-adros .cs-ordre,.carte-systeme-adros .carte-retour{display:none!important}
@media(min-width:1024px){.carte-navigation{top:50%;transform:translateY(-50%);max-height:calc(100% - 120px)}}
@media(min-width:768px){.carte-module{--cs-marge-haut:100px;--cs-marge-bas:24px}}
@media(min-width:768px) and (max-width:1023px){.carte-module{--cs-marge-haut:200px}}