/* ════════════════════════════════════════════════
       DESIGN SYSTEM — FibroBot x Stitch (CSS vanilla)
       ════════════════════════════════════════════════ */
    :root {
      /* Stitch palette */
      --background: #f8f9ff;
      --surface: #ffffff;
      --surface-dim: #cbdbf5;
      --surface-bright: #f8f9ff;
      --surface-container-lowest: #ffffff;
      --surface-container-low: #eff4ff;
      --surface-container: #e5eeff;
      --surface-container-high: #dce9ff;
      --surface-container-highest: #d3e4fe;
      --surface-variant: #d3e4fe;
      --on-surface: #0b1c30;
      --on-surface-variant: #4a4455;
      --inverse-surface: #213145;
      --inverse-on-surface: #eaf1ff;
      --outline: #7b7487;
      --outline-variant: #ccc3d8;
      --surface-tint: #732ee4;

      --primary: #630ed4;
      --on-primary: #ffffff;
      --primary-container: #7c3aed;
      --on-primary-container: #ede0ff;
      --inverse-primary: #d2bbff;
      --primary-fixed: #eaddff;
      --primary-fixed-dim: #d2bbff;
      --on-primary-fixed: #25005a;
      --on-primary-fixed-variant: #5a00c6;

      --secondary: #00687a;
      --on-secondary: #ffffff;
      --secondary-container: #57dffe;
      --on-secondary-container: #006172;
      --secondary-fixed: #acedff;
      --secondary-fixed-dim: #4cd7f6;
      --on-secondary-fixed: #001f26;
      --on-secondary-fixed-variant: #004e5c;

      --tertiary: #6129bc;
      --on-tertiary: #ffffff;
      --tertiary-container: #7a47d5;
      --on-tertiary-container: #ede1ff;
      --tertiary-fixed: #ebddff;
      --tertiary-fixed-dim: #d3bbff;
      --on-tertiary-fixed: #250059;
      --on-tertiary-fixed-variant: #581db3;

      --error: #ba1a1a;
      --on-error: #ffffff;
      --error-container: #ffdad6;
      --on-error-container: #93000a;

      /* Functional aliases */
      --text: var(--on-surface);
      --text-muted: var(--on-surface-variant);
      --border: var(--outline-variant);
      --shadow-soft: 0 4px 20px rgba(124, 58, 237, 0.08);
      --shadow-md: 0 8px 28px rgba(124, 58, 237, 0.12);
      --shadow-lg: 0 12px 40px rgba(11, 28, 48, 0.18);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 24px;
      --radius-full: 9999px;
      --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      --header-h: 64px;
      --bottom-nav-h: 72px;
      --sidebar-w: 260px;
      --container-max: 900px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
    html, body { height: 100%; font-family: var(--font); color: var(--text); background: var(--background); }
    body { overflow: hidden; display: flex; }

    /* Typography scales */
    .hl-lg { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; }
    .hl-md { font-size: 20px; line-height: 28px; font-weight: 600; }
    .body-lg { font-size: 18px; line-height: 28px; font-weight: 400; }
    .body-md { font-size: 16px; line-height: 24px; font-weight: 400; }
    .body-sm { font-size: 14px; line-height: 20px; font-weight: 400; }
    .label-md { font-size: 14px; line-height: 16px; font-weight: 600; letter-spacing: 0.01em; }
    .btn-text { font-size: 16px; line-height: 24px; font-weight: 600; }

    /* Utilities */
    .card {
      background: var(--surface);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      border: 1px solid var(--surface-container-high);
    }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px; padding: 12px 20px; border-radius: var(--radius-md);
      border: none; cursor: pointer; font-family: var(--font); font-size: 16px; font-weight: 600;
      transition: transform .12s, box-shadow .15s, background .15s;
    }
    .btn:active { transform: scale(0.98); }
    .btn-primary { background: var(--primary-container); color: var(--on-primary); }
    .btn-primary:hover { background: var(--primary); }
    .btn-secondary { background: var(--secondary-container); color: var(--on-secondary-container); }
    .btn-ghost { background: transparent; color: var(--text-muted); border: 1.5px solid var(--border); }
    .btn-ghost:hover { border-color: var(--outline); color: var(--text); background: var(--surface-container-low); }
    .btn-danger { background: var(--error-container); color: var(--error); border: 1px solid rgba(186,26,26,.2); }
    .btn-danger:hover { background: #ffcdc7; }
    .btn-block { width: 100%; }

    .chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--surface-container-low); color: var(--text);
      border: 1px solid var(--border); border-radius: var(--radius-full);
      padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
      transition: all .15s;
    }
    .chip:hover { background: var(--surface-container); }
    .chip.on { background: var(--primary-container); color: var(--on-primary); border-color: var(--primary-container); }

    input[type="text"], input[type="email"], input[type="password"], textarea {
      width: 100%; font-family: var(--font); font-size: 16px;
      background: var(--surface-container-low); color: var(--text);
      border: 1.5px solid var(--border); border-radius: var(--radius-md);
      padding: 12px 14px; outline: none; transition: border-color .15s, background .15s;
    }
    input:focus, textarea:focus { border-color: var(--secondary); background: var(--surface); }
    input::placeholder, textarea::placeholder { color: var(--outline); }

    /* ════════════════════════════════════════════════
       LAYOUT
       ════════════════════════════════════════════════ */
    #app { display: flex; width: 100%; height: 100%; }

    /* Mobile top header */
    .top-header {
      position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
      background: var(--surface); border-bottom: 1px solid var(--border);
      box-shadow: var(--shadow-soft); z-index: 40;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 20px;
    }
    .brand { display: flex; align-items: center; gap: 10px; }
    .brand-mark {
      width: 36px; height: 36px; border-radius: var(--radius-md);
      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
      display: flex; align-items: center; justify-content: center; font-size: 18px;
    }
    .brand-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; color: #f0e8ff; }
    .brand-tag { font-size: .7rem; color: rgba(226,217,243,0.5); }
    .beta-pill {
      display: inline-block; font-size: .55rem; font-weight: 800; letter-spacing: .08em;
      text-transform: uppercase; padding: 2px 5px; border-radius: 6px;
      background: rgba(217,119,6,.1); color: #92400e; border: 1px solid rgba(217,119,6,.2);
      vertical-align: middle; margin-left: 5px;
    }
    #hdr-btn { padding: 8px 16px; border-radius: var(--radius-md); font-size: .85rem; font-weight: 700; }

    /* Desktop sidebar */
    .sidebar {
      display: none; position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w);
      background: #12072a; border-right: 1px solid rgba(255,255,255,0.07);
      flex-direction: column; padding: 24px 16px 16px; z-index: 30;
    }
    .sidebar .brand { margin-bottom: 28px; padding: 0 8px; }
    .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 4px; }
    .sidebar-more { margin-top: 8px; }
    .sidebar-more summary {
      display: flex; align-items: center; justify-content: space-between; list-style: none;
      padding: 10px 14px; color: rgba(226,217,243,.68); border-radius: var(--radius-md);
      cursor: pointer; font-size: .82rem; font-weight: 750; letter-spacing: .02em;
    }
    .sidebar-more summary::-webkit-details-marker { display: none; }
    .sidebar-more summary::after { content: '⌄'; transition: transform .15s; }
    .sidebar-more[open] summary::after { transform: rotate(180deg); }
    .sidebar-more summary:hover { background: rgba(255,255,255,.06); color: #E2D9F3; }
    .sidebar-more-items { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
    .nav-item {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 14px; border-radius: 14px;
      color: rgba(226,217,243,0.55); text-decoration: none; font-size: 14px; font-weight: 600;
      cursor: pointer; transition: background .15s, color .15s;
      width: 100%; border: 1px solid transparent; background: transparent;
      font-family: inherit; text-align: left;
    }
    .nav-item:hover { background: rgba(255,255,255,0.07); color: #E2D9F3; }
    .nav-item.on { background: rgba(124,58,237,0.3); color: #f0e8ff; border: 1px solid rgba(168,85,247,0.25); }
    .nav-item .ni { font-size: 19px; width: 24px; text-align: center; }

    .sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 14px; }
    .partner-link {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px; margin-bottom: 8px; border-radius: 12px;
      color: rgba(226,217,243,0.5); text-decoration: none; font-size: 13px; font-weight: 500;
      opacity: .85; transition: background .15s, opacity .15s;
    }
    .partner-link:hover { background: rgba(255,255,255,0.06); opacity: 1; color: #E2D9F3; }
    .partner-link .ni { font-size: 18px; width: 24px; text-align: center; }
    .user-mini { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; cursor: pointer; }
    .user-mini:hover { background: rgba(255,255,255,0.06); }
    .user-mini .av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#7c3aed,#a855f7); color: white; display: flex; align-items: center; justify-content: center; font-size: 16px; }
    .user-mini .uname { font-size: 14px; font-weight: 700; color: #E2D9F3; }
    .user-mini .usub { font-size: 12px; color: rgba(226,217,243,0.5); }

    /* Main content */
    main {
      flex: 1; margin-left: 0; margin-top: var(--header-h); margin-bottom: var(--bottom-nav-h);
      overflow: hidden; position: relative;
    }
    .content-wrap {
      width: 100%; max-width: var(--container-max); margin: 0 auto;
      height: 100%; padding: 20px;
    }

    /* Screens */
    .scr { display: none; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .scr.on { display: block; }

    /* Mobile bottom nav */
    .bottom-nav {
      position: fixed; left: 0; right: 0; bottom: 0; height: var(--bottom-nav-h);
      background: var(--surface); border-top: 1px solid var(--border);
      box-shadow: 0 -4px 20px rgba(124,58,237,0.08); z-index: 40;
      display: flex; justify-content: space-around; align-items: center;
      padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .bnav-item {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 4px; padding: 6px 2px; border-radius: var(--radius-full); border: none; background: none;
      color: var(--text-muted); font-family: var(--font); font-size: 11px; font-weight: 600;
      cursor: pointer; transition: all .15s;
    }
    .bnav-item .ni { font-size: 20px; transition: transform .15s; }
    .bnav-item.on { color: var(--primary); background: var(--primary-fixed); }
    .bnav-item.on .ni { transform: scale(1.1); }

    /* More grid */
    .more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .more-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
      padding: 20px 14px; box-shadow: var(--shadow-soft); cursor: pointer; text-align: center;
      transition: transform .12s, box-shadow .15s;
    }
    .more-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .more-card .mc-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--surface-container); display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 12px; }
    .more-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
    .more-card p { font-size: 13px; color: var(--text-muted); }

    /* Actualités sourcées — même univers visuel que le chat */
    #s-news { background:linear-gradient(160deg,#1e1030 0%,#160d28 50%,#0e1535 100%); color:#f0e8ff; }
    #s-news .content-wrap { max-width:1050px; padding-top:28px; }
    #s-news .page-head h2 { color:#f8f3ff; }
    #s-news .page-head p { color:rgba(240,232,255,.72); }
    .news-intro { padding:15px 17px; margin-bottom:18px; color:#e2d9f3; font-size:14px; line-height:1.65; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg); }
    .news-preview-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:28px 0 12px; }
    .news-preview-head h2 { font-size:20px; }
    .news-preview-head button { border:0; background:transparent; color:var(--primary); font-weight:750; cursor:pointer; }
    .news-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding-bottom:20px; }
    .news-card { background:linear-gradient(145deg,rgba(76,29,149,.82),rgba(30,16,48,.92)); border:1px solid rgba(196,181,253,.24); border-radius:var(--radius-lg); box-shadow:0 10px 28px rgba(7,3,18,.24); padding:20px; display:flex; flex-direction:column; gap:11px; color:#f0e8ff; }
    .news-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:rgba(240,232,255,.72); font-size:12px; }
    .news-tag { color:#cffafe; background:rgba(34,211,238,.14); border:1px solid rgba(103,232,249,.2); border-radius:999px; padding:5px 9px; font-weight:750; }
    .news-card h3 { color:#fff; font-size:18px; line-height:1.42; letter-spacing:-.01em; }
    .news-card p { color:#e2d9f3; font-size:15px; line-height:1.68; }
    .news-details { border-top:1px solid rgba(255,255,255,.14); padding-top:11px; }
    .news-details summary { color:#ddd6fe; font-weight:750; cursor:pointer; line-height:1.5; }
    .news-details summary:hover { color:#fff; }
    .news-details summary:focus-visible,.news-source:focus-visible { outline:3px solid #67e8f9; outline-offset:3px; border-radius:6px; }
    .news-details p { margin-top:10px; }
    .news-limit { color:#f5edff !important; background:rgba(255,255,255,.09); border-left:3px solid #a78bfa; border-radius:10px; padding:11px 12px; }
    .news-source { display:inline-flex; align-items:center; gap:6px; margin-top:auto; color:#67e8f9; font-size:13px; line-height:1.45; font-weight:750; text-decoration:none; }
    .news-source:hover { text-decoration:underline; }
    @media(max-width:680px) { .news-grid { grid-template-columns:1fr; } }

    /* ════════════════════════════════════════════════
       LANDING
       ════════════════════════════════════════════════ */
    #s-land {
      background:
        linear-gradient(180deg, rgba(30,3,54,.5) 0%, rgba(30,3,54,.55) 45%, rgba(30,3,54,.85) 100%),
        url('/static/fibrobot-bg.jpg') center/cover no-repeat,
        linear-gradient(165deg, #1e0336 0%, #3b0764 30%, #4c1d95 55%, #0e7490 100%);
    }
    .land-cta-login { width: 100%; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.35); border-radius: var(--radius-lg); padding: 15px; font-size: .95rem; font-weight: 700; cursor: pointer; color: #fff; transition: all .15s; margin-bottom: 12px; }
    .land-cta-login:hover { background: rgba(255,255,255,.24); }
    #s-land .content-wrap { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding: 32px 24px 28px; }
    .land-top { text-align: center; }
    .land-ribbon { font-size: 4.5rem; margin-bottom: 18px; filter: drop-shadow(0 6px 20px rgba(0,0,0,.35)); animation: pulse 3s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
    .land-title { font-size: 2.8rem; font-weight: 800; color: white; letter-spacing: -0.04em; line-height: 1; margin-bottom: 12px; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
    .land-sub { font-size: 1.05rem; color: rgba(255,255,255,.78); line-height: 1.7; margin-bottom: 28px; }
    .land-trust { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
    .trust-item { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-full); padding: 7px 12px; font-size: .75rem; color: rgba(255,255,255,.7); font-weight: 600; }
    button.trust-item { font-family: var(--font); cursor: pointer; }
    button.trust-item:hover { background: rgba(255,255,255,.2); color: white; }
    .land-bottom { width: 100%; max-width: 420px; margin: 0 auto; }
    .land-cta-main { width: 100%; background: white; color: var(--primary); border: none; border-radius: var(--radius-lg); padding: 18px; font-size: 1.05rem; font-weight: 800; cursor: pointer; box-shadow: 0 6px 30px rgba(0,0,0,.25); transition: all .2s; margin-bottom: 12px; }
    .land-cta-main:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
    .land-cta-sec { width: 100%; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25); border-radius: var(--radius-lg); padding: 14px; font-size: .9rem; font-weight: 600; cursor: pointer; color: rgba(255,255,255,.9); transition: all .15s; margin-bottom: 18px; }
    .land-cta-sec:hover { background: rgba(255,255,255,.2); }
    .land-disc { font-size: .72rem; color: rgba(255,255,255,.4); text-align: center; line-height: 1.6; }

    /* ════════════════════════════════════════════════
       ONBOARDING
       ════════════════════════════════════════════════ */
    #s-ob { background: linear-gradient(165deg, #1e0336 0%, #3b0764 30%, #4c1d95 55%, #0e7490 100%); }
    #s-ob .content-wrap { display: flex; flex-direction: column; min-height: 100%; padding: 16px 20px 24px; }
    .ob-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-shrink: 0; }
    .ob-back-btn { background: rgba(255,255,255,.12); border: none; border-radius: var(--radius-md); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; font-size: 1.2rem; transition: background .15s; }
    .ob-back-btn:hover { background: rgba(255,255,255,.22); }
    .ob-prog-wrap { flex: 1; background: rgba(255,255,255,.15); border-radius: 4px; height: 5px; overflow: hidden; }
    .ob-prog-fill { height: 100%; background: white; border-radius: 4px; transition: width .4s ease; }
    .ob-step-num { font-size: .75rem; color: rgba(255,255,255,.6); font-weight: 600; flex-shrink: 0; min-width: 44px; text-align: right; }
    .ob-content { flex: 1; overflow-y: auto; padding: 8px 0 20px; }
    .ob-q-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.55); margin-bottom: 10px; }
    .ob-q-title { font-size: 1.55rem; font-weight: 800; color: white; line-height: 1.25; margin-bottom: 8px; letter-spacing: -0.02em; }
    .ob-q-sub { font-size: .9rem; color: rgba(255,255,255,.65); line-height: 1.6; margin-bottom: 24px; }

    .choice-grid { display: flex; flex-direction: column; gap: 10px; }
    .choice-card {
      background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.18);
      border-radius: var(--radius-lg); padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 14px;
      transition: all .15s; backdrop-filter: blur(6px);
    }
    .choice-card:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
    .choice-card.sel { background: rgba(255,255,255,.25); border-color: white; box-shadow: 0 0 0 3px rgba(255,255,255,.2); }
    .choice-card .cc-ic { font-size: 1.8rem; flex-shrink: 0; }
    .choice-card .cc-body { flex: 1; }
    .choice-card .cc-lbl { font-size: 1rem; font-weight: 700; color: white; margin-bottom: 2px; }
    .choice-card .cc-sub { font-size: .78rem; color: rgba(255,255,255,.65); }
    .choice-card .cc-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .15s; }
    .choice-card.sel .cc-check { background: white; border-color: white; }
    .choice-card.sel .cc-check::after { content: '✓'; color: var(--primary); font-size: .8rem; font-weight: 900; }

    .chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
    .ob-chip {
      background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.2);
      border-radius: var(--radius-full); padding: 10px 16px; cursor: pointer;
      font-family: var(--font); font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.85);
      transition: all .15s; display: flex; align-items: center; gap: 6px;
    }
    .ob-chip:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
    .ob-chip.sel { background: white; border-color: white; color: var(--primary); }

    .ob-fi { background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.22); border-radius: var(--radius-md); padding: 14px 16px; color: white; font-size: 1rem; font-family: var(--font); outline: none; width: 100%; margin-bottom: 12px; transition: border-color .15s; backdrop-filter: blur(6px); }
    .ob-fi::placeholder { color: rgba(255,255,255,.4); }
    .ob-fi:focus { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.18); }
    .ob-fi-lbl { font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.65); margin-bottom: 6px; display: block; }

    .ob-num-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; }
    .ob-num { font-size: 3rem; font-weight: 800; color: white; min-width: 80px; text-align: center; }
    .ob-num-btn { background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.25); border-radius: 50%; width: 48px; height: 48px; font-size: 1.4rem; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
    .ob-num-btn:hover { background: rgba(255,255,255,.28); }

    .ob-footer { flex-shrink: 0; margin-top: 8px; }
    .ob-btn-next { width: 100%; background: white; color: var(--primary); border: none; border-radius: var(--radius-lg); padding: 16px; font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,.2); transition: all .2s; }
    .ob-btn-next:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(0,0,0,.28); }
    .ob-btn-next:disabled { opacity: .35; transform: none; cursor: not-allowed; }
    .ob-btn-skip { display: block; text-align: center; margin-top: 12px; font-size: .82rem; color: rgba(255,255,255,.5); cursor: pointer; font-weight: 600; }
    .ob-btn-skip:hover { color: rgba(255,255,255,.85); }

    .ob-summary { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 20px; backdrop-filter: blur(8px); }
    .ob-sum-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); align-items: flex-start; }
    .ob-sum-row:last-child { border-bottom: none; }
    .ob-sum-k { font-size: .76rem; color: rgba(255,255,255,.6); font-weight: 600; min-width: 100px; padding-top: 1px; }
    .ob-sum-v { font-size: .86rem; color: white; font-weight: 600; flex: 1; line-height: 1.4; }
    .ob-reg-btn { width: 100%; background: white; color: var(--primary); border: none; border-radius: var(--radius-lg); padding: 16px; font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,.2); transition: all .2s; margin-bottom: 12px; }
    .ob-reg-btn:hover { transform: translateY(-1px); }
    .ob-guest-btn { width: 100%; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.22); border-radius: var(--radius-lg); padding: 14px; font-size: .88rem; font-weight: 600; cursor: pointer; font-family: var(--font); color: rgba(255,255,255,.85); transition: all .15s; }
    .ob-guest-btn:hover { background: rgba(255,255,255,.18); }

    /* Privacy block in ob */
    .ob-privacy-block { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 16px; }
    .ob-privacy-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); align-items: flex-start; }
    .ob-privacy-row:last-child { border-bottom: none; }
    .ob-privacy-row .pp-ic { font-size: 1.4rem; flex-shrink: 0; }
    .ob-privacy-row .pp-txt { font-size: .86rem; color: rgba(255,255,255,.85); line-height: 1.5; }
    .ob-cb-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
    .ob-cb-row input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: white; }
    .ob-cb-row label { font-size: .78rem; color: rgba(255,255,255,.85); line-height: 1.45; margin: 0; }


    /* ════════════════════════════════════════════════
       DASHBOARD
       ════════════════════════════════════════════════ */
    .page-head { margin-bottom: 20px; }
    .page-head h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
    .page-head p { font-size: .92rem; color: var(--text-muted); margin-top: 2px; }

    /* ── Dashboard bento glassmorphism ── */
    #s-dash { background: radial-gradient(circle at 70% 10%, #3A2361 0%, #1A0B2E 70%); color: #E2D9F3; }
    #s-dash .content-wrap { padding-top: 16px; }
    .glass-panel { background: rgba(255,255,255,0.04); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; }
    .glass-card  { background: rgba(255,255,255,0.06); backdrop-filter: blur(8px);  border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; }

    .dash-top { background: none; border-radius: 0; padding: 0; box-shadow: none; margin-bottom: 16px; color: #E2D9F3; position: relative; overflow: visible; }
    .dash-top::before { display: none; }
    .dash-greet { margin-bottom: 12px; }
    .dash-greet h2 { font-size: 1.35rem; font-weight: 700; color: #E2D9F3; }
    .dash-greet p  { font-size: .82rem; opacity: .65; margin-top: 2px; color: #E2D9F3; }

    .dash-score-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
    .dash-score-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 16px; backdrop-filter: blur(8px); cursor: pointer; transition: background .15s; }
    .dash-score-card:hover { background: rgba(255,255,255,.14); }
    .dash-score-card .sc-lbl { font-size: .68rem; opacity: .7; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; color: #E2D9F3; }
    .dash-score-card .sc-val { font-size: 1.7rem; font-weight: 800; line-height: 1; color: #E2D9F3; }
    .dash-score-card .sc-sub { font-size: .72rem; opacity: .6; margin-top: 4px; color: #E2D9F3; }

    .ring-wrap { width: 100px; height: 100px; margin: 0 auto 8px; position: relative; }
    .ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
    .ring-wrap .bg-ring { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 8; }
    .ring-wrap .fg-ring { fill: none; stroke: #a78bfa; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
    .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .ring-center .rv { font-size: 1.6rem; font-weight: 800; color: #E2D9F3; line-height: 1; }
    .ring-center .rv-sub { font-size: .7rem; opacity: .6; color: #E2D9F3; }

    /* Carte assistant IA dans le dashboard */
    .dash-ai-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 14px; cursor: pointer; transition: background .15s; }
    .dash-ai-card:hover { background: rgba(255,255,255,.08); }
    .dash-ai-av { position: relative; flex-shrink: 0; }
    .dash-ai-av img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); box-shadow: 0 0 20px rgba(167,139,250,.35); }
    .dash-ai-av-dot { position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #22c55e; border-radius: 50%; border: 2px solid #1A0B2E; }
    .dash-ai-body { flex: 1; }
    .dash-ai-name { font-size: 1rem; font-weight: 800; color: #E2D9F3; }
    .dash-ai-bubble { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; border-top-left-radius: 3px; padding: 10px 14px; font-size: .82rem; color: rgba(226,217,243,.85); margin-top: 8px; line-height: 1.5; }
    .dash-ai-btn { background: rgba(167,139,250,.25); border: 1px solid rgba(167,139,250,.4); color: #c4b5fd; border-radius: 999px; padding: 8px 18px; font-size: .8rem; font-weight: 700; cursor: pointer; font-family: var(--font); transition: background .15s; margin-top: 10px; }
    .dash-ai-btn:hover { background: rgba(167,139,250,.4); }

    .bento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
    .bento-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 18px 14px; cursor: pointer; text-align: center; transition: background .15s, transform .12s; min-height: 105px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #E2D9F3; }
    .bento-card:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
    .bento-card.wide { grid-column: 1 / -1; flex-direction: row; text-align: left; justify-content: flex-start; gap: 14px; min-height: unset; padding: 14px 16px; }
    .bento-card .bc-ic { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
    .bento-card h3 { font-size: .9rem; font-weight: 700; color: #E2D9F3; }
    .bento-card p  { font-size: .78rem; color: rgba(226,217,243,.55); }

    .chart-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 18px; margin-bottom: 14px; }
    .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
    .chart-header h3 { font-size: 1rem; font-weight: 700; color: #E2D9F3; }
    .trend-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: #c4b5fd; background: rgba(167,139,250,.2); padding: 4px 10px; border-radius: var(--radius-full); }
    #s-dash .page-head h2 { color: #E2D9F3; }
    #s-dash .card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; color: #E2D9F3; }
    #s-dash .body-sm { color: rgba(226,217,243,.7) !important; }

    .bar-chart { display: flex; align-items: flex-end; gap: 5px; height: 90px; }
    .bcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .bcol .bfill { width: 100%; border-radius: 5px 5px 0 0; min-height: 4px; transition: height .5s ease; }
    .bcol .bfill.empty { background: var(--surface-container-high); opacity: .7; }
    .bcol .bfill.ok { background: linear-gradient(to top, #34d399, #6ee7b7); }
    .bcol .bfill.mid { background: linear-gradient(to top, #f59e0b, #fcd34d); }
    .bcol .bfill.hi { background: linear-gradient(to top, #f97316, #fb923c); }
    .bcol .bfill.bad { background: linear-gradient(to top, #ef4444, #f87171); }
    .bcol .bday { font-size: .65rem; color: var(--text-muted); }
    .bcol .bscore { font-size: .62rem; color: var(--text-muted); }

    .activity-list { display: flex; flex-direction: column; gap: 10px; }
    .activity-item {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
      padding: 14px 16px; box-shadow: var(--shadow-soft); display: flex; align-items: flex-start; gap: 12px;
    }
    .activity-item .ai-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-container-low); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; margin-top: 2px; }
    .activity-item .ai-body { flex: 1; }
    .activity-item h4 { font-size: .88rem; font-weight: 700; margin-bottom: 3px; }
    .activity-item p { font-size: .82rem; color: var(--text-muted); line-height: 1.55; }
    .activity-item .ai-date { font-size: .7rem; color: var(--outline); margin-top: 6px; display: block; }
    .activity-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
    .activity-tags span { background: var(--surface-container-low); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 8px; font-size: .7rem; font-weight: 600; color: var(--text); }

    /* ════════════════════════════════════════════════
       TRACKER
       ════════════════════════════════════════════════ */
    .track-head {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 60%, var(--secondary) 100%);
      border-radius: var(--radius-xl); padding: 22px 20px 70px; color: white; position: relative;
      box-shadow: var(--shadow-md); margin-bottom: 54px;
    }
    .track-head h2 { font-size: 1.25rem; font-weight: 700; }
    .track-head p { font-size: .82rem; opacity: .8; margin-top: 2px; }
    .track-ring-wrap { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); }
    .track-ring-wrap .ring-wrap { width: 110px; height: 110px; filter: drop-shadow(0 6px 18px rgba(99,14,212,.25)); }
    .track-ring-wrap .bg-ring { stroke: #e8e3f5; }
    .track-ring-wrap .fg-ring { stroke: var(--primary-container); }
    .track-ring-wrap .ring-center .rv { color: var(--text); }
    .track-ring-wrap .ring-center .rv-sub { color: var(--text-muted); }

    .track-body { padding-bottom: 20px; }
    .track-lbl { text-align: center; font-size: .8rem; color: var(--text-muted); margin-bottom: 18px; }

    .saved-ok { text-align: center; font-size: .86rem; color: var(--secondary); display: none; margin-bottom: 14px; font-weight: 600; background: var(--secondary-fixed); padding: 8px; border-radius: var(--radius-md); }
    .track-results-card { margin-top: 16px; overflow: hidden; }
    .track-results-scroll { overflow-x: auto; }
    .track-results-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .8rem; }
    .track-results-table th { padding: 10px 9px; text-align: left; color: var(--text-muted); background: var(--surface-container-low); border-bottom: 1px solid var(--border); white-space: nowrap; }
    .track-results-table td { padding: 10px 9px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .track-results-table tr:last-child td { border-bottom: 0; }
    .track-score-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 4px 8px; border-radius: 999px; font-weight: 800; }
    .track-score-pill.ok { color: #047857; background: #d1fae5; }
    .track-score-pill.mid { color: #92400e; background: #fef3c7; }
    .track-score-pill.hi { color: #b91c1c; background: #fee2e2; }
    .track-details { min-width: 245px; }
    .track-details summary { cursor: pointer; color: var(--primary-container); font-weight: 700; }
    .track-details-grid { display: grid; gap: 5px; margin-top: 9px; padding: 10px; background: var(--surface-container-low); border-radius: var(--radius-md); }
    .track-detail-row { display: flex; justify-content: space-between; gap: 12px; }
    .track-detail-row span:last-child { font-weight: 800; white-space: nowrap; }
    .track-result-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text-muted); line-height: 1.45; white-space: normal; }
    .track-results-empty { padding: 18px; color: var(--text-muted); text-align: center; font-size: .84rem; }
    .dark .track-score-pill.ok { color: #a7f3d0; background: rgba(16,185,129,.2); }
    .dark .track-score-pill.mid { color: #fde68a; background: rgba(245,158,11,.2); }
    .dark .track-score-pill.hi { color: #fecaca; background: rgba(239,68,68,.2); }
    .track-scale-help { margin: 12px 0 16px; padding: 14px 16px; border: 1px solid rgba(167,139,250,.45); border-radius: var(--radius-lg); background: rgba(124,58,237,.12); color: #f0e8ff; font-size: .86rem; line-height: 1.55; }
    .track-scale-help strong { display: block; color: #fff; margin-bottom: 4px; }
    .track-scale-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: .76rem; font-weight: 800; }
    .track-scale-line span:first-child { color: #6ee7b7; }
    .track-scale-line span:last-child { color: #fca5a5; text-align: right; }
    .track-detail-panel { margin: 16px 0; border: 1px solid rgba(167,139,250,.4); border-radius: var(--radius-lg); background: rgba(255,255,255,.06); overflow: hidden; }
    .track-detail-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; cursor: pointer; color: #fff; background: rgba(124,58,237,.18); font-size: .9rem; font-weight: 800; list-style: none; }
    .track-detail-panel > summary::-webkit-details-marker { display: none; }
    .track-detail-panel > summary::after { content: 'Masquer ▲'; color: #ddd6fe; font-size: .74rem; white-space: nowrap; }
    .track-detail-panel:not([open]) > summary::after { content: 'Afficher ▼'; }
    .track-detail-content { padding: 12px; }
    .track-live-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 4px; padding: 11px 13px; border-radius: var(--radius-md); background: rgba(255,255,255,.07); color: rgba(240,232,255,.82); font-size: .8rem; }
    .track-live-total strong { color: #fff; font-size: 1rem; }

    /* ════════════════════════════════════════════════
       CHAT
       ════════════════════════════════════════════════ */
    #s-chat { background: linear-gradient(160deg, #1e1030 0%, #160d28 50%, #0e1535 100%); }
    .chat-wrap { display: flex; flex-direction: column; height: 100%; background: transparent; }
    @media (min-width: 900px) { .chat-wrap { margin: 16px; border-radius: 32px; overflow: hidden; box-shadow: 0 8px 40px rgba(45,27,75,0.15); } }
    .chat-header { display: flex; align-items: center; gap: 18px; padding: 20px 24px; background: rgba(30,16,48,0.8); border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
    .chat-av-wrap { position: relative; flex-shrink: 0; }
    .chat-av-wrap img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid white; box-shadow: 0 0 0 4px rgba(168,85,247,0.2), 0 4px 16px rgba(124,58,237,0.3); display: block; }
    .chat-av-online { position: absolute; bottom: 4px; right: 4px; width: 14px; height: 14px; background: #22c55e; border-radius: 50%; border: 3px solid #1e1030; }
    .chat-header-name { font-size: 1.4rem; font-weight: 800; color: #f0e8ff; }
    .chat-header-sub { font-size: .8rem; color: rgba(240,232,255,0.55); margin-top: 2px; }
    .chat-header-status { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
    .chat-header-status .dot { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; display: inline-block; }
    .chat-header-status span { font-size: .75rem; font-weight: 600; color: #16a34a; }
    .agents-bar {
      background: rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.15); padding: 10px 12px;
      display: flex; gap: 8px; overflow-x: auto; flex-shrink: 0; scrollbar-width: none;
    }
    .agents-bar::-webkit-scrollbar { display: none; }
    .agent-pill {
      display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.15);
      border-radius: var(--radius-full); padding: 7px 14px; cursor: pointer; white-space: nowrap;
      font-family: var(--font); font-size: .8rem; font-weight: 600; color: rgba(226,217,243,0.75); transition: all .15s; flex-shrink: 0;
    }
    .agent-pill .av { font-size: 16px; }
    .agent-pill.on { background: var(--primary-container); border-color: var(--primary-container); color: var(--on-primary); }
    .agent-pill:hover:not(.on) { border-color: var(--primary-container); color: #E2D9F3; background: rgba(255,255,255,0.12); }

    .chat-warn { background: rgba(217,119,6,.12); border-bottom: 1px solid rgba(217,119,6,.25); padding: 6px 14px; font-size: .72rem; color: #fcd34d; text-align: center; flex-shrink: 0; }
    #msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
    .mb { display: flex; gap: 8px; max-width: 88%; align-items: flex-end; }
    .mb.me { align-self: flex-end; flex-direction: row-reverse; }
    .mb .av-b { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; margin-bottom: 2px; border: 2px solid white; box-shadow: 0 2px 8px rgba(124,58,237,0.2); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #c4b5fd; }
    .mb .av-b img { width: 100%; height: 100%; object-fit: cover; }
    .mb .bubble { padding: 14px 18px; border-radius: 20px; font-size: .9rem; line-height: 1.65; white-space: pre-wrap; }
    .mb.bot .bubble { background: linear-gradient(135deg, #4c1d95, #6d28d9); color: #f0e8ff; border-bottom-left-radius: 5px; box-shadow: 0 2px 12px rgba(109,40,217,0.3); }
    .mb.bot .bubble .flag-b { color: rgba(240,232,255,0.4); }
    .mb.bot .bubble .flag-b:hover { color: #fca5a5; opacity: 1; }
.mb.me .bubble { background: rgba(255,255,255,0.65); backdrop-filter: blur(8px); color: #2D1B4B; border: 1px solid rgba(255,255,255,0.5); border-bottom-right-radius: 5px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
    .dark .mb.me .bubble { background: rgba(255,255,255,0.1); color: var(--text); }
    .mod-tag { display: inline-block; margin: 4px 4px 0 0; font-size: .68rem; color: var(--secondary); background: var(--secondary-fixed); padding: 2px 8px; border-radius: var(--radius-sm); font-weight: 600; }
    .flag-b { display: block; margin-top: 8px; background: none; border: none; color: var(--text-muted); font-size: .68rem; cursor: pointer; padding: 2px 0; opacity: .4; text-align: left; font-family: var(--font); }
    .flag-b:hover { opacity: 1; color: var(--error); }
    .speak-b { display: block; margin-top: 8px; background: none; border: none; color: var(--text-muted); font-size: .68rem; cursor: pointer; padding: 2px 0; opacity: .55; text-align: left; font-family: var(--font); }
    .speak-b:hover { opacity: 1; color: #a855f7; }
    .mb.bot .bubble .speak-b { color: rgba(240,232,255,0.55); }
    .mb.bot .bubble .speak-b:hover { color: #d8b4fe; opacity: 1; }
    .chat-sources { display: grid; gap: 7px; margin-top: 12px; }
    .chat-source {
      display: flex; align-items: center; gap: 8px; padding: 9px 11px;
      border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
      color: #f0e8ff; background: rgba(255,255,255,.08); text-decoration: none;
      font-size: .75rem; line-height: 1.35;
    }
    .chat-source:hover { background: rgba(255,255,255,.14); }
    .chat-source-num { font-weight: 800; color: #c4b5fd; flex-shrink: 0; }
    .chat-retry { margin-top: 10px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font: 700 .75rem var(--font); cursor: pointer; }
    .chat-retry:hover { background: rgba(255,255,255,.18); }
    .typing { display: none; align-items: center; gap: 5px; padding: 11px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; border-bottom-left-radius: 5px; align-self: flex-start; width: 58px; box-shadow: var(--shadow-soft); }
    .typing span { width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%; animation: bop 1.2s infinite; }
    .typing span:nth-child(2) { animation-delay: .2s; }
    .typing span:nth-child(3) { animation-delay: .4s; }
    @keyframes bop { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }

    .chat-chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 0; scrollbar-width: none; flex-shrink: 0; }
    .chat-chips::-webkit-scrollbar { display: none; }
    .chat-chip { padding: 8px 16px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; cursor: pointer; border: none; font-family: var(--font); transition: all .15s; }
    .chat-chip.primary { background: #5B8D88; color: white; }
    .chat-chip.primary:hover { background: #4a736f; }
    .chat-chip.outline { background: rgba(255,255,255,0.08); border: 1.5px solid rgba(168,85,247,0.35); color: #f0e8ff; }
    .chat-chip.outline:hover { background: rgba(255,255,255,0.15); }
    #chat-form { padding: 12px 16px 14px; background: rgba(30,16,48,0.9); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.07); display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
    #mic-btn, #attach-btn { background: rgba(168,85,247,0.15); border: none; border-radius: 50%; width: 42px; height: 42px; cursor: pointer; color: #7c3aed; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; }
    #mic-btn:hover, #attach-btn:hover { background: rgba(168,85,247,0.25); }
    #mic-btn.rec { background: rgba(239,68,68,0.28); color: #fca5a5; animation: micpulse 1s ease-in-out infinite; }
    @keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }
    #attach-btn { display: none; }
    .chat-input-wrap { flex: 1; position: relative; display: flex; align-items: center; }
    #chat-in { width: 100%; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.15); border-radius: 999px; padding: 12px 50px 12px 20px; color: #f0e8ff; font-size: .9rem; font-family: var(--font); resize: none; outline: none; max-height: 100px; line-height: 1.5; transition: box-shadow .15s; }
    #chat-in:focus { box-shadow: 0 0 0 3px rgba(168,85,247,0.3); border-color: rgba(168,85,247,0.5); }
    #chat-in::placeholder { color: rgba(240,232,255,0.35); }
    #send { position: absolute; right: 6px; background: #7c3aed; border: none; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; color: white; font-size: .85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; box-shadow: 0 2px 8px rgba(124,58,237,0.4); }
    #send:hover { background: #6d28d9; }
    #send:disabled { opacity: .35; cursor: not-allowed; }
    @media (max-width: 520px) {
      .chat-header { gap: 12px; padding: 12px 14px; }
      .chat-av-wrap img { width: 48px; height: 48px; }
      .chat-header-name { font-size: 1.1rem; }
      .agents-bar { padding: 8px 10px; }
      #chat-form { gap: 7px; padding: 10px; }
      #mic-btn, #attach-btn { width: 40px; height: 40px; }
      .mb { max-width: 96%; }
    }

    /* ════════════════════════════════════════════════
       JOURNAL
       ════════════════════════════════════════════════ */
    .new-entry { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 20px; box-shadow: var(--shadow-soft); }
    .ne-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
    .ne-lbl { font-size: .92rem; font-weight: 700; }
    .ne-mood { display: flex; gap: 6px; }
    .mood-b { background: var(--surface-container-low); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 6px 12px; cursor: pointer; font-size: 1.1rem; transition: all .15s; }
    .mood-b:hover { border-color: var(--primary-container); }
    .mood-b.on { border-color: var(--primary-container); background: var(--primary-fixed); }
    .jtxt { width: 100%; min-height: 110px; background: var(--surface-container-low); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; font-family: var(--font); font-size: .9rem; color: var(--text); resize: vertical; outline: none; line-height: 1.65; margin-bottom: 12px; transition: border-color .15s; }
    .jtxt:focus { border-color: var(--secondary); background: var(--surface); }
    .j-entries { display: flex; flex-direction: column; gap: 10px; }
    .je { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-soft); }
    .je-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .je-date { font-size: .72rem; color: var(--text-muted); font-weight: 700; }
    .je-mood { font-size: 1rem; }
    .je-text { font-size: .87rem; line-height: 1.65; color: var(--text); white-space: pre-wrap; }
    .j-empty { text-align: center; padding: 32px 16px; color: var(--text-muted); font-size: .88rem; }

    /* ════════════════════════════════════════════════
       PROFIL
       ════════════════════════════════════════════════ */
    .prof-head {
      background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary-container) 60%, var(--secondary) 100%);
      border-radius: var(--radius-xl); padding: 28px 20px; text-align: center; color: white;
      box-shadow: var(--shadow-md); margin-bottom: 20px;
    }
    .prof-av { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
    .prof-name { font-size: 1.25rem; font-weight: 800; }
    .prof-sub { font-size: .82rem; opacity: .75; margin-top: 3px; }
    .pcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow-soft); }
    .pcard h3 { font-size: .72rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; }
    .prow { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
    .prow:last-child { border-bottom: none; }
    .prow .pk { color: var(--text-muted); }
    .prow .pv { font-weight: 700; text-align: right; max-width: 55%; }
    .clvl { display: flex; gap: 8px; margin: 12px 0; }
    .clt { flex: 1; padding: 10px 6px; border-radius: var(--radius-md); border: 1.5px solid var(--border); background: var(--surface-container-low); color: var(--text-muted); font-size: .72rem; font-family: var(--font); cursor: pointer; text-align: center; transition: all .15s; line-height: 1.5; }
    .clt.on { border-color: var(--primary-container); background: var(--primary-fixed); color: var(--primary); font-weight: 700; }
    .pnote { font-size: .77rem; color: var(--text-muted); line-height: 1.6; margin-top: 8px; }

    /* ════════════════════════════════════════════════
       NUTRITION
       ════════════════════════════════════════════════ */
    /* ── Style glassmorphism violet commun à tous les onglets ── */
    #s-jour, #s-track, #s-nutri, #s-prog, #s-learn, #s-asso, #s-prof, #s-dons, #s-quiz, #s-painmap, #s-activity {
      background: radial-gradient(circle at 70% 10%, #3A2361, #1A0B2E);
      color: #E2D9F3;
    }
    #s-jour .content-wrap, #s-track .content-wrap, #s-nutri .content-wrap,
    #s-prog .content-wrap, #s-learn .content-wrap, #s-asso .content-wrap,
    #s-prof .content-wrap, #s-dons .content-wrap, #s-quiz .content-wrap,
    #s-painmap .content-wrap, #s-activity .content-wrap { color: #E2D9F3; }

    /* Cards glassmorphism sur fond sombre */
    #s-jour .card, #s-track .card, #s-nutri .card, #s-prog .card,
    #s-learn .card, #s-asso .card, #s-prof .card, #s-quiz .card,
    #s-painmap .card, #s-activity .card,
    #s-jour .pcard, #s-prof .pcard, #s-asso .pcard {
      background: rgba(255,255,255,0.06) !important;
      border: 1px solid rgba(255,255,255,0.12) !important;
      color: #E2D9F3 !important;
      box-shadow: none !important;
    }
    #s-jour .page-head h2, #s-track .page-head h2, #s-nutri .page-head h2,
    #s-prog .page-head h2, #s-learn .page-head h2, #s-asso .page-head h2,
    #s-prof .page-head h2, #s-prof .pcard h3, #s-quiz .section-head h2,
    #s-painmap .section-head h2, #s-activity .section-head h2 { color: #E2D9F3 !important; }
    #s-prof .prow .pk, #s-prof .prow .pv, #s-prof .pnote { color: rgba(226,217,243,0.65) !important; }
    #s-prof .btn-ghost { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #E2D9F3; }
    #s-prof .btn-danger { background: rgba(239,68,68,0.25); border-color: rgba(239,68,68,0.4); }
    #s-prof .prof-av { background: linear-gradient(135deg, #7c3aed, #a855f7); }
    #s-prof .prof-name, #s-prof .prof-sub { color: #E2D9F3 !important; }
    #s-prof .clvl .clt { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: #E2D9F3; }
    #s-prof .clvl .clt.on { background: rgba(167,139,250,0.35); border-color: #a78bfa; }
    #s-prof .text-link, #s-dons .text-link { color: #c4b5fd; }

    .section-head { background: none; border-radius: 0; padding: 16px 0 12px; box-shadow: none; margin-bottom: 4px; }
    .section-head h2 { font-size: 1.4rem; font-weight: 800; color: #E2D9F3; }
    .section-head p { font-size: .85rem; opacity: .6; margin-top: 2px; color: #E2D9F3; }

    /* Heatmap tracker */
    .heatmap-wrap { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 16px; margin-bottom: 16px; overflow-x: auto; }
    .heatmap-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
    .heatmap-table th { color: rgba(226,217,243,0.55); font-weight: 600; text-align: center; padding: 4px 6px; }
    .heatmap-table td.row-label { color: rgba(226,217,243,0.7); font-weight: 600; padding: 4px 8px 4px 0; white-space: nowrap; font-size: .72rem; }
    .hm-cell { border-radius: 8px; text-align: center; padding: 6px 4px; min-width: 36px; font-weight: 600; font-size: .72rem; cursor: pointer; }
    .hm-cell.hm-empty { background: rgba(255,255,255,0.06); color: rgba(226,217,243,0.3); }
    .hm-cell.hm-ok  { background: rgba(52,211,153,0.25); color: #6ee7b7; }
    .hm-cell.hm-mid { background: rgba(251,191,36,0.25); color: #fcd34d; }
    .hm-cell.hm-hi  { background: rgba(248,113,113,0.25); color: #fca5a5; }

    /* Slider cards tracker */
    .slider-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
    .slider-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .slider-card .sl-emoji { font-size: 1.8rem; }
    .slider-card .sl-label { font-size: .72rem; font-weight: 700; color: rgba(226,217,243,0.7); }
    .slider-card .sl-val { font-size: 1.1rem; font-weight: 800; color: #a78bfa; }
    .slider-card input[type=range] { width: 100%; accent-color: #a78bfa; cursor: pointer; }
    .slider-card .sl-sub { font-size: .62rem; color: rgba(226,217,243,0.45); font-weight: 600; margin-top: -2px; }
    .step-ctrl { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
    .step-btn { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid rgba(167,139,250,0.5); background: rgba(167,139,250,0.14); color: #c9b8ff; font-size: 1.35rem; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; user-select: none; transition: background .12s, transform .05s; }
    .step-btn:hover { background: rgba(167,139,250,0.28); }
    .step-btn:active { transform: scale(0.92); }
    .step-ctrl-row { justify-content: flex-end; gap: 12px; }
    .step-ctrl-row .qi-val { min-width: 22px; text-align: center; font-size: 1.05rem; font-weight: 800; color: #a78bfa; }
    .qi-max { font-size: .72rem; color: rgba(226,217,243,0.4); font-weight: 700; }
    @media (max-width: 560px) { .slider-cards { grid-template-columns: repeat(2,1fr); } }
    
    /* Grille des 12 questions */
    .all-questions-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }
    .question-item { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
    .question-item .q-emoji { font-size: 1.8rem; }
    .question-item .q-label { font-size: .78rem; font-weight: 700; color: rgba(226,217,243,0.9); }
    .question-item .step-ctrl-row { justify-content: center; gap: 10px; margin-top: 4px; }
    .question-item .step-ctrl-row .qi-val { min-width: 28px; text-align: center; font-size: 1.1rem; font-weight: 800; color: #a78bfa; }
    .question-item .qi-max { font-size: .72rem; color: rgba(226,217,243,0.5); font-weight: 600; }
    @media (max-width: 768px) { .all-questions-grid { grid-template-columns: repeat(2,1fr); } }

    /* Bilan médical (quiz ACR/FIQ-R/comorbidités) */
    .qz-section { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
    .qz-section h3 { font-size: .92rem; margin: 0 0 3px; color: #E2D9F3; }
    .qz-instr { font-size: .76rem; color: rgba(226,217,243,0.55); margin-bottom: 12px; }
    .qz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .qz-item-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .qz-item-row:last-child { border-bottom: none; }
    .qz-item-label { font-size: .8rem; color: rgba(226,217,243,0.9); flex: 1; }
    .qz-scale { display: flex; gap: 6px; flex-wrap: wrap; }
    .chip-sm { padding: 5px 10px; font-size: .7rem; }
    .qz-yesno { display: flex; gap: 8px; margin-top: 6px; }
    .qz-eva-val { text-align: center; font-size: 2rem; font-weight: 800; color: #a78bfa; margin: 6px 0; }
    @media (max-width: 480px) { .all-questions-grid { grid-template-columns: 1fr; } }

    /* Carte de la douleur */
    .painmap-group { margin-bottom: 18px; }
    .painmap-group h3 { font-size: .82rem; color: rgba(226,217,243,0.6); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
    .painmap-grid { display: flex; flex-direction: column; }
    .painmap-zone { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; margin-bottom: 8px; }
    .painmap-zone .pz-label { flex: 1; font-size: .82rem; color: rgba(226,217,243,0.9); }
    .painmap-zone .pz-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; transition: background .15s; }
    .painmap-history-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(255,255,255,0.05); border-radius: 12px; margin-bottom: 8px; font-size: .82rem; }
    .painmap-history-row .phr-zones { color: rgba(226,217,243,0.6); font-size: .74rem; }
    
    .btn-enregister { width: 100%; padding: 16px; background: linear-gradient(135deg, #7c3aed, #a855f7); color: white; border: none; border-radius: 999px; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: var(--font); box-shadow: 0 4px 20px rgba(124,58,237,0.4); transition: opacity .15s; margin-bottom: 16px; }
    .btn-enregister:hover { opacity: .9; }

    /* Journal glassmorphism */
    .jour-date-bar { font-size: 1rem; font-weight: 700; color: rgba(226,217,243,0.8); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
    .jour-mood-row { display: flex; gap: 10px; margin-bottom: 12px; }
    .jour-mood-btn { background: rgba(255,255,255,0.07); border: 2px solid transparent; border-radius: 50%; width: 42px; height: 42px; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
    .jour-mood-btn.on { border-color: #a78bfa; background: rgba(167,139,250,0.2); transform: scale(1.15); }
    .jtxt { width: 100%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; padding: 14px; color: #E2D9F3; font-family: var(--font); font-size: .9rem; resize: none; outline: none; min-height: 110px; line-height: 1.6; transition: border-color .15s; }
    .jtxt::placeholder { color: rgba(226,217,243,0.35); }
    .jtxt:focus { border-color: #a78bfa; background: rgba(255,255,255,0.1); }
    .j-entry-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 14px 16px; cursor: pointer; transition: background .15s; margin-bottom: 10px; }
    .j-entry-card:hover { background: rgba(255,255,255,0.1); }
    .j-entry-card .jec-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .j-entry-card .jec-date { font-size: .75rem; font-weight: 700; color: rgba(226,217,243,0.55); }
    .j-entry-card .jec-text { font-size: .84rem; color: rgba(226,217,243,0.8); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* Nutrition glassmorphism */
    .nutri-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; margin-bottom: 16px; }
    .nutri-scroll::-webkit-scrollbar { display: none; }
    .nutri-card-gl { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 0; overflow: hidden; min-width: 180px; cursor: pointer; transition: transform .15s; flex-shrink: 0; }
    .nutri-card-gl:hover { transform: translateY(-3px); }
    .nutri-card-gl .nc-img { height: 110px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
    .nutri-card-gl .nc-body { padding: 10px 12px; }
    .nutri-card-gl h3 { font-size: .82rem; font-weight: 700; color: #E2D9F3; margin-bottom: 6px; }
    .nutri-card-gl .nc-tag { display: inline-block; font-size: .62rem; background: rgba(167,139,250,0.2); color: #c4b5fd; border-radius: 999px; padding: 2px 8px; margin-right: 4px; margin-bottom: 4px; }
    .hydra-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 18px 20px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 16px; }
    .hydra-card .hydra-icon { font-size: 2.2rem; flex-shrink: 0; }
    .hydra-bar-wrap { flex: 1; }
    .hydra-label { font-size: .8rem; color: rgba(226,217,243,0.6); margin-bottom: 6px; }
    .hydra-bar { height: 10px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; }
    .hydra-fill { height: 100%; background: linear-gradient(90deg, #60a5fa, #93c5fd); border-radius: 999px; width: 0%; transition: width .35s ease; }
    .hydra-val { font-size: .85rem; font-weight: 700; color: #93c5fd; margin-top: 4px; }
    .hydra-actions { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
    .hydra-btn { background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.4); color: #bfdbfe; border-radius: 999px; padding: 7px 12px; font-size: .8rem; font-weight: 700; cursor: pointer; font-family: var(--font); }
    .hydra-btn:hover { background: rgba(96,165,250,0.28); }
    .hydra-reset { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: rgba(226,217,243,0.7); }
    .nudge { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(167,139,250,0.16); border: 1px solid rgba(167,139,250,0.35); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; font-size: .86rem; color: #e9e2ff; cursor: pointer; }
    .nudge-x { cursor: pointer; opacity: .6; padding: 0 4px; flex-shrink: 0; }
    .nudge-x:hover { opacity: 1; }
    /* Démarches MDPH */
    #s-demarches { background: radial-gradient(circle at 70% 10%, #3A2361, #1A0B2E); color: #E2D9F3; }
    #s-demarches .content-wrap { color: #E2D9F3; }
    #s-demarches .pcard { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #E2D9F3; box-shadow: none; border-radius: 18px; padding: 18px 20px; margin-bottom: 14px; }
    #s-demarches .pcard h3 { color: #E2D9F3 !important; }
    #s-demarches .pnote { color: rgba(226,217,243,0.6); }
    .dem-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.07); cursor: pointer; }
    .dem-item:last-child { border-bottom: none; }
    .dem-check { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid rgba(167,139,250,0.5); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .9rem; margin-top: 1px; color: transparent; }
    .dem-item.done .dem-check { background: #a78bfa; border-color: #a78bfa; color: #fff; }
    .dem-item.done .dem-lbl { text-decoration: line-through; opacity: .55; }
    .dem-lbl { font-size: .88rem; line-height: 1.45; }
    .dem-progress { margin-top: 14px; font-size: .82rem; color: rgba(226,217,243,0.75); font-weight: 700; }
    .dem-date { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 9px 12px; color: #E2D9F3; font-family: var(--font); font-size: .9rem; color-scheme: dark; }
    .dem-deadline { margin-top: 12px; font-size: .9rem; line-height: 1.55; }
    .dem-topics { display: flex; flex-direction: column; gap: 10px; }
    .dem-topic { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; overflow: hidden; }
    .dem-topic summary { list-style: none; cursor: pointer; padding: 14px 16px; font-size: .88rem; font-weight: 700; color: #E2D9F3; display: flex; align-items: center; gap: 10px; }
    .dem-topic summary::-webkit-details-marker { display: none; }
    .dem-topic summary::after { content: '›'; margin-left: auto; font-size: 1.3rem; transform: rotate(90deg); transition: transform .15s; color: rgba(226,217,243,0.5); }
    .dem-topic[open] summary::after { transform: rotate(-90deg); }
    .dem-topic .dt-body { padding: 0 16px 16px; font-size: .82rem; line-height: 1.6; color: rgba(226,217,243,0.75); }
    .dem-topic .dt-tip { margin-top: 8px; font-size: .78rem; color: #c9b8ff; }
    .dd-ok { color: #6ee7b7; font-weight: 700; }
    .dd-warn { color: #fcd34d; font-weight: 700; }
    .dd-late { color: #fca5a5; font-weight: 700; }
    .conseil-card { background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.25); border-radius: 20px; padding: 16px 20px; display: flex; gap: 12px; align-items: flex-start; }
    .conseil-card .conseil-icon { font-size: 1.6rem; flex-shrink: 0; }
    .conseil-card h4 { font-size: .85rem; font-weight: 800; color: #c4b5fd; margin-bottom: 4px; }
    .conseil-card p { font-size: .8rem; color: rgba(226,217,243,0.7); line-height: 1.5; }

    /* Onglet Dons / Soutenir */
    .dons-goal-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(167,139,250,0.3); border-radius: 20px; padding: 20px; margin-bottom: 18px; }
    .dons-goal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
    .dons-goal-head h3 { font-size: .95rem; font-weight: 800; color: #c4b5fd; }
    .dons-goal-amount { font-size: .9rem; font-weight: 800; color: #E2D9F3; }
    .dons-bar { height: 14px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; overflow: hidden; }
    .dons-bar-fill { height: 100%; min-width: 4px; background: linear-gradient(90deg, #7c3aed, #a78bfa); border-radius: 999px; transition: width .6s ease; }
    .dons-goal-note { margin-top: 10px; font-size: .8rem; color: rgba(226,217,243,0.7); line-height: 1.5; }
    .dons-kofi-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px; margin: 18px 0 10px; background: linear-gradient(90deg, #7c3aed, #a855f7); color: #fff; font-size: 1rem; font-weight: 800; font-family: var(--font); border: none; border-radius: 16px; cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s; }
    .dons-kofi-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,0.45); }
    .dons-transparence { font-size: .78rem; color: rgba(226,217,243,0.55); text-align: center; line-height: 1.5; }

    /* Progress glassmorphism */
    .sparkline-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
    .sparkline-card { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 20px; padding: 16px 14px; }
    .sparkline-card h4 { font-size: .75rem; font-weight: 700; color: rgba(226,217,243,0.6); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
    .sparkline-card .sp-val { font-size: 1.1rem; font-weight: 800; color: #E2D9F3; }
    .sparkline-card .sp-sub { font-size: .68rem; color: rgba(226,217,243,0.45); }
    .sparkline-svg { width: 100%; height: 50px; margin: 8px 0; }
    .streak-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 18px 20px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; }
    .streak-card .streak-fire { font-size: 2.4rem; }
    .streak-card .streak-num { font-size: 1.6rem; font-weight: 900; color: #fb923c; }
    .streak-card .streak-lbl { font-size: .82rem; color: rgba(226,217,243,0.65); }
    .badges-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .badge-chip { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; padding: 8px 14px; font-size: .78rem; font-weight: 600; color: rgba(226,217,243,0.8); display: flex; align-items: center; gap: 6px; }

    /* Learn glassmorphism */
    .learn-grid-gl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .learn-card-gl { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; padding: 22px 18px; cursor: pointer; transition: background .15s, transform .12s; display: flex; align-items: center; gap: 16px; }
    .learn-card-gl:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
    .learn-card-gl .lcg-icon { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; }
    .learn-card-gl h3 { font-size: .9rem; font-weight: 800; color: #E2D9F3; margin-bottom: 4px; }
    .learn-card-gl p { font-size: .75rem; color: rgba(226,217,243,0.55); line-height: 1.4; }
    .learn-card-gl .lcg-arrow { margin-left: auto; font-size: 1rem; color: rgba(226,217,243,0.3); flex-shrink: 0; }

    /* Asso glassmorphism */
    #s-asso .asso-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #E2D9F3; }
    #s-asso .asso-card:hover { border-color: #a78bfa; background: rgba(255,255,255,0.1); }
    #s-asso .asso-name { color: #E2D9F3; }
    #s-asso .asso-desc { color: rgba(226,217,243,0.55); }
    #s-asso .asso-link { color: #a78bfa; }
    #s-asso .partner-badge { background: rgba(167,139,250,0.25); color: #c4b5fd; }
    #s-asso h3 { color: rgba(226,217,243,0.6) !important; }

    .nutri-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
    /* Nutrition v2 */
    .nutri-block { margin-bottom: 24px; }
    .nb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
    .nb-ic { font-size: 1.3rem; }
    .nb-head h3 { font-size: 1.02rem; font-weight: 800; color: #E2D9F3; }
    .nb-sub { font-size: .8rem; color: rgba(226,217,243,0.55); margin-bottom: 12px; }
    .nb-note { font-size: .82rem; color: rgba(226,217,243,0.55); padding: 10px 2px; }
    .pantry-rayon { margin-bottom: 10px; }
    .pantry-rayon h5 { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(226,217,243,0.45); font-weight: 800; margin-bottom: 6px; }
    .ing-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .ing-chip { border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: #E2D9F3; border-radius: 999px; padding: 7px 12px; font-size: .82rem; cursor: pointer; font-family: var(--font); transition: all .12s; }
    .ing-chip:hover { border-color: rgba(167,139,250,0.5); }
    .ing-chip.on { background: rgba(167,139,250,0.22); border-color: #a78bfa; color: #e9e2ff; font-weight: 700; }
    .pantry-add { display: flex; gap: 8px; margin: 12px 0; }
    .pantry-add input { flex: 1; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 10px 12px; color: #E2D9F3; font-family: var(--font); outline: none; font-size: .85rem; }
    .pantry-add input::placeholder { color: rgba(226,217,243,0.4); }
    .pantry-add-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: #E2D9F3; border-radius: 12px; padding: 0 16px; font-weight: 700; cursor: pointer; font-family: var(--font); }
    .nutri-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
    .match-btn { flex: 1; min-width: 150px; background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; border: none; border-radius: 999px; padding: 13px; font-weight: 700; cursor: pointer; font-family: var(--font); font-size: .9rem; box-shadow: 0 4px 16px rgba(124,58,237,0.35); }
    .suggest-btn { flex: 1; min-width: 150px; background: rgba(255,255,255,0.07); color: #E2D9F3; border: 1px solid rgba(167,139,250,0.4); border-radius: 999px; padding: 13px; font-weight: 700; cursor: pointer; font-family: var(--font); font-size: .9rem; }
    .suggest-btn:hover { background: rgba(167,139,250,0.15); }
    .match-group { margin-top: 14px; }
    .match-group h5 { font-size: .8rem; font-weight: 800; color: rgba(226,217,243,0.7); margin-bottom: 8px; }
    .match-card { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 11px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .12s; }
    .match-card:hover { border-color: rgba(167,139,250,0.5); }
    .mc-emoji { font-size: 1.6rem; }
    .mc-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
    .mc-body strong { font-size: .9rem; color: #E2D9F3; }
    .mc-miss { font-size: .75rem; color: #fcd34d; }
    .mc-ok { font-size: .75rem; color: #6ee7b7; }
    .mc-arrow { color: rgba(226,217,243,0.4); font-size: 1.3rem; }
    .filter-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
    .filter-chip { border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: #E2D9F3; border-radius: 999px; padding: 6px 13px; font-size: .8rem; cursor: pointer; font-family: var(--font); }
    .filter-chip.on { background: rgba(167,139,250,0.22); border-color: #a78bfa; font-weight: 700; }
    .aliment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px,1fr)); gap: 9px; }
    .aliment-card { display: flex; flex-direction: column; align-items: center; gap: 5px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 12px 6px; cursor: pointer; font-family: var(--font); color: #E2D9F3; transition: border-color .12s; }
    .aliment-card:hover { border-color: rgba(167,139,250,0.5); }
    .al-emoji { font-size: 1.7rem; }
    .al-name { font-size: .72rem; text-align: center; color: rgba(226,217,243,0.8); line-height: 1.2; }
    .al-cibles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
    .al-cible { font-size: .7rem; background: rgba(167,139,250,0.18); color: #c9b8ff; border-radius: 999px; padding: 3px 9px; font-weight: 700; }
    .al-recipes { display: flex; flex-direction: column; gap: 6px; }
    .al-reci { text-align: left; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 9px 12px; color: #E2D9F3; font-family: var(--font); font-size: .84rem; cursor: pointer; }
    .al-reci:hover { border-color: rgba(167,139,250,0.5); }
    .reci-why { background: rgba(110,231,183,0.1); border: 1px solid rgba(110,231,183,0.25); border-radius: 12px; padding: 10px 12px; font-size: .83rem; color: #c9f5e4; margin-bottom: 6px; line-height: 1.5; }
    .reci-banner { background: rgba(167,139,250,0.18); border-radius: 10px; padding: 8px 12px; font-size: .82rem; color: #e9e2ff; margin-bottom: 10px; font-weight: 600; }
    .shop-btn { width: 100%; margin-top: 16px; padding: 12px; border-radius: 999px; border: 1px solid rgba(96,165,250,0.4); background: rgba(96,165,250,0.14); color: #bfdbfe; font-weight: 700; font-size: .88rem; cursor: pointer; font-family: var(--font); }
    .shop-btn:hover { background: rgba(96,165,250,0.26); }
    .nutri-toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%) translateY(20px); background: #2a1f45; color: #fff; border: 1px solid rgba(167,139,250,0.5); border-radius: 12px; padding: 11px 18px; font-size: .85rem; font-family: var(--font); opacity: 0; pointer-events: none; transition: all .25s; z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
    .nutri-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    .nutri-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-soft); cursor: pointer; transition: transform .12s, box-shadow .15s; }
    .nutri-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .nutri-card-img { width: 100%; height: 140px; border-radius: var(--radius-md); background: var(--surface-container); display: flex; align-items: center; justify-content: center; font-size: 3.4rem; margin-bottom: 12px; }
    .nutri-card h3 { font-size: 1rem; font-weight: 800; margin-bottom: 6px; }
    .nutri-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
    .nutri-tag { font-size: .65rem; font-weight: 700; color: var(--primary-container); background: var(--primary-fixed); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px 8px; }
    .nutri-meta { display: flex; align-items: center; justify-content: space-between; }
    .nutri-time { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
    .nutri-btn { background: var(--primary-container); color: var(--on-primary); border: none; border-radius: var(--radius-md); padding: 7px 12px; font-size: .75rem; font-weight: 700; cursor: pointer; font-family: var(--font); }
    .nutri-btn:hover { background: var(--primary); }
    .nutri-note { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin-top: 16px; box-shadow: var(--shadow-soft); }
    .nutri-note p { font-size: .8rem; color: var(--text-muted); line-height: 1.6; }

    /* ════════════════════════════════════════════════
       PROGRESS / LEARN common
       ════════════════════════════════════════════════ */
    .learn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .asso-grid { display: flex; flex-direction: column; gap: 10px; }
    /* Carte communauté mise en avant (dégradé Instagram) */
    .insta-featured { border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) border-box; }
    .insta-featured:hover { border-color: transparent; }
    #s-asso .insta-featured { background: linear-gradient(rgba(30,3,54,.88), rgba(30,3,54,.88)) padding-box, linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) border-box; }
    .insta-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
    .insta-badge { display: inline-block; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; background: linear-gradient(45deg, #e6683c, #cc2366); color: #fff; padding: 2px 9px; border-radius: 20px; margin-bottom: 5px; }
    .insta-handle { font-weight: 600; opacity: .6; font-size: .8rem; margin-left: 6px; }
    .asso-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; text-decoration: none; color: var(--text); box-shadow: var(--shadow-soft); transition: transform .12s, box-shadow .15s; }
    .asso-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
    .asso-icon { font-size: 1.8rem; flex-shrink: 0; }
    .asso-body { flex: 1; min-width: 0; }
    .asso-name { font-size: .9rem; font-weight: 700; margin-bottom: 3px; }
    .asso-desc { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
    .asso-link { font-size: 1.1rem; color: var(--primary); flex-shrink: 0; }
    .partner-badge { display: inline-block; font-size: .65rem; font-weight: 800; background: var(--primary-container); color: var(--on-primary-container); border-radius: 4px; padding: 2px 6px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
    .learn-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 12px; box-shadow: var(--shadow-soft); cursor: pointer; transition: transform .12s, box-shadow .15s; text-align: center; }
    .learn-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .learn-card .lc-ic { font-size: 2.2rem; margin-bottom: 10px; }
    .learn-card h3 { font-size: .85rem; font-weight: 800; line-height: 1.35; }

    .screening-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
    .screening-item { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: none; }
    .screening-item .si-q { font-size: .88rem; font-weight: 700; margin-bottom: 10px; color: #E2D9F3; }
    .screening-item .si-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary-fixed); color: var(--primary-container); font-size: .72rem; font-weight: 800; margin-right: 7px; }
    .si-dots { display: flex; gap: 5px; }
    .si-dots button { flex: 1; height: 38px; border-radius: var(--radius-sm); border: 1.5px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); cursor: pointer; font-family: var(--font); font-size: .82rem; font-weight: 700; color: rgba(226,217,243,0.8); transition: all .12s; }
    .si-dots button.on { background: var(--primary-container); border-color: var(--primary-container); color: white; box-shadow: 0 2px 8px rgba(124,58,237,.25); }
    .screening-res { background: var(--primary-fixed); border: 1px solid var(--primary-fixed-dim); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px; text-align: center; }
    .screening-score { font-size: 2.2rem; font-weight: 800; color: var(--primary-container); line-height: 1; }
    .screening-score span { font-size: 1rem; color: var(--text-muted); font-weight: 700; margin-left: 3px; }
    .screening-label { font-size: .95rem; font-weight: 700; margin-top: 8px; }
    .screening-advice { font-size: .84rem; color: var(--text-muted); line-height: 1.6; margin-top: 8px; }
    .screening-hlist { display: flex; flex-direction: column; gap: 8px; }
    .screening-hitem { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; }
    .screening-hitem span { font-size: .8rem; color: var(--text-muted); }
    .screening-hitem b { font-size: .92rem; color: var(--primary-container); }
    .screening-hitem b.ok { color: #059669; }
    .screening-hitem b.mid { color: #d97706; }
    .screening-hitem b.hi { color: #f97316; }
    .screening-hitem b.bad { color: var(--error); }

    /* ════════════════════════════════════════════════
       MODALS
       ════════════════════════════════════════════════ */
    .ov { display: none; position: fixed; inset: 0; background: rgba(11, 28, 48, .55); z-index: 100; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(4px); }
    .ov.open { display: flex; }
    .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 26px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); position: relative; max-height: 90vh; overflow-y: auto; }
    .modal h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 18px; }
    .modal label { font-size: .78rem; color: var(--text-muted); display: block; margin-bottom: 5px; font-weight: 600; }
    .modal input { margin-bottom: 12px; }
    .tab-r { display: flex; margin-bottom: 18px; border: 1.5px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
    .tab-b { flex: 1; background: transparent; border: none; padding: 10px; color: var(--text-muted); font-size: .86rem; font-family: var(--font); cursor: pointer; transition: background .15s; }
    .tab-b.on { background: var(--primary-container); color: var(--on-primary); font-weight: 700; }
    .err { color: var(--error); font-size: .78rem; margin-bottom: 10px; display: none; }
    .mc { display: flex; gap: 10px; margin-top: 8px; }
    .mc-ok { flex: 1; }
    .mc-no { padding: 12px 18px; }
    .modal-x { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; line-height: 1; }
    .cb-block { background: var(--surface-container-low); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 12px; }
    .cb-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; }
    .cb-row input[type=checkbox] { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--primary-container); }
    .cb-row label { font-size: .78rem; color: var(--text); margin: 0; line-height: 1.45; }
    .cb-block p { font-size: .74rem; color: var(--text-muted); line-height: 1.5; }
    .beta-note { background: rgba(217,119,6,.06); border: 1px solid rgba(217,119,6,.15); border-radius: var(--radius-md); padding: 10px 12px; font-size: .76rem; color: #92400e; line-height: 1.5; margin-bottom: 12px; }

    .flag-ov { display: none; position: fixed; inset: 0; background: rgba(11, 28, 48, .55); z-index: 200; align-items: flex-end; justify-content: center; padding: 16px; backdrop-filter: blur(4px); }

    /* Visite guidée post-inscription */
    .tour-ov { display: none; position: fixed; inset: 0; background: rgba(11, 18, 38, .5); z-index: 220; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); }
    .tour-ov.open { display: flex; }
    .tour-card { background: rgba(30, 20, 60, .95); border: 1px solid rgba(167,139,250,0.4); border-radius: 24px; padding: 28px 24px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
    .tour-ic { font-size: 2.6rem; margin-bottom: 10px; }
    .tour-step-lbl { font-size: .75rem; font-weight: 800; color: #a78bfa; letter-spacing: .08em; margin-bottom: 8px; }
    .tour-card h3 { font-size: 1.15rem; font-weight: 800; color: #f0e8ff; margin-bottom: 10px; }
    .tour-card p { font-size: .9rem; color: rgba(226,217,243,0.8); line-height: 1.55; margin-bottom: 20px; }
    .tour-next { width: 100%; padding: 14px; background: linear-gradient(90deg, #7c3aed, #a855f7); color: #fff; font-size: .95rem; font-weight: 800; font-family: var(--font); border: none; border-radius: 14px; cursor: pointer; margin-bottom: 10px; }
    .tour-skip { font-size: .8rem; color: rgba(226,217,243,0.5); cursor: pointer; text-decoration: underline; }
    .flag-ov.open { display: flex; }
    .flag-m { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md); padding: 22px; width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); }
    .flag-m h4 { margin-bottom: 6px; font-size: .95rem; font-weight: 800; }
    .flag-m p { font-size: .78rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
    .flag-m textarea { margin-bottom: 10px; }
    .flag-ok-msg { font-size: .8rem; color: var(--secondary); margin-top: 8px; display: none; font-weight: 600; }
    .flag-footer { display: flex; gap: 8px; justify-content: flex-end; }

    .recipe-modal, .learn-modal { max-width: 480px; }
    .recipe-modal h3, .learn-modal h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; color: var(--text); }
    .recipe-modal .r-meta { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
    .recipe-modal h4, .learn-modal h4 { font-size: .78rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 8px; }
    .recipe-modal ul, .recipe-modal ol { padding-left: 18px; font-size: .86rem; color: var(--text); line-height: 1.7; }
    .recipe-modal li { margin-bottom: 5px; }
    .learn-modal .lc-ic { font-size: 2.4rem; margin-bottom: 8px; }
    .learn-modal p { font-size: .86rem; line-height: 1.75; color: var(--text); margin-bottom: 12px; }
    .learn-modal .l-source { font-size: .76rem; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 12px; margin-top: 16px; }
    .text-link { border: 0; background: none; color: var(--primary); padding: 0; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

    /* ════════════════════════════════════════════════
       RESPONSIVE DESKTOP
       ════════════════════════════════════════════════ */
    @media (min-width: 768px) {
      .top-header, .bottom-nav { display: none; }
      .sidebar { display: flex; }
      main { margin-left: var(--sidebar-w); margin-top: 0; margin-bottom: 0; }
      .content-wrap { padding: 32px 40px; }

      .land-title { font-size: 3.6rem; }
      .land-sub { font-size: 1.15rem; }

      .dash-top { padding: 28px; }
      .dash-score-grid { grid-template-columns: 1.6fr 1fr 1fr; }
      .bento-grid { grid-template-columns: repeat(4, 1fr); }
      .bento-card.wide { grid-column: span 2; }
      .nutri-grid { grid-template-columns: repeat(2, 1fr); }
      .learn-grid { grid-template-columns: repeat(4, 1fr); }
      .more-grid { grid-template-columns: repeat(4, 1fr); }
    }

    @media (max-width: 380px) {
      .land-title { font-size: 2.3rem; }
      .bento-grid { grid-template-columns: 1fr; }
      .bento-card.wide { grid-column: 1 / -1; }
      .dash-score-grid { grid-template-columns: 1fr; }
      .learn-grid { grid-template-columns: 1fr; }
      .more-grid { grid-template-columns: 1fr; }
    }

    /* Dark mode minimal */
    body.dark {
      --background: #0b1120;
      --surface: #151b2b;
      --surface-container-lowest: #111725;
      --surface-container-low: #1a2133;
      --surface-container: #222a3e;
      --surface-container-high: #2a3348;
      --surface-container-highest: #323c52;
      --surface-variant: #2a3348;
      --surface-dim: #1a2133;
      --text: #e8ecf6;
      --text-muted: #9aa3b8;
      --border: #2a3348;
      color: var(--text);
      background: var(--background);
    }
    body.dark .land-title, body.dark .land-sub { text-shadow: none; }
    body.dark .land-cta-main { box-shadow: none; }

    .skip-link {
      position: fixed; top: 8px; left: 8px; z-index: 10000;
      transform: translateY(-150%); padding: 10px 14px; border-radius: 10px;
      background: var(--surface); color: var(--text); font-weight: 800;
      box-shadow: var(--shadow-lg);
    }
    .skip-link:focus { transform: translateY(0); }
    :focus-visible {
      outline: 3px solid #f59e0b !important;
      outline-offset: 3px;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }

    /* Dark mode fixes */
    body.dark .sparkline-card { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.15) !important; }
    body.dark .sparkline-card h4 { color: rgba(226,217,243,0.7) !important; }
    body.dark .sparkline-card .sp-val { color: #E2D9F3 !important; }
    body.dark .sparkline-card .sp-sub { color: rgba(226,217,243,0.55) !important; }
    body.dark .si-dots button { background: var(--surface-container); border-color: var(--surface-container-high); color: var(--text-muted); }
    body.dark .si-dots button:hover { border-color: var(--primary-container); color: var(--text); }
    body.dark .si-dots button.on { background: var(--primary-container); border-color: var(--primary-container); color: white; }
    body.dark .agent-pill { background: var(--surface-container); border-color: var(--surface-container-high); color: var(--text-muted); }
    body.dark .agent-pill.on { background: var(--primary-container); border-color: var(--primary-container); color: var(--on-primary); }
    body.dark .agent-pill:hover:not(.on) { border-color: var(--primary-container); color: var(--text); }

/* Classes utilitaires générées depuis les anciens style="" inline (durcissement CSP) */
.istyle-1 { display:flex;align-items:center;gap:8px; }
.istyle-2 { padding:8px 10px;font-size:1.05rem;line-height:1; }
.istyle-3 { margin-bottom:6px; }
.istyle-4 { font-size: 0.65rem; color: rgba(255,255,255,0.4); text-align: center; margin-top: 10px; line-height: 1.3; }
.istyle-5 { color:inherit;text-decoration:underline; }
.istyle-6 { display:flex;align-items:center; }
.istyle-7 { opacity:0.6; font-size:0.75rem; margin-left:6px; border-radius:50%; border:1px solid currentColor; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.istyle-8 { font-size:1.5rem; }
.istyle-9 { margin-top:24px; }
.istyle-10 { padding:16px;cursor:pointer; }
.istyle-11 { display:flex;align-items:center;gap:8px;margin-bottom:6px; }
.istyle-12 { color:var(--text-muted);font-weight:700; }
.istyle-13 { color:var(--text-muted);font-style:italic; }
.istyle-14 { margin: 16px 0; }
.istyle-15 { display:block;margin-top:4px;opacity:.7; }
.istyle-16 { font-size:.8rem;color:rgba(226,217,243,0.8);display:block;margin-bottom:6px; }
.istyle-17 { width:100%;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);border-radius:14px;padding:12px;color:#E2D9F3;font-family:var(--font);resize:vertical;outline:none;margin-bottom:16px; }
.istyle-18 { display:none;color:#6ee7b7;text-align:center;padding:8px;font-weight:700;margin-bottom:16px; }
.istyle-19 { display:none; }
.istyle-20 { font-size:.82rem;font-weight:800;margin-bottom:10px; }
.istyle-21 { color:var(--text-muted);font-size:.85rem; }
.istyle-22 { font-size:.8rem;color:var(--text-muted);margin-bottom:16px; }
.istyle-23 { display:flex;gap:10px;flex-wrap:wrap;margin:20px 0; }
.istyle-24 { display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--text-muted); }
.istyle-25 { width:auto; }
.istyle-26 { padding:16px;margin-bottom:16px; }
.istyle-27 { font-size:.85rem;margin-top:12px;white-space:pre-wrap; }
.istyle-28 { padding:16px; }
.istyle-29 { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px; }
.istyle-30 { font-size:.85rem; }
.istyle-31 { white-space:pre-wrap;font-size:.78rem;color:var(--text-muted);font-family:var(--font); }
.istyle-32 { font-size:.8rem;color:rgba(226,217,243,0.8);display:block;margin:16px 0 6px; }
.istyle-33 { font-size:.82rem;line-height:1.6;margin-top:6px; }
.istyle-34 { color:#E2D9F3; }
.istyle-35 { font-size:.78rem;color:rgba(226,217,243,0.7);display:block;margin:10px 0 4px; }
.istyle-36 { width:100%; }
.istyle-37 { font-size:.78rem;color:rgba(226,217,243,0.7);display:block;margin:14px 0 4px; }
.istyle-38 { justify-content:flex-start;gap:14px; }
.istyle-39 { min-width:40px;text-align:center;font-size:1.1rem; }
.istyle-40 { grid-template-columns:repeat(3,1fr);margin-top:16px; }
.istyle-41 { display:flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(226,217,243,0.8);margin-top:14px; }
.istyle-42 { width:100%;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);border-radius:14px;padding:12px;color:#E2D9F3;font-family:var(--font);resize:vertical;outline:none;margin-top:12px; }
.istyle-43 { margin-top:14px; }
.istyle-44 { grid-template-columns:repeat(3,1fr);margin-bottom:16px; }
.istyle-45 { margin-top:12px; }
.istyle-46 { margin-top:8px; }
.istyle-47 { color:rgba(226,217,243,0.4);padding:20px 0;text-align:center; }
.istyle-48 { width:0%; }
.istyle-49 { margin-bottom:14px; }
.istyle-50 { padding:16px 16px 0; }
.istyle-51 { color:var(--text-muted);line-height:1.6; }
.istyle-52 { display:none;margin:0 16px 16px; }
.istyle-53 { font-size:0.8rem;color:var(--text-muted);margin-top:10px; }
.istyle-54 { padding:0 16px 16px; }
.istyle-55 { color:var(--text-muted);font-size:.8rem;padding:10px; }
.istyle-56 { font-size:.95rem;font-weight:700;margin:0 0 12px;opacity:.8; }
.istyle-57 { border-color:var(--primary); }
.istyle-58 { display:none;margin-top:28px; }
.istyle-59 { margin-top:28px; }
.istyle-60 { margin-bottom:12px; }
.istyle-61 { width:100%;margin-bottom:10px;background:rgba(255,255,255,0.08);border:1.5px solid var(--border);border-radius:12px;padding:11px 14px;color:#E2D9F3;font-family:var(--font);font-size:.9rem; }
.istyle-62 { width:100%;margin-bottom:12px;background:rgba(255,255,255,0.08);border:1.5px solid var(--border);border-radius:12px;padding:11px 14px;color:#E2D9F3;font-family:var(--font);font-size:.9rem;resize:vertical; }
.istyle-63 { margin-top:10px;display:none; }
.istyle-64 { margin-bottom:10px; }
.istyle-65 { color:#c9b8ff;cursor:pointer;text-decoration:underline; }
.istyle-66 { display:none; font-size: 0.84rem; margin-bottom: 12px; font-weight: 600; padding: 8px; border-radius: var(--radius-sm); }
.istyle-67 { display:flex; flex-direction:column; gap:8px; }
.istyle-68 { position:relative;width:100%; }
.istyle-69 { padding-right:40px; }
.istyle-70 { position:absolute;right:4px;top:50%;transform:translateY(-50%);border:none;padding:4px;min-height:unset;height:auto;font-size:1.1rem;background:transparent; }
.istyle-71 { display:flex;gap:8px;align-items:center; }
.istyle-72 { padding:4px 12px; }
.istyle-73 { min-width:44px;text-align:center; }
.istyle-74 { margin-top:12px;display:none; }
.istyle-75 { color:var(--text-muted); }
.istyle-76 { padding:18px; }
.istyle-77 { margin-bottom:8px; }
.istyle-78 { border-color:rgba(186,26,26,.2); }
.istyle-79 { color:var(--error); }
.istyle-80 { font-size:.84rem;color:var(--text-muted);margin-bottom:14px;line-height:1.5; }
.istyle-81 { margin-top:4px; }
.istyle-82 { max-width:560px; }
.istyle-83 { font-size: 0.72rem; color: rgba(255,255,255,0.4); text-align: center; margin-top: 30px; line-height: 1.5; padding: 10px; }
.istyle-84 { font-size:0.8rem;text-align:center;color:var(--text-muted);margin-top:10px; }
.istyle-85 { display:none;color:#10b981;margin-bottom:12px;font-size:0.85rem;font-weight:600;background:rgba(16,185,129,0.1);padding:8px;border-radius:6px;border:1px solid rgba(16,185,129,0.2); }
.istyle-86 { display:flex;justify-content:space-between;align-items:center;margin-bottom:4px; }
.istyle-87 { margin:0; }
.istyle-88 { padding:0;border:none;font-size:0.75rem;min-height:unset;height:auto;color:var(--text-muted); }
.istyle-89 { position:relative;width:100%;margin-bottom:8px; }
.istyle-90 { padding-right:40px;margin-bottom:0; }
.istyle-91 { font-size:0.85rem;color:var(--text-muted);margin-bottom:14px;line-height:1.5; }
.istyle-92 { font-size:0.85rem;color:var(--text-muted);margin-bottom:14px; }
.istyle-93 { margin-left:auto; }
.istyle-94 { margin-top:16px; }
.istyle-95 { justify-content:center; }
.istyle-96 { font-size:1.3rem; }
.istyle-97 { padding:6px 10px;font-size:.72rem; }
.istyle-98 { margin-top:6px; }
.istyle-99 { opacity:.55;font-weight:400; }
.istyle-100 { flex:1;width:100%;display:flex;align-items:flex-end; }
.istyle-101 { color:var(--text-muted);font-size:.8rem;padding:6px; }
.istyle-102 { color:var(--error);font-size:.8rem;padding:6px; }
.istyle-103 { display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,0.05); padding:8px 12px; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,0.05); }
.istyle-104 { display:flex; flex-direction:column; gap:2px; max-width:75%; }
.istyle-105 { font-weight:600; font-size:0.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.istyle-106 { font-size:0.7rem; color:var(--text-muted); }
.istyle-107 { color:var(--error); padding:6px; height:auto; width:auto; border-radius:50%; }